1.2 Animation 動畫 - Classic Animation經典動畫


Animate a number (ex: position, opacity, scale) using a standard animation curve whenever the number is changed.
See Animation Basics for more information.

值改變時,用標準動畫曲線對值進行動畫處理(例如:位置,不透明度,比例)。
更多信息,請查看動畫基礎
(板栗:就是給狀態A到狀態B之間的切換添加緩動動畫,一般用來模擬物體運動的阻力摩擦力這種物理運動規律)

輸入口

Number 值
The number to animate to.
動畫的值。(板栗:連接到這個接口表示同時使用下面的借口屬性,相當于“全選”下面屬性。)

Duration 持續時間
The length of the animation, in seconds.
動畫的時間要多長(單位秒)。

Curve 曲線類型
The easing curve to animate with. The options are:

  1. Linear
  2. Quadratic In, Out, In & Out
  3. Cubic In, Out, In & Out
  4. Exponential In, Out, In & Out
  5. Sinusoidal In, Out, In & Out

緩動曲線。以下為選項:(板栗:點擊Curve接口選擇)

  1. Linear 線性,勻速
  2. Quadratic In 二次方緩慢進入,先慢后快
  3. Quadratic In Out 二次方緩慢退出,先快后慢
  4. Quadratic In In & Out 二次方緩進緩出,慢 ? 快 ? 慢
  5. Cubic In 三次方緩慢進入,先慢后快
  6. Cubic Out 三次方緩慢進入,先快后慢
  7. Cubic In & Out 三次方緩慢進入,慢 ? 快 ? 慢
  8. Exponential In 指數緩慢進入,先慢后快
  9. Exponential Out 指數緩慢進入,先快后慢
  10. Exponential In & Out 指數緩慢進入,慢 ? 快 ? 慢
  11. Sinusoidal In 正弦緩慢進入,先慢后快
  12. Sinusoidal Out 正弦緩慢進入,先快后慢
  13. Sinusoidal In & Out 正弦緩慢進入,慢 ? 快 ? 慢

(板栗:曲線長啥樣不太清楚但是可以看一下幾個曲線運動的示例)

曲線 In :慢 ? 快
曲線 Out :快 ? 慢
曲線 In & Out :慢 ? 快 ? 慢

輸出口

Progress 進度
A number that is tweened with an easing curve as it moves toward the Number input.
Typically a progress value. See Animation Basics for more information.
輸出動畫信息,一般會接到Transition模塊的入口。
更多信息,請查看動畫基礎


Related Patches 相關模塊

Pop Animation 彈性動畫Repeating Motion 重復運動Transition 過渡


Related Examples 案例

Moments Onboarding
The original Moments app full onboarding flow.

案例的鏈接暫時還沒有


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容