Paperjs反弹动画

Question

在玩Paperjs时有一些奇怪的行为，我试着用7个点单独画一条线--这一次效果很好，但当试图使链接超调并返回到3个不同的点(以创建反弹效果)时，似乎不起作用。在第二个if语句中，'counter‘变量似乎不是增加而是减少，而是'+ step’而不是'- step‘。

也许我在这种情况下没有正确使用if语句，或者paperjs有一些奇怪的行为？

Heres the codepen for it in full, click above the blue line to trigger it off. 。以下是线段其中一个点的一个setInterval。

var seg6first = true;
   var seg6sec = false;
   var seg6thir = false;
   setInterval(function() {
      if (seg6first == true) {
         counter = counter - steps;
         if (counter >= 230) {
            path.segments[6].point.y = counter; 
            path.smooth(); }
         else {
            seg6first = false; 
            seg6sec = true;  
         } 
      }
      if (seg6sec == true) { 
         counter = counter + steps;
         if (counter <= 260) {   
            path.segments[6].point.y = counter;   
            path.smooth();} 
         else { 
            seg6sec = false;
            seg6thir = true;
         }
      }
      if (seg6sec == true) {
         counter = counter - steps;
         if (counter >= 250) {   
            path.segments[6].point.y = counter;  
            path.smooth();  }
         else {
            seg6thir = false;
         }
      }
   }, mintiming); 

谢谢!

Answer 1

您可以使用像GSAP这样的动画库，而不是手动构建反弹效果。

它有很多功能，可以让你的任务变得更简单(参见easing documentation)。

以下是您正在尝试执行的操作的示例(单击画布以使线条具有动画效果)。

​

html,
body {
    margin: 0;
    overflow: hidden;
    height: 100%;
}

canvas[resize] {
    width: 100%;
    height: 100%;
}

<canvas id="canvas" resize></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.min.js"></script>
<script type="text/paperscript" canvas="canvas">

// user defined constants
var SEGMENTS_COUNT = 6;
var CURVE_HEIGHT = 80;
var ANIMATION_DURATION = 2;

// init path
var path = new Path({
    fillColor: 'orange',
    selected: true
});
// add points
for (var i = 0; i <= SEGMENTS_COUNT; i++) {
    path.add([view.bounds.width * i / SEGMENTS_COUNT, view.center.y]);
}

// on mouse down...
function onMouseDown() {
    // ...animate points
    for (var i = 0, l = path.segments.length; i < l; i++) {
        // get a reference to the point
        var point = path.segments[i].point;
        // calculate offset using sine function to form a curve
        var offset = CURVE_HEIGHT * Math.sin(point.x * Math.PI / view.bounds.width);
        // register animation
        TweenLite.fromTo(
            // target
            point,
            // duration
            ANIMATION_DURATION,
            // initial value
            { y: view.center.y },
            {
                // final value
                y: view.center.y - offset,
                // easing
                ease: Elastic.easeOut.config(1, 0.3),
                // on update...
                onUpdate: function() {
                    // ...smooth the path
                    path.smooth();
                }
            }
        );
    }
}

</script>

​