使用 ScrollMagic 在贝塞尔上制作动画：初始状态 = 第一个贝塞尔点答案

【问题标题】：Animate on bézier with ScrollMagic: Initial state = first bézier point使用 ScrollMagic 在贝塞尔上制作动画：初始状态 = 第一个贝塞尔点
【发布时间】：2016-02-29 19:17:40
【问题描述】：

See a jsfiddle here

我正在沿着 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°。

【问题讨论】：

也许您可以在进行 .to() 补间之前使用 .set()？类似于 this.
完美！我将其添加为解决方案。

标签： animation css-transitions gsap scrollmagic

【解决方案1】：

Tahir Ahmed 的回答有效！

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

【讨论】：