Paperjs отказов анимация - PullRequest
Новая
       50

Paperjs отказов анимация

0 голосов
/ 23 октября 2018

При игре с Paperjs наблюдается странное поведение, я пытался изогнуть линию с 7 точками по отдельности - это хорошо работает один раз, но при попытке перебросить ссылку и вернуться к 3 различным точкам (чтобы создать эффект отскока)кажется, не играет в мяч.На втором операторе if переменная 'counter', кажется, не увеличивается вместо уменьшения, а '+ steps' вместо '- steps'.

Возможно, я не правильно использую операторы if в этом случае, илиУ paperjs есть какое-то странное поведение?

Вот кодекс для него полностью, нажмите над синей линией, чтобы вызвать его..Ниже приводится один 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);

Спасибо!

1 Ответ

0 голосов
/ 03 ноября 2018

Вместо того, чтобы вручную создавать свой эффект отскока, вы можете использовать библиотеку анимации, такую ​​как GSAP .
. Она имеет множество функций, которые облегчат вашу задачу (см. Упрощение документации ).
Вот пример того, что вы пытаетесь сделать (нажмите на холст, чтобы оживить линию). 

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