Practice ProtoPie: Apple TV Settings Icon - 3D Animated Interaction

Показать описание

When doing TV UI design or prototyping for TV apps, the icons in the Apple TV menu are an awesome example and worth practicing your ProtoPie skills.

In this tutorial, Abhas explains how he recreated the 3D animated interaction in the Apple TV menu using 3D Rotate, Predefined Variables ($touchVelocity) and more in ProtoPie.

Process breakdown — try it yourself!
0:00 - Intro
0:33 - Overview of Layers and structure
2:16 - (Breakdown of Interactions begin)
2:32 - Setting up the base Drag and Touch Up (3:35)
4:33 - Detect X and Y motion
6:57 - Using Debug to Variable values
7:41 - Effect of “$TouchVelocity” to direction of movement
8:43 - 3D Rotate responses
9:46 - Making motion granular by reducing X/Y value
11:30 - Pro-tip: Why divide X and Y axis to different layer groups
13:14 - Move responses
13:28 - Move By vs. Move To
13:41 - Easing set to Linear
14:02 - velocityX & velocityY
15:08 - Using negative symbol to drag in opposite direction
16:38 - Creating the parallax effect
17:16 - Adding movement to the Oval group layer
18:17 - Moving the Light gradient layer to add shiny effect
19:30 - Clipping Sublayers and Border Radius
21:11 - Resetting with Touch Up
21:26 - Mid-Recap
22:03 - Moving Layers back to origin using default values
23:54 - Making the 3D Rotate snap back to origin
24:30 - Conditions Explained
25:42 - Reversing 3D Rotate
26:17 - Using Pivot on central axis (Origin vs. Custom)
26:40 - Impact of Origin on 3D Rotate
28:27 - Finishing touches with Clipping Sublayers
28:45 - Making layer invisible by setting Fill to 0 (Why not 0 opacity?)
29:27 - Finished prototype
29:33 - Outro

──────────────────────────
──────────────────────────
Social Channels
──────────────────────────
👉 Join the ProtoPie community

──────────────────────────
#ProtoPie #tutorial #design #interactiondesign #hifi #prototyping