如何创建旋转动画并对其进行动画处理

最新推荐文章于 2024-02-19 08:56:23 发布

culiao9310

最新推荐文章于 2024-02-19 08:56:23 发布

阅读量279

点赞数

文章标签： java python css html css3

原文链接：https://tympanus.net/codrops/2019/04/18/how-to-create-and-animate-rotated-overlays/

版权

View demo 查看演示 Download Source 下载源

Today we’d like to explore a specific reveal effect with you. If you saw the Crossroads Slideshow a while back, you might have noticed the page transition when the content is shown after an image gets clicked. We call this type of transitions a “reveal” animation because some content is already there while an overlay element animates out, revealing what’s underneath.

今天，我们想和您一起探索一种特定的揭示效果。如果您前段时间看到了Crossroads幻灯片，则在单击图像后显示内容时，您可能已经注意到页面转换。我们将这种过渡称为“显示”动画，因为在叠加元素动画化时，其中已经包含了一些内容，从而揭示了下面的内容。

To make such an effect is pretty straightforward: simply place an overlay with the same or different color of the page background and animate it out of the viewport; whatever is under it will show. But there are two challenges here: one is if you’d like the overlay itself to have some content which you want to conceal, i.e. which you want to get cut off while hiding it and not simply move along with the parent when animating it out. The other challenge is to add a rotation and guarantee that the overlay covers the whole screen so that no gaps are shown when you move it out. When combining these two effects, things get really interesting.

要实现这种效果非常简单：只需放置一个具有相同或不同颜色的页面背景的叠加层，并在视口外设置动画效果；它下面的任何内容都会显示出来。但是这里存在两个挑战：一个是您是否希望叠加层本身具有一些要隐藏的内容，即您想在隐藏它的同时将其剪切掉，而不是在对其进行动画处理时仅与父项一起移动。另一个挑战是增加旋转角度，并确保覆盖层覆盖整个屏幕，以便在将其移出时不会显示任何间隙。当将这两种效果结合在一起时，事情就会变得非常有趣。

So let’s tackle these two challenges in this little tip today and show some of the many possibilities for how to use these techniques in a page design.

因此，让我们在今天的这个小技巧中解决这两个挑战，并展示如何在页面设计中使用这些技术的许多可能性。

The demos are kindly sponsored by Northwestern: Earn your MS degree entirely online. If you would like to sponsor one of our demos, find out more here.

该演示由Northwestern赞助：完全在线获得MS学位。 如果您想赞助我们的一个演示，请在此处了解更多信息。

Attention: Highly experimental prototyping, please view in a capable browser. 注意：高度实验性的原型制作，请在功能强大的浏览器中查看。

显露效果 (The reveal effect)

The beauty of the reveal effect is that the technique is very simple, yet the result is so interesting: take any element that has its overflow set to “hidden” and animate it in some direction, while animating its child in the opposite direction. This creates a “cut off” look, the content appears to be steady in one place, as if we’re animating some kind of clipping mask. Yet we are only translating elements.

显示效果的好处在于该技术非常简单，但结果却非常有趣：将溢出设置为“隐藏”的任何元素取为一个方向，并对其动画，同时以相反的方向为其子级设置动画。这将创建“截断”外观，内容似乎在一处稳定，就好像我们正在对某种剪贴蒙版进行动画处理一样。但是我们只是翻译元素。

Under the hood, you can see what’s happening here:

在幕后，您可以看到这里发生了什么：

We simply move a container up. Now, let’s keep the content in place by reversing that movement and translating it in the opposite direction:

我们只是简单地向上移动一个容器。现在，让我们通过反转运动并将其以相反的方向平移来将其保留在适当的位置：

One last step is to add overflow: hidden to the parent:

最后一步是添加溢出：隐藏到父级：

And that’s it! Now, if you want to spice things up a bit, you can add a different duration or easing to the reverse element or other animations to the inner elements.

就是这样！现在，如果您想稍微加点儿趣味，可以为反向元素添加不同的持续时间或缓和，或者向内部元素添加其他动画。

添加旋转 (Adding a rotation)

The effect becomes a little bit more complicated when we want to add a rotation. When we rotate an element it will create gaps and not cover the background entirely anymore. So we need to make sure that it’s width and height is set in such a way that when rotated, there are no gaps.

当我们想添加旋转时，效果会变得更加复杂。当我们旋转一个元素时，它将创建间隙并且不再完全覆盖背景。因此，我们需要确保其宽度和高度设置为在旋转时没有间隙。

Technically, we’re want the (minimum) bounding box of a rotated rectangle.

从技术上讲，我们需要旋转矩形的(最小)边界框。

The following Stackoverflow thread gave us the right formula for our case: How to scale a rotated rectangle to always fit another rectangle

下面的Stackoverflow线程为我们的情况提供了正确的公式：如何缩放旋转的矩形以始终适合另一个矩形

We only need to find the correct width and height, so the following bit is interesting to us:

我们只需要找到正确的宽度和高度，因此以下内容对我们很有趣：

“When you rotate an axis-aligned rectangle of width w and height h by an angle ɸ, the width and height of the rotated rectangle’s axis-aligned bounding box are: W = w·|cos ɸ| + h·|sin ɸ| H = w·|sin ɸ| + h·|cos ɸ|

“当将宽度w和高度h的轴对齐矩形旋转角度ɸ时，旋转后的矩形的轴对齐边界框的宽度和高度为： W = w·| cosɸ|。 + h·| sinɸ| H = w·| sinɸ| + h·| cosɸ|

(The notation |x| denotes an absolute value.)”

(符号| x |表示绝对值。) ”

Additionally, we have to make sure that we keep the previous structure in place and that we show the content straight. So we need to rotate the content back. To ease our animation and not tinker with calculations we avoid moving the rotated content, but instead we’ll use the resized container for the motion.

另外，我们必须确保将先前的结构保持在原位，并确保内容直接显示。因此，我们需要将内容旋转回去。为了简化我们的动画而不简化计算，我们避免移动旋转后的内容，而是使用调整大小的容器进行运动。

In total we will use three containers to achieve all that:

总共我们将使用三个容器来实现所有这些目标：

<div class="content content--first"><!-- only rotated -->	
	<div class="content__move"><!-- resized and moved -->
		<div class="content__reverse"><!-- reverse rotation -->
			<!-- ... -->
		</div>
	</div>
</div>

If you look at the x-ray view of one of the demos, you can see the rotation and calculation of the new width and height:

如果查看其中一个演示的X射线视图，则可以看到新宽度和高度的旋转和计算：