Question

这是Codepen： https://codepen.io/anon/pen/eVoQzX

我试图动画并在旅途中添加路径元素。一旦最后一个动画完成，我就添加了一个id动画的新路径点。遗憾的是时间轴无法找到元素，有没有办法强制GSAP识别新的元素？

时间轴和paperjs代码：

var path = new paper.Path({
  strokeColor: 'red',
  strokeWidth: 3,
});

path.add(new paper.Point(100, 100));
path.add(new paper.Point(150, 150));

function extrapath() {
    path.add(new paper.Point(path.lastSegment.point.x, path.lastSegment.point.y));
}
var tm = new TimelineMax();
    tm.to($(path.segments[1].point), speed, 
    {x:path.lastSegment.point.x+10, y:path.lastSegment.point.y+25}, 0)

    .add( function(){ extrapath(); })

    .to($(path.segments[2].point), speed, 
    {x:path.lastSegment.point.x+10, y:path.lastSegment.point.y+25}, 0)

Answer 1

问题在于，在定义动画时，.wrapper-div { display: inline-block; position:relative; } .middle-div { display: inline-block; width: 20px; height: 10px; margin-right: 10px; background-color: green; font-size: 8px; position: absolute; left: 20px; top: 2px; }不存在，因为路径只有2个分段。
一种解决方案是在触发动画之前创建所有需要的片段。
但是，如果您确实要在第一个动画结束后修改路径，并在第二个动画中使用修改后的路径，则可以使用path.segments[2] TimelineMax回调（documentation）在2种不同的动画。
这是更新后的Codepen。

onComplete

如何使GSAP时间轴识别在其中间创建的元素？

1 个答案: