paper.js animation along a path - Javascript Canvas

Javascript examples for Canvas:Animation

  1. HOME
  2. Javascript
  3. Canvas
  4. Animation

Description

paper.js animation along a path

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.min.js"></script> 
      <style id="compiled-css" type="text/css">

canvas { background: #000; }


      </style> 
      <script type="text/javascript">
    $(window).load(function(){/*from ww w .  j a  va2  s.c  om*/
    });

      </script> 
   </head> 
   <body> 
      <canvas id="myCanvas" width="500" height="500"></canvas> 
      <script type="text/paperscript" canvas="myCanvas">
    paper.Path.prototype.getPointAtPercent = function (percent) {
       return this.getLocationAt(percent * this.length).getPoint();
    };
    var path = new paper.Path();
    path.importJSON(["Path",{"applyMatrix":true,"segments":[[{"x":90,"y":78},{"x":0,"y":0},{"x":0,"y":-11.45139}],[{"x":33,"y":77},{"x":16.73544,"y":-33.47088},{"x":-12.49876,"y":24.99752}],[{"x":77,"y":179},{"x":-22.43439,"y":-7.47813},{"x":2.49959,"y":0.8332}],[{"x":82,"y":184},{"x":-2.28919,"y":-0.5723},{"x":4.46364,"y":1.11591}],[{"x":110,"y":196},{"x":-1.88326,"y":1.88326},{"x":4.97496,"y":-4.97496}],[{"x":129,"y":181},{"x":-3.89733,"y":5.84599},{"x":18.01903,"y":-27.02855}],[{"x":161,"y":62},{"x":19.0113,"y":38.02261},{"x":-15.23925,"y":-30.4785}],[{"x":90,"y":68},{"x":12.14761,"y":-24.29522},{"x":-2.20151,"y":4.40302}],[{"x":91,"y":84},{"x":0,"y":-4.62046},{"x":0,"y":0}]],"strokeColor":[0,0,0]}]);
    path.strokeColor = "#FFF";
    var circle = new Path.Circle(0,100,4);
    circle.strokeColor = "#fff";
    var duration = 3000;
    var animationEndTime = null;
    function onFrame(event) {
          var now = Date.now();
          if (!animationEndTime || now > animationEndTime) {
          animationEndTime = now + duration;
        }
        var percent = (duration - (animationEndTime - now)) / duration;
        circle.position = path.getPointAtPercent(percent);
    }

      </script>  
   </body>
</html>

Related Tutorials