Engaging User Experiences: Periscope Hearts And Chats

Video:
https://www.youtube.com/watch?v=pr1juTDeEqI

Abstract:
Periscope is a live streaming video app that makes watching broadcasts a truly interactive experience. Viewers can participate in a live broadcast by sending hearts and chats to the broadcaster. This talk will provide insight into how the Android team built this core user experience. You’ll learn what gives hearts their light, airy feel, how they flutter on the screen, and how chats animate on and off the screen. We’ll describe the why, what, and how behind them, and walk through actual code that powers these custom views and animations.

Transcript

1. Engaging User Experiences: Periscope for Android @lientm
2. What is Periscope? • interactive live-streaming video • the closest thing to teleportation
4. en·gag·ing
 adjective
 
 very attractive or pleasing in a way that holds your attention From: Merriam Webster
5. PURPOSEFUL
6. Hearts
7. heart_border (98x81) heart_fill (90x75) Making of a heart
8. Making of a heart
9. Making of a heart
10. Heart colors
11. // Draw the border
 Bitmap bitmap = Bitmap.createBitmap(border.getWidth(), 
 border.getHeight(), Bitmap.Config.ARGB_8888);
 Canvas canvas = new Canvas(bitmap);
 canvas.drawBitmap(border, 0, 0, paint);
 
 
 
 
 
 
 
 
 
 

12. // Draw the border
 Bitmap bitmap = Bitmap.createBitmap(border.getWidth(), 
 border.getHeight(), Bitmap.Config.ARGB_8888);
 Canvas canvas = new Canvas(bitmap);
 canvas.drawBitmap(border, 0, 0, paint);
 
 // Set up the color
 color = ParticipantUtil.get(res, participantIndex);
 colorFilter = new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP);
 paint.setColorFilter(colorFilter);
 
 
 
 

13. // Draw the border
 Bitmap bitmap = Bitmap.createBitmap(border.getWidth(), 
 border.getHeight(), Bitmap.Config.ARGB_8888);
 Canvas canvas = new Canvas(bitmap);
 canvas.drawBitmap(border, 0, 0, paint);
 
 // Set up the color
 color = ParticipantUtil.get(res, participantIndex);
 colorFilter = new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP);
 paint.setColorFilter(colorFilter);
 
 // Draw the fill
 float x = (border.getWidth() - fill.getWidth()) / 2f;
 float y = (border.getHeight() - fill.getHeight()) / 2f;
 canvas.drawBitmap(fill, x, y, paint);
14. You’ve got to move them move them…
15. “Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.” From Material Design Introduction
16. The Path to our Hearts • Paths, for better control • cubic Bezier curves • randomization (weaving, length)
17. // Bezier weaving randomization
 Random r = sRandom;
 int i = r.nextInt(mXRand);
 int i2 = r.nextInt(mXRand);
 
 int length =(HEART_COUNT_MULTIPLIER * heartCount.intValue()) + mLength * lengthMultiplier;
 
 // Length randomization
 length += r.nextInt(mLengthRand); HeartRenderer.java
18. Path path = new Path();
 path.moveTo(mInitX, adjustedYvalue);
 path.cubicTo(…);
 path.moveTo(…);
 path.cubicTo(…); HeartRenderer.java
19. Animation Basics • duration • time interpolation • animator sets
20. Animating Hearts • ObjectAnimator - scale, rotation, path, alpha • AnimatorSet • LinearInterpolater
21. // Set up bezier curve
 ObjectAnimator curve = ObjectAnimator.ofFloat(view, View.X,
 View.Y, bezierPath);
 curve.setDuration(DURATION);
 
 // Set up rotation
 float rotationAmount = randomizedRotationAmount();
 ObjectAnimator rotation = ObjectAnimator.ofFloat(view,
 View.ROTATION, 0, rotationAmount);
 rotation.setDuration(DURATION);
 
 // Set up alpha
 ObjectAnimator alpha = ObjectAnimator.ofFloat(view,
 View.ALPHA, 1.0f, 0.0f);
 alpha.setDuration(DURATION); HeartRenderer.java
