Path morphing

Exploring delightful details on apps using path morphing technique and how we can use biology for our morphing animations.

Transcript

1. PATH MORPHING
4. M L C A Z
5. Move to L C A Z
6. Move to Line to C A Z
7. Move to Line to Curve to A Z
8. Move to Line to Curve to Arc to Z
9. Move to Line to Curve to Arc to Z close
10. M 6 , 3 L 9 , 6 L 6 , 9 L 3 , 6 L 6 , 3
11. M 6 , 3 L 9 , 6 L 6 , 9 L 3 , 6 L 6 , 3
12. M 6 , 3 L 9 , 6 L 6 , 9 L 3 , 6 L 6 , 3
13. M 6 , 3 L 9 , 6 L 6 , 9 L 3 , 6 L 6 , 3
14. M 6 , 3 L 9 , 6 L 6 , 9 L 3 , 6 L 6 , 3
15. M 6 , 3 L 9 , 6 L 6 , 9 L 3 , 6 L 6 , 3
16. <objectAnimator android:propertyName="pathData" android:valueFrom="M6,3 L9,6 L6,9 L3,6 L6,3" android:valueTo="M18,3 L21,6 L18,9 L15,6 L18,3" android:valueType="pathType" … / >
17. <objectAnimator android:propertyName="pathData" android:valueFrom="M6,3 L9,6 L6,9 L3,6 L6,3" android:valueTo="M18,3 L21,6 L18,9 L15,6 L18,3" android:valueType="pathType" … / >
18. InbeTweening
20. M 6 , 3 L 9 , 6 L 6 , 9 L 3 , 6 L 6 , 3 M 18,3 L 21,6 L 18,9 L 15,6 L 18,3 t = 0 t = 1 t = 0.5 M 12,3 L 15,6 L 12,9 L 9,6 L 12,3
21. M 6 , 3 L 9 , 6 L 6 , 9 L 3 , 6 L 6 , 3 M 18,3 L 21,6 L 18,9 L 15,6 L 18,3 t = 0 t = 1 t = 0.5 M 12,3 L 15,6 L 12,9 L 9,6 L 12,3
22. M 6 , 3 L 9 , 6 L 6 , 9 L 3 , 6 L 6 , 3 M 18,3 L 21,6 L 18,9 L 15,6 L 18,3 t = 0 t = 1 t = 0.5 M 12,3 L 15,6 L 12,9 L 9,6 L 12,3
23. M 6 , 3 L 9 , 6 L 6 , 9 L 3 , 6 L 6 , 3 M 18,3 L 21,6 L 18,9 L 15,6 L 18,3 t = 0 t = 1 t = 0.5 M 12,3 L 15,6 L 12,9 L 9,6 L 12,3
24. M 6 , 3 L 9 , 6 L 6 , 9 L 3 , 6 L 6 , 3 M 18,3 L 21,6 L 18,9 L 15,6 L 18,3 t = 0 t = 1 t = 0.5 M 12,3 L 15,6 L 12,9 L 9,6 L 12,3
25. M 6 , 3 L 9 , 6 L 6 , 9 L 3 , 6 L 6 , 3 M 18,3 L 21,6 L 18,9 L 15,6 L 18,3 t = 0 t = 1 t = 0.5 M 12,3 L 15,6 L 12,9 L 9,6 L 12,3
26. M 6 , 3 L 9 , 6 L 6 , 9 L 3 , 6 L 6 , 3 M 18,3 L 21,6 L 18,9 L 15,6 L 18,3 t = 0 t = 1 t = 0.5 M 12,3 L 15,6 L 12,9 L 9,6 L 12,3
27. M6,3 L9,6 L6,9 L3,6 L6,3 M18,3 L21,6 L18,9 L15,6 L18,3
28. M6,3 L9,6 L6,9 L3,6 L6,3 M18,3 L21,6 L18,9 L15,6 L18,3
29. M L L L L L L L M L L L L
30. M L L L L L L L M L L L L
31. M L L L L L L L M L L L L
32. M L L L L L L L M L L L L InflateException: Binary XML file line #3 Can’t morph from M6, 3, 6, 3, 9, 6, 6, 9, 3, 6Z to M181, 18, 1, 21.54, 2.46, 23, 6, 21.54, 9.54, 18, 11, 14, 9.54, 13, 6, 14.46, 2.46Z
33. UNDERCOVER
34. M L L L L M L L L L L L L L
35. M L L L L L L L L M L L L L L L L L
36. M L L L L L L L L M L L L L L L L L
37. POINT ORDER MATTERS
38. M L L L L L L L L M L L L L L L L L
39. M L L L L L L L L M L L L L L L L L
40. M L L L L L L L L M L L L L L L L L
41. M L L L L L L L L M L L L L L L L L
42. M L L L L L L L L M L L L L L L L L
43. Paths must have the same number & type of drawing commands Can use tricks like adding dummy points & converting lines into curves The order of the path points determines the final animation REQUIREMENTS
44. Design tools don’t expose points or order Design tools can’t overlap points Hard to visualise in-between states PROBLEMS
45. WHAT IF THERE WAS A TOOL THAT COULD Create dummy points Convert lines to curves Re-order points Export to SVG/VD/AVD
46. SHAPE SHIFTER
47. <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector android:name="vector" android:width="512dp" android:height="512dp" android:viewportWidth="512" android:viewportHeight="512"> <path android:name="path" android:pathData="M 407.6 426.8 C 415.7 434.9 417.2 441.1 412.6 447.2 C 407.2 442.5 402.4 442.7 398.3 447.8 … Z" android:fillColor="#ffffff" android:strokeColor="#000000" android:strokeAlpha="0" android:fillType="evenOdd"/> <group android:name="road" android:translateY="-39"> <path android:name="path_2" android:pathData="M 189.8 505.2 L 168.6 505.2 C 166.6 505.2 165 503.6 165 501.6 L 165 499.9… Z" android:fillColor="#ffffff" android:strokeColor="#000000"/> </group> </vector> </aapt:attr> <target android:name="path"> <aapt:attr name="android:animation"> <set> <objectAnimator android:propertyName="pathData" android:duration="1000" android:valueFrom="M 407.6 426.8 C 411.65 430.85 414.05 434.425 … Z” android:valueTo="M 407.2 427 C 411.5 429.9 415.1 433.5 415.2 438.8 … Z” android:valueType="pathType" android:interpolator=“@android:interpolator/linear_out_slow_in"/>
48. <objectAnimator android:propertyName="pathData" android:startOffset="1000" android:duration="1000" android:valueFrom="M 407.2 427 C 411.5 430 415 433 415 438 C 415.2 441.5 414.3 444.4 413.9 446.8 … Z” android:valueTo="M 407.2 427 C 411.5 430 415 433 415 438 C 415.2 441.5 414.3 444.4 412.6 447.2 … Z” android:valueType="pathType" android:interpolator="@android:anim/anticipate_interpolator"/> </set> </aapt:attr> </target> <target android:name="road"> <aapt:attr name="android:animation"> <objectAnimator android:propertyName="translateX" android:startOffset="1000" android:duration="1000" android:valueFrom="-39" android:valueTo="-117.905" android:valueType="floatType" android:interpolator="@android:anim/anticipate_interpolator"/> </aapt:attr> </target> </animated-vector>
49. AUTO FIX
50. MINIMISE DISTANCE BETWEEN POINTS Large distance Medium distance Small distance
51. Step 1. Add dummy points
52. Step 2. Pick starting point
53. Step 3. Morph
55. NEEDLEMAN WUNSCH
56. C A C T T A C C G T G A A T T A T C
57. C - - - A C T T A - C C G T G A A T T A T C 4 gaps 1 point mutation
58. M L C L L L C M C C C L L L C L C C
59. M C C C L L L C L C C 4 dummy points 1 incompatible command M L - C L L L - - - C
64. TRIANGULATΙΟΝ
65. Step 1. Triangulate
66. Step 2. Merge two neighbours
67. Step 3. Morph
69. https://shapeshifter.design
75. THANKS!
76. THANKS! github.com/charbgr @charbgr