使用 ScrollMagic 在贝塞尔曲线上设置动画：初始状态 = 第一个贝塞尔曲线点

Question

我正在用 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

Tahir Ahmed 的回答有效！

perhaps you can use .set() before doing the .to() tween? something like this.

使用 ScrollMagic 在贝塞尔曲线上设置动画：初始状态 = 第一个贝塞尔曲线点

Animate on bézier with ScrollMagic: Initial state = first bézier point

animation

css-transitions

scrollmagic

gsap