22. // Play bezier path animation, rotation, and alpha
 List<Animator> items = new ArrayList<>();
 items.add(curve);
 items.add(rotation);
 items.add(alpha);
 AnimatorSet bezierSet = new AnimatorSet();
 bezierSet.setInterpolator(new LinearInterpolator());
 bezierSet.playTogether(items);
 bezierSet.start(); HeartRenderer.java
23. Custom Hearts #halloween #worldseries #birthday #easterEgg
24. Conversations
25. Chats
26. Chats
29. Rendering Chats RecyclerView with: • LinearLayoutManager • custom ItemAnimator
30. LinearLayoutManager layout = new LinearLayoutManager(c) {
 @Override
 public boolean canScrollVertically() {
 return false;
 }
 };
 layout.setStackFromEnd(true); 
 ChatMessageContainerView.java
31. LinearLayoutManager layout = new LinearLayoutManager(c) {
 @Override
 public boolean canScrollVertically() {
 return false;
 }
 };
 layout.setStackFromEnd(true);
 mRecyclerView.setLayoutManager(layout);
 mRecyclerView.setHasFixedSize(true); mRecyclerView.setItemAnimator(new ChatMessageAnimator()); ChatMessageContainerView.java
32. public void addMessage(Message m) {
 mAdapter.queue(m);
 int lastPosition = mAdapter.getItemCount() - 1;
 mRecyclerView.scrollToPosition(lastPosition);
 }
 
 ChatMessageContainerView.java
33. public void queue(Message m) {
 switch (m.type()) {
 case Join: {
 if (shouldMergeItem(m)) {
 mergeItem(m);
 return;
 }
 break;
 }
 }
 
 addItem(m);
 } ChatMessageAdapter.java
34. private void mergeItem(Message m) {
 int index = mItems.size() - 1;
 MessageItem lastItem = mItems.remove(index);
 MessageItem newItem = new MessageItem(m, lastItem.id);
 newItem.merge(lastItem.merge() + 1);
 mItems.add(newItem);
 mLastMsgType = m.type(); notifyItemChanged(index);
 } ChatMessageAdapter.java
35. private void addItem(Message m) {
 mItems.add(new MessageItem(m, mId++));
 mLastMsgType = m.type();
 notifyItemInserted(mItems.size());
 } ChatMessageAdapter.java
36. @Override public void onBindViewHolder(MessageItemHolder h,
 int position) {
 MessageItem item = getItem(position);
 switch (item.message.type()) {
 case Join: {
 bindItem((TextItemHolder) h, item);
 break;
 }
 }
 setUpFadeAnimation(h, item);
 } ChatMessageAdapter.java
37. Animating Chats RecyclerView adapter with: • custom FadeChoreographer
38. private void setUpFadeAnimation(MessageItemHolder h,
 MessageItem item) {
 // Remove any existing fade animation
 if (h.faderKey != null) {
 mChoreographer.remove(h.faderKey);
 }
 // Update alpha with remaining alpha
 h.itemView.setAlpha(item.remainingAlpha());
 
 // Get new fader
 Fader fader = new Fader(h.itemView, item);
 FaderKey key = FaderKey.create(h.getItemId(), item.merge());
 h.faderKey = key;
 
 // Update choreographer
 mChoreographer.put(key, fader);
 }
39. ValueAnimator a = ValueAnimator.ofFloat(
 item.remainingAlpha(), 0.0f);
 a.setDuration(item.remainingTime());
 a.setInterpolator(new DecelerateInterpolator());
 a.addUpdateListener(
 new ValueAnimator.AnimatorUpdateListener() {
 @Override
 public void onAnimationUpdate(ValueAnimator anim) {
 float val = (float) anim.getAnimatedValue();
 item.remainingTime(
 (long) (val * CHAT_ALPHA_DURATION));
 item.remainingAlpha(val);
 itemView.setAlpha(val);
 }
 }); Fader.java
41. Thank You! @lientm