问题标签 [web-animations]

我现在正在构建一个网页，我的经理想要在其上旋转一个特定的地球（意思是：阴影和特定的地球设计）。我们有一个专门研究 3D 模型的团队，他们已准备好构建对象。

但他们或我也不知道如何正确构建它。

我正在考虑使用 canvas 和 greensock (GSAP) js 库，但问题是，我不知道如何集成 3D 对象，这个对象的扩展应该是什么。

也许 WebGl 更合适？或者只是多个图像？

有人知道吗？

编辑：为了更具体，我不能使用 gif 或已经制作的动画，因为地球在滚动时必须旋转。如果你不滚动，地球就不会旋转。然后地球将慢慢消失，另一个物体将取代它。

我有一个 skrollr 动画，它基本上从底部向上滑动 H2 标签，同时从顶部向下滑动 div。当它们的父级位于屏幕顶部时，它们都固定定位并对齐以在屏幕上水平居中相遇。

当父级位于屏幕顶部时，h2 标签居中，右侧 div 的顶部位于屏幕顶部，这很好，问题是右侧 div 应该向下滑动并淡出屏幕时父母的底部到达顶部，但它只是打破并向下移动而没有任何动画。

为什么会发生这种情况？父母高度与右侧 div 的高度相同

这是我如何做的示例代码：

这是我对 html5/css3 动画的第一种方法。

我对文本有淡入淡出和缩放效果。

动画完成后，我有一个问题。文本被调整大小。我不想要这个。

我希望文本在动画结束时保持相同的大小 (30px)。

样本

我试图向霓虹动画页面添加动画，如下所示：

例如，如果我将上滑动画更改为按比例放大，则效果很好。除了上滑动画之外，其他所有动画都有效。

我已经包含了动画本身，以及我尝试过的任何其他内容。我的霓虹动画元素是 1.0.8 版

这是一个聚合物错误，还是在使用上滑动画时我必须做一些不同的事情？

我为我的元素创建了一个简单的动画，但我得到的不是很酷的效果Uncaught TypeError: Keyframes must be null or an array of keyframes。

似乎不是Polymer本身的问题，而是在我的代码或网络动画节点的某个地方......

这个框架不起作用。但是改了stroke或者strokeWidth就可以正常运行了，这有什么问题呢？

我正在尝试使用网络动画/JS（但不是 CSS！）来转换 SVG。

我无法transform: rotate(10)工作——不知道为什么。

在示例中playerT(scale) 和playerT3(strokeWidth) 很好，但 playerT2似乎没有做任何事情——为什么？

JSFiddle 在这里： https ://jsfiddle.net/45cbhLqL/

PS：我可以使用转换矩阵（如果必须的话）吗？

如何在（不是 CSS！）中为 SVG 文本路径startOffset参数设置动画： 我想让文本沿着路径滑动...我尝试了, ，但没有成功。WebAnimation/JS
numbers%px

JSFiddle：https ://jsfiddle.net/509c8pmj/ 帮助将不胜感激。

我如何（如果有的话）d在网络动画中制作动画？在示例中stroke并且strokeWidth正在工作，d不是吗？！

编辑： 实现脚本路径动画（没有 SMIL）的任何首选替代方案？

我们一直在使用 SVG 路径动画 (SMIL)，因为 CSS 非常有限，而且现在听说 SMIL 很快就会从所有浏览器中消失。有谁知道 WebAnimations 是否支持矢量形状动画而不仅仅是经典的位置/旋转/缩放动画？