Popmotion

dylantarre/animation-principles/skills/09-by-tool-framework/popmotion

作者 dylantarre83597134ba8f無授權條款99 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫9 個月前更新

Use when implementing Disney's 12 animation principles with Popmotion's functional animation library

僅含說明Design & CreativeSoftware Development
AI 產生的概覽

用 Popmotion 的函式式動畫函式實作迪士尼十二項動畫原則。

功能
這個技能提供程式碼範例，用 Popmotion JavaScript 動畫函式庫表達迪士尼十二項動畫原則。內容涵蓋擠壓與伸展、預備動作、場面調度、逐格與關鍵影格、跟隨與重疊動作、緩入緩出、弧線、次要動作、時間節奏、誇張、立體感和吸引力。每項原則都附有使用 animate()、spring() 或 keyframes() 的簡短程式碼片段，並列出緩動函式與可組合工具等 Popmotion 核心功能。
適用情境
適用於使用 Popmotion 製作網頁動畫，並希望把經典動畫原則套用到動態設計的情境。適合需要緩動、彈簧、關鍵影格或重疊動作具體程式碼片段的開發者。
執行需求
目標專案需安裝 Popmotion JavaScript 函式庫；不包含指令碼、憑證或網路存取。

Popmotion Animation Principles

Implement all 12 Disney animation principles using Popmotion's composable animation functions.

1. Squash and Stretch

javascript
import { animate } from "popmotion";
animate({  from: { scaleX: 1, scaleY: 1 },  to: { scaleX: 1.2, scaleY: 0.8 },  duration: 150,  onUpdate: ({ scaleX, scaleY }) => {    element.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;  }});

2. Anticipation

javascript
// Wind up then actionanimate({  from: 0,  to: 10,  duration: 200,  onUpdate: v => element.style.transform = `translateY(${v}px) scaleY(0.9)`,  onComplete: () => {    animate({      from: 10,      to: -200,      duration: 400,      ease: easeOut,      onUpdate: v => element.style.transform = `translateY(${v}px)`    });  }});

3. Staging

javascript
animate({  from: 1,  to: 0.6,  onUpdate: v => bg.style.opacity = v});animate({  from: 1,  to: 1.1,  onUpdate: v => hero.style.transform = `scale(${v})`});

4. Straight Ahead / Pose to Pose

javascript
import { keyframes } from "popmotion";
keyframes({  values: [    { x: 0, y: 0 },    { x: 100, y: -50 },    { x: 200, y: 0 },    { x: 300, y: -30 }  ],  duration: 1000,  onUpdate: ({ x, y }) => {    element.style.transform = `translate(${x}px, ${y}px)`;  }});

5. Follow Through and Overlapping Action

