motion-one

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Motion One Animation Principles

Motion One 动画原则实现

Implement all 12 Disney animation principles using Motion One's performant Web Animations API wrapper.

使用Motion One高性能的Web Animations API封装器，实现迪士尼全部12条动画原则。

1. Squash and Stretch

1. 挤压与拉伸

javascript

import { animate } from "motion";

animate(".ball",
  { scaleX: [1, 1.2, 1], scaleY: [1, 0.8, 1] },
  { duration: 0.3, easing: "ease-in-out" }
);

javascript

import { animate } from "motion";

animate(".ball",
  { scaleX: [1, 1.2, 1], scaleY: [1, 0.8, 1] },
  { duration: 0.3, easing: "ease-in-out" }
);

2. Anticipation

2. 预备动作

javascript

import { timeline } from "motion";

timeline([
  [".character", { y: 10, scaleY: 0.9 }, { duration: 0.2 }],
  [".character", { y: -200 }, { duration: 0.4, easing: "ease-out" }]
]);

javascript

import { timeline } from "motion";

timeline([
  [".character", { y: 10, scaleY: 0.9 }, { duration: 0.2 }],
  [".character", { y: -200 }, { duration: 0.4, easing: "ease-out" }]
]);

3. Staging

3. 构图布局

javascript

animate(".background", { filter: "blur(3px)", opacity: 0.6 });
animate(".hero", { scale: 1.1 });

javascript

animate(".background", { filter: "blur(3px)", opacity: 0.6 });
animate(".hero", { scale: 1.1 });

4. Straight Ahead / Pose to Pose

4. 逐帧动画/关键帧动画

javascript

animate(".element", {
  x: [0, 100, 200, 300],
  y: [0, -50, 0, -30]
}, { duration: 1 });

javascript

animate(".element", {
  x: [0, 100, 200, 300],
  y: [0, -50, 0, -30]
}, { duration: 1 });

5. Follow Through and Overlapping Action

5. 跟随动作与重叠动作

javascript

timeline([
  [".body", { x: 200 }, { duration: 0.5 }],
  [".hair", { x: 200 }, { duration: 0.5, at: "-0.45" }],
  [".cape", { x: 200 }, { duration: 0.6, at: "-0.5" }]
]);

javascript

timeline([
  [".body", { x: 200 }, { duration: 0.5 }],
  [".hair", { x: 200 }, { duration: 0.5, at: "-0.45" }],
  [".cape", { x: 200 }, { duration: 0.6, at: "-0.5" }]
]);

6. Slow In and Slow Out

6. 缓入缓出

javascript

animate(".element", { x: 300 }, {
  duration: 0.6,
  easing: [0.42, 0, 0.58, 1] // cubic-bezier ease-in-out
});
// Or: "ease-in", "ease-out", "ease-in-out"
// Or spring: { easing: spring({ stiffness: 100, damping: 15 }) }

javascript

animate(".element", { x: 300 }, {
  duration: 0.6,
  easing: [0.42, 0, 0.58, 1] // cubic-bezier ease-in-out
});
// Or: "ease-in", "ease-out", "ease-in-out"
// Or spring: { easing: spring({ stiffness: 100, damping: 15 }) }

7. Arc

7. 弧线运动

javascript

animate(".ball", {
  x: [0, 100, 200],
  y: [0, -100, 0]
}, { duration: 1, easing: "ease-in-out" });

// Or with offset path
animate(".element", {
  offsetDistance: ["0%", "100%"]
}, { duration: 1 });
// CSS: offset-path: path('M0,100 Q100,0 200,100');

javascript

animate(".ball", {
  x: [0, 100, 200],
  y: [0, -100, 0]
}, { duration: 1, easing: "ease-in-out" });

// Or with offset path
animate(".element", {
  offsetDistance: ["0%", "100%"]
}, { duration: 1 });
// CSS: offset-path: path('M0,100 Q100,0 200,100');

8. Secondary Action

8. 次要动作

javascript

const button = document.querySelector(".button");
button.addEventListener("mouseenter", () => {
  animate(button, { scale: 1.05 }, { duration: 0.2 });
  animate(".icon", { rotate: 15 }, { duration: 0.15 });
});

