使用卷轴魔法在贝塞尔上制作动画：初始状态 = 第一个贝塞尔点

Question

在这里查看jsfiddle

我正在沿着一条贝塞尔路径补间，有 3 分。

// bezier data
var bezierData = {
  curviness: 1,
  autoRotate: false,
  values: [
    {x: 0,  y: 0, rotation:"40_cw"}, /* <-- The desired state of the object before any animation has happened */
    {x: 20,  y: 0, rotation:"0_ccw"},
    {x: 40, y:0, rotation:"-20_ccw"}
  ]
};
// build tween
var tween = new TimelineMax()
          .add(TweenMax.to("#testobj", 1, {css:{bezier: bezierData}, ease:Power1.easeInOut}));
// create scene
var scene = new ScrollMagic.Scene({
        triggerElement: "#testobj",
        duration: 100,
        offset: 10
    })
    .setTween(tween)
    .addTo(ctrl)
    .addIndicators();

我想要什么：我的对象的初始状态（即在任何动画发生之前）应该是第一个贝塞尔点，{x: 0, y: 0, rotation:"40_cw"} .

发生了什么：初始状态是对象的默认样式，即相当于{x: 0, y: 0, rotation:"0"}。请注意，在 jsfiddle 中，绿色方块是如何直立开始的，而我希望它开始顺时针旋转 40°。

Answer 1

塔希尔·艾哈迈德的答案有效！

也许您可以在执行.to()补间之前使用.set()？ 像这样的东西。