javascript - CSS3 补间和矩阵

Question

我在 CSS 中组合了一些关键帧动画，这些动画将 div 从屏幕的一侧移动到另一侧，并沿途应用轻微的旋转。我发现关键帧方法具有限制性，因为我希望能够在一个大序列中包含许多变化。例如，变化不仅可以是从左到右、从右到左，还可以是从上到下等等。为了增加问题的复杂性，我需要能够打乱此序列并保持每个动画之间的连续性。

序列本身应该能够以任何顺序运行并重置。

例如，如果我想以 100px 为单位移动 div:

left (100px), up (100px), left (100px) and then down(100px)

下次我可能希望序列如下(同样是 100px):

left, down, right, up

我的想法是，通过使用 JavaScript 来动态编写动画(也许使用 CSS3 矩阵之类的东西)可以更好地实现这一点。到目前为止，我已经弄清楚了像左和右这样的简单东西，但我不知道如何添加旋转。这似乎是一个非常好的起点:

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

也一直在看这个:

http://tweenjs.com/

我的想法是，a)我采用 CSS 矩阵方法是否使事情变得过于复杂？有没有更简单的东西？ b) 如何使用 CSS 矩阵或任何其他方法同时实现旋转和移动？

感谢任何帮助!

Answer 1

如果你想制作动态动画，那么你应该使用 JavaScript 来制作动画。

至于如何将平移与旋转结合起来，答案就在 useragentman 帖子中(顺便说一句，这是对 CSS 矩阵的很好的介绍。)

取您想要实现的旋转 Angular (以弧度为单位)并创建以下矩阵:

Cos(angle), -Sin(angle), 0
Sin(angle), Cos(angle), 0
0,            0,        1

然后为您的(大概是 2D)x 和 y 运动创建以下矩阵。

0,0,X
0,0,Y
0,0,1

然后将它们相乘(或采用矩阵术语中的点积)。这是一个方便的matrix multiplier对于您来说，如何创建点积的详细信息也在同一篇文章中。

请注意，这些是变换(不是位置更改)，并且变换不会影响页面位置。