javascript

const button = document.querySelector(".button");
button.addEventListener("mouseenter", () => {
  animate(button, { scale: 1.05 }, { duration: 0.2 });
  animate(".icon", { rotate: 15 }, { duration: 0.15 });
});

9. Timing

9. 时间节奏

javascript

import { spring } from "motion";

// Fast snap
animate(".fast", { x: 100 }, { duration: 0.15 });

// Spring physics
animate(".spring", { x: 100 }, {
  easing: spring({ stiffness: 300, damping: 20 })
});

// Slow dramatic
animate(".slow", { x: 100 }, { duration: 0.8, easing: "ease-out" });

javascript

import { spring } from "motion";

// Fast snap
animate(".fast", { x: 100 }, { duration: 0.15 });

// Spring physics
animate(".spring", { x: 100 }, {
  easing: spring({ stiffness: 300, damping: 20 })
});

// Slow dramatic
animate(".slow", { x: 100 }, { duration: 0.8, easing: "ease-out" });

10. Exaggeration

10. 夸张表现

javascript

import { spring } from "motion";

animate(".element", { scale: 1.5, rotate: 720 }, {
  easing: spring({ stiffness: 200, damping: 10 }) // overshoot
});

javascript

import { spring } from "motion";

animate(".element", { scale: 1.5, rotate: 720 }, {
  easing: spring({ stiffness: 200, damping: 10 }) // overshoot
});

11. Solid Drawing

11. 立体造型

javascript

animate(".box", {
  rotateX: 45,
  rotateY: 30
}, { duration: 0.5 });
// Set perspective in CSS: perspective: 1000px;

javascript

animate(".box", {
  rotateX: 45,
  rotateY: 30
}, { duration: 0.5 });
// Set perspective in CSS: perspective: 1000px;

12. Appeal

12. 吸引力

javascript

animate(".card", {
  scale: 1.02,
  boxShadow: "0 20px 40px rgba(0,0,0,0.2)"
}, { duration: 0.3, easing: "ease-out" });

javascript

animate(".card", {
  scale: 1.02,
  boxShadow: "0 20px 40px rgba(0,0,0,0.2)"
}, { duration: 0.3, easing: "ease-out" });

Stagger Animation

交错动画

javascript

import { stagger } from "motion";

animate(".item",
  { opacity: [0, 1], y: [20, 0] },
  { delay: stagger(0.1) }
);

javascript

import { stagger } from "motion";

animate(".item",
  { opacity: [0, 1], y: [20, 0] },
  { delay: stagger(0.1) }
);

Scroll Animations

滚动动画

javascript

import { scroll, animate } from "motion";

scroll(
  animate(".parallax", { y: [0, 100] }),
  { target: document.querySelector(".container") }
);

javascript

import { scroll, animate } from "motion";

scroll(
  animate(".parallax", { y: [0, 100] }),
  { target: document.querySelector(".container") }
);

In-View Animations

视口内动画

javascript

import { inView } from "motion";

inView(".section", ({ target }) => {
  animate(target, { opacity: 1, y: 0 }, { duration: 0.5 });
});

javascript

import { inView } from "motion";

inView(".section", ({ target }) => {
  animate(target, { opacity: 1, y: 0 }, { duration: 0.5 });
});

Key Motion One Features

Motion One 核心特性

```
animate()
```
- Single animation
```
timeline()
```
- Sequence with
```
at
```
positioning
```
stagger()
```
- Offset delays
```
spring()
```
- Physics-based easing
```
scroll()
```
- Scroll-linked animations
```
inView()
```
- Intersection observer wrapper
Uses Web Animations API (hardware accelerated)
Tiny bundle size (~3kb)

```
animate()
```
- 单个动画
```
timeline()
```
- 支持
```
at
```
定位的序列动画
```
stagger()
```
- 延迟偏移
```
spring()
```
- 基于物理的缓动效果
```
scroll()
```
- 滚动关联动画
```
inView()
```
- 交叉观察器封装
基于Web Animations API（硬件加速）
极小的包体积（约3kb）