Javascript Bezier曲线轨迹生成动画

启动动画
/div>
.圆圈{
宽度：20px；
高度：20px；
背景色：#EBC84E；
边界半径：100%；
边缘顶部：50px；
}  
$（'.move me'）。在（'click'，function（）上{
TweenMax.to（“.circle”，2，{bezier:{curvity:2，键入：“thru”，值：[{x:0，y:0}，{x:122，y:120}，{x:239，y:0}，{x:300，y:0}，{x:411，y:120}，{x:533，y:0}，ease:Linear.easeNone}）；
});

在这个代码笔中，我让圆从A点到B点。我试图做的是让圆在它后面生成一条线，这样最后我就可以在页面上绘制我指定的贝塞尔曲线

有什么想法吗

提前谢谢你

试试这个：

• 添加

  位置：绝对位置.circle

  对象指定code>
• 在名为say

  circleObject

  的变量中存储对

  $（'.circle'）

  对象的引用，然后在

  TweenMax.to（）调用中使用该引用

• 在

  TweenMax.to（）

  调用中，添加一个

  onUpdate

  回调以及

  onUpdateParams

  和

  onUpdateScope

  ，其值分别为

  onAnimationUpdate

  、

  [circleObject]

  和

  this

• 创建一个名为

  onAnimationUpdate

  的函数，该函数的参数通过名称接收，例如

  circle

  如下：

  函数onAnimationUpdate（circle）{…}

• 添加

  $（圆圈）.clone（）.appendTo（document.body）行

以下是完整的代码：

CSS:

.circle{
位置：绝对；//谢谢你的回答！抱歉，似乎什么也没发生。@SBullsy：在我的回答中添加了一个jsFiddle链接。有帮助吗？嘿，这太好了！谢谢！这不是我想要的，我只是想留下一条线迹，而不是复制圆。就像让圆引导一条1倍笔划的路径一样。也许我误解了。C你能解释一下“后面的线路”吗视觉上的意思？你仍然需要在圆圈后面画一些东西，对吗？看起来你真正想要的是一个线条绘制功能，据我所知，它在画布API中可用。你读过我上面的post scriptem吗？你知道画布吗？我想画圆圈的路径。我知道画布API，但我知道不知道如何通过使线条逐渐出现在圆圈项目后面来设置线条画的动画。我对这种东西不熟悉，所以对我来说这一切似乎很复杂，很抱歉让我感到痛苦。此外，您提供的链接现在不起作用。
<button class="move-me">Start animation</button>
<div class="circle">/div>

.circle {
width: 20px;
height: 20px;
background-color: #EBC84E;
border-radius: 100%;
margin-top:50px;
}  

$('.move-me').on('click', function() {
TweenMax.to(".circle", 2, {bezier:{curviness:2, type:"thru", values:[{x:0, y:0},{x:122, y:120},{x:239, y:0},{x:300, y:0},{x:411, y:120},{x:533, y:0}]}, ease:Linear.easeNone });
});

.circle {
    position: absolute; // <-- added this line
    width: 20px;
    height: 20px;
    background-color: #EBC84E;
    border-radius: 100%;
    margin-top:50px;
}

var circleObject = $('.circle'); // moved '.circle' here so it can be passed as a parameter later on to the 'onUpdate' callback

$('.move-me').on('click', function () {
    TweenMax.to(circleObject, 2, {
        bezier: {
            curviness: 2,
            type: 'thru',
            values: [
                {x:0, y:0},
                {x:122, y:120},
                {x:239, y:0},
                {x:300, y:0},
                {x:411, y:120},
                {x:533, y:0}
            ]
        },
        onUpdate: onAnimationUpdate, // <-- added this line
        onUpdateScope: this, // <-- added this line
        onUpdateParams: circleObject, // <-- added this line. Read more about these here: [http://greensock.com/docs/#/HTML5/GSAP/TweenMax/].
        ease: Linear.easeNone
    });
});

function onAnimationUpdate(circle){ // <-- added this function block
    $(circle).clone().appendTo(document.body); // <-- and of course, added this. This line creates a clone of your '.circle' object and places it exactly where your '.circle' object currently is i.e. cloning.
}