Anime Js

dylantarre/animation-principles/skills/09-by-tool-framework/anime-js

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

Use when implementing Disney's 12 animation principles with Anime.js library

僅含說明Design & Creative Software Development

AI 產生的概覽

使用 Anime.js 函式庫實作迪士尼十二項動畫原則的參考指南。

功能: 這項技能提供程式碼範例，說明如何用 Anime.js 呈現迪士尼的十二項動畫原則。內容涵蓋擠壓與伸展、預備動作、構圖安排、關鍵影格姿勢、跟隨與重疊動作、緩動、弧線、次要動作、時間節奏、誇張、立體感和吸引力。同時說明 Anime.js 的相關功能，例如時間軸、交錯延遲、SVG 運動路徑，以及彈簧與彈性緩動。
適用情境: 適合使用 Anime.js 製作網頁動畫，並希望套用經典動畫原則的情況。適用於重視動畫元素時間、緩動與順序的前端工作。
執行需求: 目標專案需要引入 Anime.js JavaScript 函式庫。這項技能不含指令碼或資源，僅為說明性參考。

Anime.js Animation Principles

Implement all 12 Disney animation principles using Anime.js's flexible animation engine.

1. Squash and Stretch

javascript

anime({  targets: '.ball',  scaleX: [1, 1.2, 1],  scaleY: [1, 0.8, 1],  duration: 300,  easing: 'easeInOutQuad'});

anime({  targets: '.ball',  scaleX: [1, 1.2, 1],  scaleY: [1, 0.8, 1],  duration: 300,  easing: 'easeInOutQuad'});

2. Anticipation

javascript

anime.timeline()  .add({    targets: '.character',    translateY: 10,    scaleY: 0.9,    duration: 200  })  .add({    targets: '.character',    translateY: -200,    duration: 400,    easing: 'easeOutQuad'  });

anime.timeline()  .add({    targets: '.character',    translateY: 10,    scaleY: 0.9,    duration: 200  })  .add({    targets: '.character',    translateY: -200,    duration: 400,    easing: 'easeOutQuad'  });

3. Staging

javascript

anime({  targets: '.background',  filter: 'blur(3px)',  opacity: 0.6,  duration: 500});anime({  targets: '.hero',  scale: 1.1,  duration: 500});

anime({  targets: '.background',  filter: 'blur(3px)',  opacity: 0.6,  duration: 500});anime({  targets: '.hero',  scale: 1.1,  duration: 500});

4. Straight Ahead / Pose to Pose

javascript

anime({  targets: '.element',  keyframes: [    { translateX: 0, translateY: 0 },    { translateX: 100, translateY: -50 },    { translateX: 200, translateY: 0 },    { translateX: 300, translateY: -30 }  ],  duration: 1000});

anime({  targets: '.element',  keyframes: [    { translateX: 0, translateY: 0 },    { translateX: 100, translateY: -50 },    { translateX: 200, translateY: 0 },    { translateX: 300, translateY: -30 }  ],  duration: 1000});

5. Follow Through and Overlapping Action

javascript

anime.timeline()  .add({ targets: '.body', translateX: 200, duration: 500 })  .add({ targets: '.hair', translateX: 200, duration: 500 }, '-=450')  .add({ targets: '.cape', translateX: 200, duration: 600 }, '-=500');

anime.timeline()  .add({ targets: '.body', translateX: 200, duration: 500 })  .add({ targets: '.hair', translateX: 200, duration: 500 }, '-=450')  .add({ targets: '.cape', translateX: 200, duration: 600 }, '-=500');

6. Slow In and Slow Out

javascript

anime({  targets: '.element',  translateX: 300,  duration: 600,  easing: 'easeInOutCubic'});// Options: easeInQuad, easeOutQuad, easeInOutQuad// easeInCubic, easeOutCubic, easeInOutCubic// spring(mass, stiffness, damping, velocity)

anime({  targets: '.element',  translateX: 300,  duration: 600,  easing: 'easeInOutCubic'});// Options: easeInQuad, easeOutQuad, easeInOutQuad// easeInCubic, easeOutCubic, easeInOutCubic// spring(mass, stiffness, damping, velocity)

7. Arc

javascript

