Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Day7: Svelte 當中的 motion - spring 與 tweened

Kalan
September 16, 2020

Day7: Svelte 當中的 motion - spring 與 tweened

第 12 屆 IT 鐵人賽影片教學 — 30 天從 0 到 1 學 Svelte

Svelte 當中的 motion 有 spring 跟 tween 兩個功能,可以幫助提升使用者體驗。

Kalan

September 16, 2020
Tweet

More Decks by Kalan

Other Decks in Programming

Transcript

  1. 第 12 屆 IT 鐵⼈賽
    30 天從 0 到 1 學 Svelte
    Day7 - 創造互動:motion

    View Slide

  2. 第 12 屆 IT 鐵⼈賽
    本⽇⽬標
    認識 Svelte 當中的 motion,包含 spring 與 tween

    View Slide

  3. 第 12 屆 IT 鐵⼈賽
    Tween
    定義兩個數值之間的變化
    100 180

    View Slide

  4. 第 12 屆 IT 鐵⼈賽
    Svelte 當中的 tween

    View Slide

  5. 第 12 屆 IT 鐵⼈賽
    tweened 的特⾊
    可以定義 duration 與 easing
    介⾯和 writable store 相同
    具有 subscribe, set, update ⽅法

    View Slide

  6. 第 12 屆 IT 鐵⼈賽
    svelte 中的 spring
    讓物件動畫變得更加⽣動

    View Slide

  7. 第 12 屆 IT 鐵⼈賽
    參數定義
    stiffness 剛性
    damping 摩擦係數

    View Slide

  8. 第 12 屆 IT 鐵⼈賽
    實際練習!

    View Slide