Motion One

dylantarre/animation-principles/skills/09-by-tool-framework/motion-one

作者 dylantarre83597134ba8f无许可证99 个星标收录于 2026年10月8日更新于 2026年10月8日仓库9个月前更新

Use when implementing Disney's 12 animation principles with Motion One (modern, lightweight animation library)

仅含说明Design & Creative Software Development

AI 生成的概览

指导使用 Motion One 动画库实现迪士尼十二项动画原则。

功能: 该技能提供代码示例，用 Motion One（轻量的 Web Animations API 封装库）逐条实现迪士尼十二项动画原则。内容涵盖挤压与拉伸、预备动作、舞台布局、时间节奏、弧线、夸张等原则，以及错开、滚动和进入视口动画。每项原则都配有使用 animate、timeline、spring、stagger、scroll 和 inView 等函数的 JavaScript 代码片段。
适用场景: 适用于使用 Motion One 制作网页动画，并希望将经典动画原则应用到动效中的场景。适合需要具体实现示例来处理时间、缓动、序列编排或滚动联动效果的前端工作。
运行要求: 需要在 JavaScript 或网页项目中安装 Motion One 包（以 "motion" 导入）。不附带脚本，仅为说明和代码示例。

Motion One Animation Principles

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

1. Squash and Stretch

javascript

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

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

javascript

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

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

javascript

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

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

4. Straight Ahead / Pose to Pose

5. Follow Through and Overlapping Action

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" }]]);

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

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 }) }

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

javascript

animate(".ball", {  x: [0, 100, 200],  y: [0, -100, 0]}, { duration: 1, easing: "ease-in-out" });
// Or with offset pathanimate(".element", {  offsetDistance: ["0%", "100%"]}, { duration: 1 });// CSS: offset-path: path('M0,100 Q100,0 200,100');

animate(".ball", {  x: [0, 100, 200],  y: [0, -100, 0]}, { duration: 1, easing: "ease-in-out" });
// Or with offset pathanimate(".element", {  offsetDistance: ["0%", "100%"]}, { duration: 1 });// CSS: offset-path: path('M0,100 Q100,0 200,100');

8. Secondary Action

javascript

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

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

javascript

import { spring } from "motion";
// Fast snapanimate(".fast", { x: 100 }, { duration: 0.15 });
// Spring physicsanimate(".spring", { x: 100 }, {  easing: spring({ stiffness: 300, damping: 20 })});
// Slow dramaticanimate(".slow", { x: 100 }, { duration: 0.8, easing: "ease-out" });

import { spring } from "motion";
// Fast snapanimate(".fast", { x: 100 }, { duration: 0.15 });
// Spring physicsanimate(".spring", { x: 100 }, {  easing: spring({ stiffness: 300, damping: 20 })});
// Slow dramaticanimate(".slow", { x: 100 }, { duration: 0.8, easing: "ease-out" });

10. Exaggeration

javascript

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

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

11. Solid Drawing

javascript

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

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

12. Appeal

javascript

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

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) });

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") });

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 });});

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

Key Motion One Features

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)

来源与署名

来源：dylantarre/animation-principles位于skills/09-by-tool-framework/motion-one提交8359713

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Motion One

Motion One 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

Scroll Animations

In-View Animations

Key Motion One Features

来源与署名

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

Lottie Bodymovin

Framer Motion

Rive Animations

Timing Principle Mastery

Ux Friction

User Feedback Clarity

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design