Successfully reported this slideshow.
Upcoming SlideShare
×

# 以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇

1,482 views

Published on

Published in: Engineering
• Full Name
Comment goes here.

Are you sure you want to Yes No

Are you sure you want to  Yes  No

### 以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇

1. 1. 以 Vue / GSAP / D3 為核⼼心的 網⾴頁視覺動態整合與架構設計 墨墨雨設計 吳哲宇 MOPCON @ 2017.10.29
2. 2. http://monoame.com/
3. 3. 吳哲宇 動畫互動網⾴頁程式入⾨門講師 墨墨雨設計 Monoame Design 設計/網⾴頁全端雙棲的⼯工程師 為了了有趣的想法赴湯蹈火
4. 4. Outline • Web development - Vue framework • Animation basic & Math • Vuex structure for controlling page motion • Abstract concept - component for animation • Lifecycle and framework
5. 5. Web development - Vue framework
6. 6. Jquery Style DOM \$(“label”).text(“new Text”) @click @click
7. 7. Vue Style DOM vm.labelText = “newText” @click @click labelText = “new Text” Data
9. 9. Manage Complex Will increase after each layer
10. 10. Data Layer Map Layer View Layer
11. 11. Functional Programming
12. 12. Data Layer : Static Map Layer : Transform View Layer : Only Show
13. 13. Animation basic & Math
14. 14. Where animation begin T=0
15. 15. Where animation begin T=1
16. 16. Where animation begin T=2
17. 17. Where animation begin T=2T=1T=0
18. 18. Continuous Change T=2 PosX = 80 T=1 PosX = 40 T=0 PosX = 0 T=5 PosX = 200 T=4 PosX = 160 T=3 PosX = 120
19. 19. How does this look like?
20. 20. Linear y= 4x
21. 21. ㄧ樣從起點到終點 有不同的走法 y=240-(60-x)^2 / 15 y= (x)^2 / 15 y= 4x
22. 22. EaseIn y=240-(60-x)^2 / 15 EaseOut y= (x)^2 / 15
23. 23. EaseIn y=240-(60-x)^2 / 15 EaseOut y= (x)^2 / 15
24. 24. Concept: Map Time into Function
25. 25. Concept: Map Time into Function Ease Function Time (T=0,1,2,…) Pos=20,40,60….
26. 26. Concept: Map Time into Function Time (T=0,1,2,…) Pos=20,40,60…. Time
27. 27. y= sin(x) y= exp(x) y= mod(x,10) Many kinds of shape functions
28. 28. Example: Sin y= sin(x) Scroll Pos TranslateX
29. 29. Example: mod+ceil -> stair y= mod(ceil(x/3),3)) Scroll Pos TranslateX
30. 30. https://goo.gl/PrgdME Sin + Stair
31. 31. http://easings.net/zh-tw Easing 函數速查表
32. 32. Circle R=1
33. 33. https://goo.gl/rbh5vG
34. 34. Vuex structure for controlling page motion
35. 35. Traditional Scroll Effect Scroll Event DOM translateX( scrollTop*50 px) scrollTop
36. 36. Too Messy to update together
37. 37. Traditional Scroll Effect Scroll EventDOM A B C
38. 38. Vue Style Scroll Effect Scroll EventDOM A B C Data: scrollTop =50… Map Map Map
39. 39. Traditional Scroll Effect Scroll Event DOM translateX( scrollTop*50 px) Data: scrollTop Vue Watch Data :style Math Map
40. 40. Scroll EventDOM A B C Data: scrollTop =50… Map Map Map Trigger By Data change instead of Event
41. 41. Abstract concept - component for animation
42. 42. Problem too much state / behavior
43. 43. Example: Slide In on Scroll
44. 44. Slot for inner Element
45. 45. Central State Input Component Component Component
46. 46. Update element Top
47. 47. Use Slot to insert inner Element
48. 48. Use CSS Class to Control Animation Graph
49. 49. http://2017.n3xtcon.com/
50. 50. Lifecycle and framework
51. 51. Vue -> Auto Generate DOM Object
52. 52. http://saving.energypark.org.tw/家庭電器⽤用電家計簿
53. 53. http://saving.energypark.org.tw/家庭電器⽤用電家計簿
54. 54. http://saving.energypark.org.tw/家庭電器⽤用電家計簿
55. 55. Lifecycle- mount Object D3 / GSAP Bind Object On mount
56. 56. Svg as root (this.\$el) D3 select initialize
57. 57. Svg Bubble Component Prop Data Change Watch D3 Update Graph
58. 58. http://saving.energypark.org.tw/家庭電器⽤用電家計簿
59. 59. Summary • Data to Change State • Math to Transform (MAP) / Easing • Centralize UI Inputs (scrollTop…) • Combine Frameworks
60. 60. Q & A