anime({  targets: '.ball',  translateX: 200,  translateY: [    { value: -100, duration: 500 },    { value: 0, duration: 500 }  ],  easing: 'easeOutQuad',  duration: 1000});
// Or use SVG pathanime({  targets: '.element',  translateX: anime.path('.motion-path')('x'),  translateY: anime.path('.motion-path')('y'),  duration: 1000});

anime({  targets: '.ball',  translateX: 200,  translateY: [    { value: -100, duration: 500 },    { value: 0, duration: 500 }  ],  easing: 'easeOutQuad',  duration: 1000});
// Or use SVG pathanime({  targets: '.element',  translateX: anime.path('.motion-path')('x'),  translateY: anime.path('.motion-path')('y'),  duration: 1000});

8. Secondary Action

javascript

const tl = anime.timeline();tl.add({  targets: '.button',  scale: 1.1,  duration: 200}).add({  targets: '.icon',  rotate: 15,  duration: 150}, '-=150').add({  targets: '.particles',  opacity: [0, 1],  delay: anime.stagger(50)}, '-=100');

const tl = anime.timeline();tl.add({  targets: '.button',  scale: 1.1,  duration: 200}).add({  targets: '.icon',  rotate: 15,  duration: 150}, '-=150').add({  targets: '.particles',  opacity: [0, 1],  delay: anime.stagger(50)}, '-=100');

9. Timing

javascript

// Fast - snappyanime({ targets: '.fast', translateX: 100, duration: 150 });
// Normalanime({ targets: '.normal', translateX: 100, duration: 300 });
// Slow - dramaticanime({ targets: '.slow', translateX: 100, duration: 600 });
// Spring physicsanime({ targets: '.spring', translateX: 100, easing: 'spring(1, 80, 10, 0)' });

// Fast - snappyanime({ targets: '.fast', translateX: 100, duration: 150 });
// Normalanime({ targets: '.normal', translateX: 100, duration: 300 });
// Slow - dramaticanime({ targets: '.slow', translateX: 100, duration: 600 });
// Spring physicsanime({ targets: '.spring', translateX: 100, easing: 'spring(1, 80, 10, 0)' });

10. Exaggeration

javascript

anime({  targets: '.element',  scale: 1.5,  rotate: '2turn',  duration: 800,  easing: 'easeOutElastic(1, 0.5)' // overshoot});

anime({  targets: '.element',  scale: 1.5,  rotate: '2turn',  duration: 800,  easing: 'easeOutElastic(1, 0.5)' // overshoot});

11. Solid Drawing

12. Appeal

javascript

anime({  targets: '.card',  scale: 1.02,  boxShadow: '0 20px 40px rgba(0,0,0,0.2)',  duration: 300,  easing: 'easeOutQuad'});

anime({  targets: '.card',  scale: 1.02,  boxShadow: '0 20px 40px rgba(0,0,0,0.2)',  duration: 300,  easing: 'easeOutQuad'});

Stagger Animation

javascript

anime({  targets: '.item',  translateY: [20, 0],  opacity: [0, 1],  delay: anime.stagger(100), // 100ms between each  easing: 'easeOutQuad'});

anime({  targets: '.item',  translateY: [20, 0],  opacity: [0, 1],  delay: anime.stagger(100), // 100ms between each  easing: 'easeOutQuad'});

Key Anime.js Features

anime.timeline() - Sequence animations
keyframes - Multiple poses
anime.stagger() - Offset delays
anime.path() - SVG motion paths
Built-in easings + spring() + elastic()
'-=200' - Relative offset timing
anime.set() - Instant property set

來源與署名

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

授權條款：無授權條款

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

檢舉或申請下架

Anime Js

Anime.js Animation Principles

1. Squash and Stretch

2. Anticipation

3. Staging

4. Straight Ahead / Pose to Pose

5. Follow Through and Overlapping Action

6. Slow In and Slow Out

7. Arc

8. Secondary Action

9. Timing

10. Exaggeration

11. Solid Drawing

12. Appeal

Stagger Animation

Key Anime.js Features

來源與署名

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

Rive Animations

Timing Principle Mastery

Ux Friction

User Feedback Clarity

Straight Ahead Pose Mastery

Universal Solutions

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design