小编com*_*201的帖子

当 SVG 对象沿着贝塞尔曲线进行动画处理时，我有什么方法可以“弯曲”它？我主要使用 GSAP 来制作动画。效果看起来像这样：https : //www.behance.net/gallery/49401667/Twist ?ed-letters-2（带蓝色铅笔的那个）。我设法让红色箭头沿路径设置动画，但形状始终保持不变。我希望它沿着绿色路径前进并在它绕曲线移​​动时弯曲，以便在动画结束时它具有紫色箭头的形状。这是代码笔。

GSAP代码：

var motionPath = MorphSVGPlugin.pathDataToBezier("#motionPath", {align:"#arrow1"});
var tl1 = new TimelineMax({paused:true, reversed:true});
tl1.set("#arrow1", {xPercent:-50, yPercent:-50});
tl1.to("#arrow1", 4, {bezier:{values:motionPath, type:"cubic"}});


$("#createAnimation").click(function(){
    tl1.reversed() ? tl1.play() : tl1.reverse();
});

有没有办法只用 GSAP 来做到这一点？或者我需要像 Pixi 这样的东西？