Popmotion

dylantarre/animation-principles/skills/09-by-tool-framework/popmotion

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

Use when implementing Disney's 12 animation principles with Popmotion's functional animation library

仅含说明Design & CreativeSoftware Development
AI 生成的概览

用 Popmotion 的函数式动画函数实现迪士尼十二动画原则。

功能
该技能提供代码示例，用 Popmotion JavaScript 动画库表达迪士尼十二动画原则。内容涵盖挤压与拉伸、预备动作、舞台调度、逐帧与关键帧、跟随与重叠动作、缓入缓出、弧线、次要动作、时间节奏、夸张、立体感和吸引力。每条原则都配有使用 animate()、spring() 或 keyframes() 的简短代码片段，并列出缓动函数与可组合工具等 Popmotion 核心特性。
适用场景
适用于使用 Popmotion 构建网页动画并希望把经典动画原则应用到动效设计中的场景。适合需要缓动、弹簧、关键帧或重叠动作具体代码片段的开发者。
运行要求
目标项目需安装 Popmotion JavaScript 库；不包含脚本、凭据或网络访问。

Popmotion Animation Principles

Implement all 12 Disney animation principles using Popmotion's composable animation functions.

1. Squash and Stretch

javascript
import { animate } from "popmotion";
animate({  from: { scaleX: 1, scaleY: 1 },  to: { scaleX: 1.2, scaleY: 0.8 },  duration: 150,  onUpdate: ({ scaleX, scaleY }) => {    element.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;  }});

2. Anticipation

javascript
// Wind up then actionanimate({  from: 0,  to: 10,  duration: 200,  onUpdate: v => element.style.transform = `translateY(${v}px) scaleY(0.9)`,  onComplete: () => {    animate({      from: 10,      to: -200,      duration: 400,      ease: easeOut,      onUpdate: v => element.style.transform = `translateY(${v}px)`    });  }});

3. Staging

javascript
animate({  from: 1,  to: 0.6,  onUpdate: v => bg.style.opacity = v});animate({  from: 1,  to: 1.1,  onUpdate: v => hero.style.transform = `scale(${v})`});

4. Straight Ahead / Pose to Pose

javascript
import { keyframes } from "popmotion";
keyframes({  values: [    { x: 0, y: 0 },    { x: 100, y: -50 },    { x: 200, y: 0 },    { x: 300, y: -30 }  ],  duration: 1000,  onUpdate: ({ x, y }) => {    element.style.transform = `translate(${x}px, ${y}px)`;  }});

5. Follow Through and Overlapping Action

javascript
animate({ from: 0, to: 200, duration: 500,  onUpdate: v => body.style.transform = `translateX(${v}px)` });
animate({ from: 0, to: 200, duration: 500, elapsed: -50, // delay  onUpdate: v => hair.style.transform = `translateX(${v}px)` });
animate({ from: 0, to: 200, duration: 600, elapsed: -100,  onUpdate: v => cape.style.transform = `translateX(${v}px)` });

6. Slow In and Slow Out

javascript
import { animate, easeInOut, easeIn, easeOut } from "popmotion";
animate({  from: 0,  to: 300,  duration: 600,  ease: easeInOut,  onUpdate: v => element.style.transform = `translateX(${v}px)`});

7. Arc

javascript
keyframes({  values: [    { x: 0, y: 0 },    { x: 100, y: -100 },    { x: 200, y: 0 }  ],  duration: 1000,  ease: easeInOut,  onUpdate: ({ x, y }) => {    element.style.transform = `translate(${x}px, ${y}px)`;  }});

8. Secondary Action

javascript
// Primary action triggers secondaryanimate({  from: 1, to: 1.1, duration: 200,  onUpdate: v => button.style.transform = `scale(${v})`,  onComplete: () => {    animate({      from: 0, to: 15, duration: 150,      onUpdate: v => icon.style.transform = `rotate(${v}deg)`    });  }});

9. Timing

javascript
import { spring } from "popmotion";
// Fastanimate({ from: 0, to: 100, duration: 150 });
// Spring physicsspring({  from: 0,  to: 100,  stiffness: 300,  damping: 20,  onUpdate: v => element.style.transform = `translateX(${v}px)`});
// Slowanimate({ from: 0, to: 100, duration: 800, ease: easeOut });

10. Exaggeration

javascript
spring({  from: { scale: 1, rotate: 0 },  to: { scale: 1.5, rotate: 720 },  stiffness: 200,  damping: 10, // low = overshoot  onUpdate: ({ scale, rotate }) => {    element.style.transform = `scale(${scale}) rotate(${rotate}deg)`;  }});

11. Solid Drawing

javascript
animate({  from: { rotateX: 0, rotateY: 0 },  to: { rotateX: 45, rotateY: 30 },  duration: 500,  onUpdate: ({ rotateX, rotateY }) => {    box.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;  }});

12. Appeal

javascript
animate({  from: 1,  to: 1.02,  duration: 300,  ease: easeOut,  onUpdate: v => {    card.style.transform = `scale(${v})`;    card.style.boxShadow = `0 ${20*v}px 40px rgba(0,0,0,${0.2*v})`;  }});

Key Popmotion Features

  • animate() - Tween animations
  • spring() - Physics-based spring
  • keyframes() - Multi-step animations
  • decay() - Momentum/inertia
  • easeIn, easeOut, easeInOut - Easing functions
  • Composable functions - mix and pipe
  • Framework agnostic
  • Powers Framer Motion under the hood

来源与署名

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

许可证： 无许可证

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

举报或申请下架

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

Rive Animations

dylantarre

指导如何在 Rive 交互动画中通过状态机和运行时代码实现迪士尼十二动画原则。

Design & Creative999个月前更新

Timing Principle Mastery

dylantarre

指导选择动画时长与节奏，使动作传达重量感、情绪与韵律。

Design & Creative999个月前更新

Ux Friction

dylantarre

诊断会令用户困惑、延误任务或产生挫败感的界面动画，并给出修复建议。

Design & Creative999个月前更新

User Feedback Clarity

dylantarre

运用迪士尼动画原则诊断并修复不清晰的界面反馈，附 CSS 模式与检查清单。

Design & Creative999个月前更新

Straight Ahead Pose Mastery

dylantarre

指导动画师在顺画法与摆姿势法工作流之间做选择，并介绍混合方法。

Design & Creative999个月前更新

Universal Solutions

dylantarre

用迪士尼十二项动画原则诊断动画问题，提供检查项、修复建议和排查清单。

Design & Creative999个月前更新

更多Design & Creative技能

Theme Factory

anthropics

精选

提供 10 套预设配色与字体主题，并可即时生成新主题，用于为幻灯片、文档、报告和 HTML 页面统一风格。

Design & Creative180K今天更新

Slack Gif Creator

anthropics

精选

为 Slack 创建尺寸与体积经过优化的动画 GIF，提供 PIL 绘图辅助、缓动函数与校验工具。

包含脚本
Design & Creative180K今天更新

Frontend Design

anthropics

精选

在构建或改造用户界面时，提供打造独特、有意图的视觉设计的指导。

Design & Creative180K今天更新

Canvas Design

anthropics

精选

依据写好的设计理念创作原创视觉艺术，输出 PNG 或 PDF，适用于海报、艺术作品等静态成品。

Design & Creative180K今天更新

Brand Guidelines

anthropics

精选

将 Anthropic 官方品牌配色与字体应用到需要体现 Anthropic 外观风格的各类产物上。

Design & Creative180K今天更新

Frontend Design

anthropics

精选

指导智能体为新界面或改版界面进行独特、有意图的视觉设计。

Design & Creative149K今天更新