以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
- 1. 以 Vue / GSAP / D3 為核?心的 網?頁視覺動態整合與架構設計 墨?雨設計 吳哲宇 MOPCON @ 2017.10.29
- 6. 吳哲宇 動畫互動網?頁程式入?門講師 墨?雨設計 Monoame Design 設計/網?頁全端雙棲的?工程師 為了了有趣的想法赴湯蹈火
- 8. Outline ? Web development - Vue framework ? Animation basic & Math ? Vuex structure for controlling page motion ? Abstract concept - component for animation ? Lifecycle and framework
- 9. Web development - Vue framework
- 11. Vue Style DOM vm.labelText = “newText” @click @click labelText = “new Text” Data
- 13. Manage Complex Will increase after each layer
- 14. Data Layer Map Layer View Layer
- 16. Data Layer : Static Map Layer : Transform View Layer : Only Show
- 17. Animation basic & Math
- 23. 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
- 24. How does this look like?
- 25. Linear y= 4x
- 26. ㄧ樣從起點到終點 有不同的走法 y=240-(60-x)^2 / 15 y= (x)^2 / 15 y= 4x
- 27. EaseIn y=240-(60-x)^2 / 15 EaseOut y= (x)^2 / 15
- 28. EaseIn y=240-(60-x)^2 / 15 EaseOut y= (x)^2 / 15
- 29. Concept: Map Time into Function
- 30. Concept: Map Time into Function Ease Function Time (T=0,1,2,…) Pos=20,40,60….
- 31. Concept: Map Time into Function Time (T=0,1,2,…) Pos=20,40,60…. Time
- 32. y= sin(x) y= exp(x) y= mod(x,10) Many kinds of shape functions
- 33. Example: Sin y= sin(x) Scroll Pos TranslateX
- 34. Example: mod+ceil -> stair y= mod(ceil(x/3),3)) Scroll Pos TranslateX
- 37. Circle R=1
- 40. Vuex structure for controlling page motion
- 41. Traditional Scroll Effect Scroll Event DOM translateX( scrollTop*50 px) scrollTop
- 42. Too Messy to update together
- 44. Vue Style Scroll Effect Scroll EventDOM A B C Data: scrollTop =50… Map Map Map
- 45. Traditional Scroll Effect Scroll Event DOM translateX( scrollTop*50 px) Data: scrollTop Vue Watch Data :style Math Map
- 46. Scroll EventDOM A B C Data: scrollTop =50… Map Map Map Trigger By Data change instead of Event
- 47. Abstract concept - component for animation
- 48. Problem too much state / behavior
- 49. Example: 狠狠撸 In on Scroll
- 50. Slot for inner Element
- 53. Use Slot to insert inner Element
- 54. Use CSS Class to Control Animation Graph
- 58. Vue -> Auto Generate DOM Object
- 62. Lifecycle- mount Object D3 / GSAP Bind Object On mount
- 63. Svg as root (this.$el) D3 select initialize
- 64. Svg Bubble Component Prop Data Change Watch D3 Update Graph
- 67. Summary ? Data to Change State ? Math to Transform (MAP) / Easing ? Centralize UI Inputs (scrollTop…) ? Combine Frameworks
- 68. Q & A