使用ScrollMagic在bézier上进行动画处理：初始状态=第一个bézier点

Question

See a jsfiddle here

我正在沿着bézier路径补充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();

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

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

Answer 1

Tahir Ahmed的回答有效！

  

也许您可以在执行.set()补间之前使用.to()？类似于this。