Javascript GSAP动画无法插值CSS3变换

我正在通过将所有CSS3动画转换为javascript动画

不幸的是，我在让CSS3转换正常工作时遇到了一些问题

我在用户的屏幕上放置了一组图像。它们最初是隐藏的。当图像全部加载完毕后，将设置动画，使其从屏幕外垂直移动到最终静止位置

img {
    /* Other styles for size, position, etc. */
    ...
    transform: perspective(400px) rotateX(50deg) rotateY(-5deg) rotateZ(30deg);
    ...
}

还有一些javascript：

var _timeline = new TimelineMax(),
    _animation = {
        'transform' : 'translateY(' + offset + 'px)',
        'ease' : Power2.easeInOut
    };

所有图像都排成一条时间线，以便连续播放动画

_timeline.from('#someElement', 1, _animation, 0);

我使用

.from（）

函数，因为元素的最终样式已经存在于CSS中；我只需要首先将它们放在屏幕外，然后向下移动

以下是直接从GSAP文档中获得的功能描述：

创建反向tween的TweenMax实例的静态方法-定义起始值，并将当前值用作目标值，这对于在屏幕上设置对象动画非常有用，因为您可以按照希望对象在tween结尾处看到的方式对其进行初始设置，然后在屏幕上设置动画从别处来的

我的理解是，GSAP将采用您提供的初始状态并设置元素的动画，直到它与CSS中描述的完全相同

但是，我无法让GSAP在这个初始状态和最终状态之间进行插值（完成3D变换）。我尝试过许多不同的方法（例如，将缺少的变换添加到动画代码中或使用clearProps/force3D/etc），但GSAP给我的最终结果没有正确变换

换句话说，如果我没有运行任何动画，那么我的元素看起来是正确的——它已经用透视图旋转了——但是动画版本最终是错误的

我还是GSAP的新手，所以我肯定我错过了一些东西

谁能给我指出正确的方向吗

谢谢

GSAP插值到（好的，从）一个没有定义透视图的值，因此它的行为就像它是零一样。随着透视越来越接近于零，它看起来越来越强大（显然不是你想要的），当它达到零时，浏览器会完全不同地对待它，就像它是无限的一样。因此，在您的情况下，您可以简单地在“from”值中定义一个透视图，这样它就不会默认为零，如：

{transform: "translateY(400px) perspective(2000px)"}

GSAP中转换的提示： GSAP最显著的优势之一是处理转换的方式。为了使它们直观、高效、一致，我们付出了大量的努力。为了最大限度地发挥其优势，我强烈建议您对变换组件（如x、y、z、rotation、rotationX、rotationY、scaleX、scaleX、skewX、skewY等）使用GSAP的本机属性，而不是像在CSS中那样使用通用的“transform”字符串，因为：

• 它们的解析速度要快得多。定义“transform”字符串时，必须将其传递到浏览器，并将其解释为matrix（）或matrix3d（），这有一些固有的限制（加上整个过程需要更长的时间）
• 您可以更好地控制每个组件。例如，如果您的图元已经旋转、缩放和平移，并且以后要将其向右移动200px，则可以简单地说x:“+=200”，而不必定义包含所有旋转/缩放/平移值的长字符串
• 当旋转值超过360度时，它们更精确，这是因为GSAP缓存本机组件，因此它们总是精确的，而变换字符串流经矩阵，在某一点后会失去精度。例如，0deg、360deg和720deg的矩阵（）都是相同的，因此无法识别原始意图
• 使用GSAP的本机转换属性可以解决各种浏览器错误和限制，特别是在支持浏览器的SVG中

因此，虽然从技术上讲您可以使用常规的“转换”字符串，但如果您使用GSAP的本机属性，您将获得更好的性能、准确性和一致性

下面是一个代码笔，显示了您描述的工作场景：

---

另外，正如您所知，在开发团队非常活跃的地方有专门的GSAP论坛

你能和我共用一把小提琴吗？这似乎是一个容易解决的问题，但我可能错了。此外，如果为了比较起见，您可以在单独的提琴（或其他地方）上安装一个仅使用css的版本，那就更好了。您的画笔可以使用透视图，也可以不使用透视图，并且最终结果是相同的[编辑：至少对于本机GSAP转换？]。在我的特殊情况下，如果我添加任何缺少的值（我已经尝试将透视图添加到from方法中描述的初始状态），那么最终结果仍然是不正确的，因为GSAP只是出于某种原因应用了2d矩阵，不是3d矩阵。最终我遇到的问题是，CSS中定义的转换字符串从未实际应用（或转换到）——动画后的结果严格来说是二维的。@Jack！师父在这里：）@SamuelMS，如果您仍然有问题，请提供密码笔或JSFIDLE。对盲人进行故障排除是困难的。我怀疑在你的场景中还有其他因素在起作用。此外，您正在使用最新的GSAP，对吗？根据Jack的建议在GSAP论坛上创建了一篇帖子：