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 的技能

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