Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
以 Vue / GSAP / D3 為核⼼心的
網⾴頁視覺動態整合與架構設計
墨墨雨設計 吳哲宇

MOPCON @ 2017.10.29
http://monoame.com/
吳哲宇

動畫互動網⾴頁程式入⾨門講師

墨墨雨設計 Monoame Design 

設計/網⾴頁全端雙棲的⼯工程師

為了了有趣的想法赴湯蹈火
Outline
• Web development - Vue framework

• Animation basic & Math

• Vuex structure for controlling page motion

• Abstr...
Web development -
Vue framework
Jquery Style
DOM
$(“label”).text(“new Text”)
@click
@click
Vue Style
DOM
vm.labelText = “newText”
@click
@click
labelText = “new Text”
Data
Why additional Layer?
Manage Complex
Will increase after each layer
Data Layer
Map Layer
View Layer
Functional
Programming
Data Layer : Static
Map Layer : Transform
View Layer : Only Show
Animation basic & Math
Where animation begin
T=0
Where animation begin
T=1
Where animation begin
T=2
Where animation begin
T=2T=1T=0
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
How does
this look like?
Linear
y= 4x
ㄧ樣從起點到終點
有不同的走法
y=240-(60-x)^2 / 15
y= (x)^2 / 15
y= 4x
EaseIn
y=240-(60-x)^2 / 15
EaseOut
y= (x)^2 / 15
EaseIn
y=240-(60-x)^2 / 15
EaseOut
y= (x)^2 / 15
Concept:
Map Time into Function
Concept:
Map Time into Function
Ease
Function
Time (T=0,1,2,…) Pos=20,40,60….
Concept:
Map Time into Function
Time (T=0,1,2,…)
Pos=20,40,60….
Time
y= sin(x) y= exp(x) y= mod(x,10)
Many kinds of shape functions
Example: Sin
y= sin(x)
Scroll Pos
TranslateX
Example: mod+ceil -> stair
y=
mod(ceil(x/3),3))
Scroll Pos
TranslateX
https://goo.gl/PrgdME
Sin
+ Stair
http://easings.net/zh-tw Easing 函數速查表
Circle
R=1
https://goo.gl/rbh5vG
Vuex structure for
controlling page motion
Traditional Scroll Effect
Scroll
Event
DOM
translateX( scrollTop*50 px) scrollTop
Too Messy to update together
Traditional Scroll Effect
Scroll
EventDOM
A
B
C
Vue Style Scroll Effect
Scroll
EventDOM
A
B
C
Data:
scrollTop
=50…
Map
Map
Map
Traditional Scroll Effect
Scroll
Event
DOM
translateX( scrollTop*50 px)
Data:
scrollTop
Vue Watch Data
:style Math
Map
Scroll
EventDOM
A
B
C
Data:
scrollTop
=50…
Map
Map
Map
Trigger By Data change
instead of Event
Abstract concept -
component for animation
Problem
too much state / behavior
Example:
Slide In on Scroll
Slot for inner Element
Central
State
Input
Component
Component
Component
Update element Top
Use Slot to insert inner Element
Use CSS Class to Control
Animation Graph
http://2017.n3xtcon.com/
Lifecycle and
framework
Vue -> Auto Generate
DOM Object
http://saving.energypark.org.tw/家庭電器⽤用電家計簿
http://saving.energypark.org.tw/家庭電器⽤用電家計簿
http://saving.energypark.org.tw/家庭電器⽤用電家計簿
Lifecycle- mount Object
D3 / GSAP
Bind Object
On mount
Svg as root (this.$el)
D3 select initialize
Svg
Bubble
Component
Prop Data Change
Watch
D3 Update
Graph
http://saving.energypark.org.tw/家庭電器⽤用電家計簿
Summary
• Data to Change State

• Math to Transform (MAP) / Easing

• Centralize UI Inputs (scrollTop…)

• Combine Framewo...
Q & A
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
Upcoming SlideShare
Loading in …5
×

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

1,482 views

Published on

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

Published in: Engineering
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

以 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
  8. 8. Why additional Layer?
  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

×