Question

http://codepen.io/anon/pen/XbEEzE

<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 });
});

在这个编码器中，我将圆圈从A点移动到B点。我要做的是让圆圈在它后面生成一条线，所以最后我有一个我在页面上指定绘制的贝塞尔曲线。

有什么想法？

提前谢谢！

Answer 1

试试这个：

在position: absolute;对象的css规则中添加.circle。
将$('.circle')对象的引用存储在名为circleObject的变量中，然后在TweenMax.to()调用中使用该对象。
在TweenMax.to()来电中，添加onUpdate回调 onUpdateParams和onUpdateScope的值分别为onAnimationUpdate，[circleObject]和this。
创建一个名为onAnimationUpdate的函数，其中包含要通过名称接收的参数，例如circle，如下所示：function onAnimationUpdate(circle){...}。
在这个新创建的函数中添加$(circle).clone().appendTo(document.body);行。

以下是完整的代码：

<强> CSS：

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

<强> JavaScript的：

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.
}

希望这会有所帮助。这是一个有效的 jsFiddle 。

P.S。这里有一件事需要说。如果您希望在网络上绘制内容，则应该查看Canvas API。更高效，更灵活。

Bezier曲线轨迹生成动画

1 个答案: