網頁視覺設計與程式開發時，因應不同互動需求，需在各個框架間整合與架構，以資料驅動內容與動態。 在本次分享中，將會討論開發上遇到的案例，從視覺設計到網頁開發，整合 Vue-cli / GSAP / D3 等框架，和以Vuex 為使用者輸入狀態中樞，調控多頁面網頁動態的方式。

1. 以 Vue / GSAP / D3 為核⼼心的
網⾴頁視覺動態整合與架構設計
墨墨雨設計 吳哲宇
MOPCON @ 2017.10.29

2. http://monoame.com/

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

10. Jquery Style
DOM
$(“label”).text(“new Text”)
@click
@click

11. Vue Style
DOM
vm.labelText = “newText”
@click
@click
labelText = “new Text”
Data

12. Why additional Layer?

13. Manage Complex
Will increase after each layer

14. Data Layer
Map Layer
View Layer

15. Functional
Programming

16. Data Layer : Static
Map Layer : Transform
View Layer : Only Show

17. Animation basic & Math

18. Where animation begin
T=0

19. Where animation begin
T=1

20. Where animation begin
T=2

21. Where animation begin
T=2T=1T=0

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

35. https://goo.gl/PrgdME
Sin
+ Stair

36. http://easings.net/zh-tw Easing 函數速查表

37. Circle
R=1

39. https://goo.gl/rbh5vG

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

43. Traditional Scroll Effect
Scroll
EventDOM
A
B
C

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:
Slide In on Scroll

50. Slot for inner Element

51. Central
State
Input
Component
Component
Component

52. Update element Top

53. Use Slot to insert inner Element

54. Use CSS Class to Control
Animation Graph

55. http://2017.n3xtcon.com/

57. Lifecycle and
framework

58. Vue -> Auto Generate
DOM Object

59. http://saving.energypark.org.tw/家庭電器⽤用電家計簿

60. http://saving.energypark.org.tw/家庭電器⽤用電家計簿

61. http://saving.energypark.org.tw/家庭電器⽤用電家計簿

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

66. http://saving.energypark.org.tw/家庭電器⽤用電家計簿

67. Summary
• Data to Change State
• Math to Transform (MAP) / Easing
• Centralize UI Inputs (scrollTop…)
• Combine Frameworks

68. Q & A