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