Question

在使用Paperjs时有一些奇怪的行为，我试图将一条曲线分别弯曲成7点-一次可以正常工作，但是当试图使链接超调并返回3个不同点时（产生反弹效果））似乎没有打球。在第二个if语句上，“ counter”变量似乎没有增加而不是减少，而是“ + steps”而不是“ -steps”。

在这种情况下，也许我没有正确使用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>

Paperjs弹跳动画

1 个答案: