Figma如何将弹跳力融入弹簧动画中

We know how important animation is to bringing digital products to life. Animations can make scrolling from one item to the next in a list easy and intuitive, while liking something with a heart can feel playful and fun. In FigJam, animated emotes and high-fives are a core part of the magic of being in the file together, and we wanted to help our users build similar experiences. That’s why we recently launched spring animations, which allow you to design more fluid transition animations when prototyping.

我们知道动画对于让数字产品变得生动有多重要。动画可以使在列表中从一个项目滚动到下一个项目变得简单而直观，而用心喜欢的东西则会让人觉得好玩和有趣。在FigJam中，动画表情和击掌是一起在文件中的魔法的核心部分，我们想帮助我们的用户建立类似的体验。这就是为什么我们最近推出了弹簧动画，它允许你在原型设计时设计出更流畅的过渡动画。

Building spring animations took our engineering team back to the classroom—to make animations that are both natural and accurate, we borrowed principles from physics. We’re excited to share the mechanics behind the movement, and the story of how spring animations bounced their way into Figma.

构建弹簧动画使我们的工程团队回到了课堂--为了使动画既自然又准确，我们借用了物理学的原理。我们很高兴能与大家分享运动背后的力学原理，以及弹簧动画如何在Figma中弹出的故事。

Spring animations make designs behave more naturally because they adhere to the laws of physics

弹簧动画使设计的行为更自然，因为它们遵循物理定律

What are spring animations?

什么是弹簧动画？

Until we launched spring animations, bezier animations were the primary way to create animations in Figma. Bezier animations allow you to specify how an object should start moving, and how it should stop. As flexible as they are, bezier animations can still be a little tricky to work with, and if you’re not careful when adjusting bezier curves, you can quickly end up with chaotic animations where objects gain speed out of thin air, change directions unnaturally, or come to a stop.

在我们推出弹簧动画之前，贝塞尔动画是在 Figma 中创建动画的主要方式。贝塞尔动画允许您指定一个物体应该如何开始移动，以及应该如何停止。尽管很灵活，但贝塞尔动画在操作上还是有点棘手，如果您在调整贝塞尔曲线时不小心，很快就会出现混乱的动画，对象会凭空获得速度，不自然地改变方向，或者停下来。

Spring animations work a bit differently. Instead of defining how an object moves, you specify what the physical properties of the movement are and let the laws of physics come up with the actual path. (Th...