javascript
animate({ from: 0, to: 200, duration: 500,  onUpdate: v => body.style.transform = `translateX(${v}px)` });
animate({ from: 0, to: 200, duration: 500, elapsed: -50, // delay  onUpdate: v => hair.style.transform = `translateX(${v}px)` });
animate({ from: 0, to: 200, duration: 600, elapsed: -100,  onUpdate: v => cape.style.transform = `translateX(${v}px)` });

6. Slow In and Slow Out

javascript
import { animate, easeInOut, easeIn, easeOut } from "popmotion";
animate({  from: 0,  to: 300,  duration: 600,  ease: easeInOut,  onUpdate: v => element.style.transform = `translateX(${v}px)`});

7. Arc

javascript
keyframes({  values: [    { x: 0, y: 0 },    { x: 100, y: -100 },    { x: 200, y: 0 }  ],  duration: 1000,  ease: easeInOut,  onUpdate: ({ x, y }) => {    element.style.transform = `translate(${x}px, ${y}px)`;  }});

8. Secondary Action

javascript
// Primary action triggers secondaryanimate({  from: 1, to: 1.1, duration: 200,  onUpdate: v => button.style.transform = `scale(${v})`,  onComplete: () => {    animate({      from: 0, to: 15, duration: 150,      onUpdate: v => icon.style.transform = `rotate(${v}deg)`    });  }});

9. Timing

javascript
import { spring } from "popmotion";
// Fastanimate({ from: 0, to: 100, duration: 150 });
// Spring physicsspring({  from: 0,  to: 100,  stiffness: 300,  damping: 20,  onUpdate: v => element.style.transform = `translateX(${v}px)`});
// Slowanimate({ from: 0, to: 100, duration: 800, ease: easeOut });

10. Exaggeration

javascript
spring({  from: { scale: 1, rotate: 0 },  to: { scale: 1.5, rotate: 720 },  stiffness: 200,  damping: 10, // low = overshoot  onUpdate: ({ scale, rotate }) => {    element.style.transform = `scale(${scale}) rotate(${rotate}deg)`;  }});

11. Solid Drawing

javascript
animate({  from: { rotateX: 0, rotateY: 0 },  to: { rotateX: 45, rotateY: 30 },  duration: 500,  onUpdate: ({ rotateX, rotateY }) => {    box.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;  }});

12. Appeal

javascript
animate({  from: 1,  to: 1.02,  duration: 300,  ease: easeOut,  onUpdate: v => {    card.style.transform = `scale(${v})`;    card.style.boxShadow = `0 ${20*v}px 40px rgba(0,0,0,${0.2*v})`;  }});

Key Popmotion Features

  • animate() - Tween animations
  • spring() - Physics-based spring
  • keyframes() - Multi-step animations
  • decay() - Momentum/inertia
  • easeIn, easeOut, easeInOut - Easing functions
  • Composable functions - mix and pipe
  • Framework agnostic
  • Powers Framer Motion under the hood

來源與署名

來源：dylantarre/animation-principles位於skills/09-by-tool-framework/popmotion提交8359713

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 dylantarre/animation-principles 的技能

Lottie Bodymovin

dylantarre

指導在由 After Effects 匯出的 Lottie 向量動畫中實作迪士尼十二項動畫原則。

Design & Creative999 個月前更新

Framer Motion

dylantarre

在 React 中以 Framer Motion 實作迪士尼十二項動畫原則的參考指南。

Software Development999 個月前更新

Rive Animations

dylantarre

指導如何在 Rive 互動動畫中透過狀態機與執行階段程式碼實作迪士尼十二項動畫原則。

Design & Creative999 個月前更新

Timing Principle Mastery

dylantarre

指導選擇動畫時長與節奏，讓動作傳達重量感、情緒與韻律。

Design & Creative999 個月前更新

Ux Friction

dylantarre

診斷會讓使用者困惑、延誤任務或感到挫折的介面動畫，並提出修正建議。

Design & Creative999 個月前更新

User Feedback Clarity

dylantarre

運用迪士尼動畫原則診斷並修正不清楚的介面回饋，附 CSS 樣式與檢查清單。

Design & Creative999 個月前更新

更多Design & Creative技能

Theme Factory

anthropics

精選

提供 10 套預設配色與字型主題，並可即時產生新主題，為簡報、文件、報告與 HTML 頁面統一風格。

Design & Creative180K今天更新

Slack Gif Creator

anthropics

精選

為 Slack 製作尺寸與檔案大小經過最佳化的動畫 GIF，並提供 PIL 繪圖輔助、緩動函式與驗證工具。

包含腳本
Design & Creative180K今天更新

Frontend Design

anthropics

精選

在建立或改造使用者介面時，提供打造獨特、有意識視覺設計的指引。

Design & Creative180K今天更新

Canvas Design

anthropics

精選

依照寫好的設計理念創作原創視覺藝術，輸出 PNG 或 PDF，適合海報、藝術作品等靜態成品。

Design & Creative180K今天更新

Brand Guidelines

anthropics

精選

將 Anthropic 官方品牌配色與字體套用到需要呈現 Anthropic 外觀風格的各類成品上。

Design & Creative180K今天更新

Frontend Design

anthropics

精選

指導代理為新介面或改版介面進行獨特、有意的視覺設計。

Design & Creative149K今天更新