挤压与拉伸

Introduction

介绍

Have you ever heard of Disney’s 12 Basic Principles of Animation(opens in new tab)?

你听说过Disney’s 12 Basic Principles of Animation（在新标签页中打开）吗？

It’s a collection of animation best practices created in 1981 by two Disney animators, intended to be used by the folks who produce animated cartoon movies like Aladdin or Beauty And The Beast.

这是 1981 年两位 Disney 动画师创建的动画最佳实践集合，旨在供制作像 Aladdin 或 Beauty And The Beast 这样的动画卡通电影的人使用。

Not all of the rules are relevant to us, as web developers, but some of them are incredibly useful. In this blog post, I want to share my favourite rule, and show some of the ways I use it in my projects!

并非所有规则都与我们这些网页开发者相关，但其中一些极其有用。在这篇博客文章中，我想分享我最喜欢的规则，并展示我在项目中使用它的几种方式！

It’s the very first rule, “squash and stretch”. Let’s start with the most common example, a bouncing ball. Check out what happens as you drag the slider:

这是第一条规则，“压缩与拉伸”。让我们从最常见的例子开始，一个弹跳球。拖动滑块查看会发生什么：

As you increase the “Squash/Stretch Amount”, the ball starts to flatten like a water balloon when it hits the ground, threatening to burst. As it bounces back up, it elongates, becoming long and skinny.

当你增加“Squash/Stretch Amount”时，球在撞击地面时开始像水气球一样变扁，似乎要爆裂。当它反弹上升时，它会拉长，变得细长。

This bouncing ball demo is useful in showcasing the general idea: there’s something visually pleasant about an object getting squashed or stretched during motion. In practice, I find myself using this trick a lot more on SVG icons than with bouncing balls, so that’s what we’ll focus on in this tutorial (though I’ll include a full playground for the bouncing ball at the end, for anyone curious!).

这个弹跳球演示在展示总体想法方面很有用：物体在运动过程中被压扁或拉伸具有某种视觉上的愉悦感。在实践中，我发现自己比起弹跳球，更频繁地将这个技巧用在 SVG 图标上，这就是我们将在本教程中重点关注的（尽管在结尾，我会为任何好奇的人提供一个完整的弹跳球 playground！）。

Stretchy arrows

拉伸箭头

On this blog, I have lots of little SVG icons that have subtle micro-interactions. For example, on the homepage, I have little arrows that stretch on hover:

在这个博客上，我有很多带有细微微交互的小 SVG 图标。例如，在主页上，我有一些悬停时会伸展的小箭头：

The arrows aren’t just getting longer; to really sell the effect, the tips of the arrow get pull...