动画十二原则

Due to the nature of some of these examples, for the best viewing experience, please view this page on a desktop device.

由于部分示例的性质，为了获得最佳观看体验，请在桌面设备上查看此页面。

Animation on the web has come a long way from simple transitions and hover effects. Motion is more than flair; it is communication, guiding users, reassuring them, and delighting them while transforming routine workflows into memorable experiences.

Web上的动画早已超越了简单的过渡和悬停效果。运动不仅仅是炫技；它是一种沟通方式，在引导用户、给予用户安心感并带来愉悦的同时，将日常工作流转化为令人难忘的体验。

But not all animation is created equal. The difference between good and great often comes down to intention. Great animation is purposeful, subtle, and rooted in the principles that have guided designers for decades.

但并非所有动画都生而平等。优秀与卓越之间的区别往往取决于意图。出色的动画是有目的的、微妙的，并且植根于几十年来指导设计师的原则之中。

The Principles of Animation

动画原则

The 12 Principles of Animation provide a framework for creating more engaging and lifelike animations. Developed by Disney animators in the 1930s, they emphasize the importance of understanding the underlying mechanics of movement and how to apply them effectively.[^1]

动画的12项基本原则为创建更具吸引力和逼真的动画提供了框架。这些原则由Disney动画师在20世纪30年代开发，强调了理解运动底层机制以及如何有效应用它们的重要性。[^1]

Understanding these principles can help you create animations that feel more natural and intuitive in your software.

理解这些原则可以帮助你在软件中创造出感觉更自然、更直观的动画。

Squash and Stretch

挤压与拉伸

Everything has it's own mass, and the way it moves and deforms is crucial to conveying its weight and personality. If you are trying to create a sense of realism in your animations, consider how objects squash and stretch in the real world.

万物皆有其质量，其运动和变形的方式对于传达其重量和个性至关重要。如果你试图在动画中创造真实感，请考虑物体在现实世界中是如何挤压与拉伸的。

You can use this concept to create objects that seem malleable and responsive to their environment.

你可以使用这个概念来创建看起来具有可塑性且能对环境做出响应的物体。

_{Family's Wallet Icon Picker²}

In this example, the wallet icon appears to squash and stretch on change. It's almost like it's morphing into a different shape. A simple but effective use of this principle.

在这个例子中，钱包图标在变化时似乎出现了挤压与拉伸。这几乎就像它正在变形为另一种形状...