Animate a Property of an Object with jQuery

After some messing around with jQuery.animate() I figured out how to animate properties of an Object:

      $({x:0}).animate({x:100},{
        duration : 1000, 
        step:function(){
          console.log(this.x);
        }
      });

This might look a little chunky, but it’s actually not bad when put to real use.

Click anywhere on the below canvas:

Here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="easing.js"></script>
    <script>
      $(function(){
 
        var win = $(window);
        var canvas = $("<canvas>").appendTo("body")[0];
        canvas.width = win.width();
        canvas.height = win.height();
        var c = canvas.getContext("2d");
        c.fillStyle = "black";
        c.fillRect(0,0,canvas.width,canvas.height);
 
        function Triangle(x,y,color){
          var t = this;
          t.x = x;
          t.y = y;
          t.color = color;
        }
        Triangle.prototype = {
          rotation : 0, scaleX : 1, scaleY : 1,
          render : function(){
            var t = this;
            c.save();
            c.translate(t.x,t.y);
            c.rotate(t.rotation);
            c.scale(t.scaleX,t.scaleY);
            c.fillStyle = t.color;
            c.beginPath();
            c.moveTo(0,-30);
            c.lineTo(30,30);
            c.lineTo(-30,30);
            c.closePath();
            c.fill();
            c.restore();
          }
        };
 
        $.fx.interval = 30;
 
        var triA = new Triangle(100,100,"red");
        var $triA = $(triA);
 
        var triB = new Triangle(200,100,"blue");
        var $triB = $(triB);
 
        $(document).click(function(){
          $triA.stop().animate({
            x : Math.random() * canvas.width,
            y : Math.random() * canvas.height,
            rotation : Math.random() * 2 * Math.PI,
            scaleX : 0.5 + Math.random(),
            scaleY : 0.5 + Math.random()
          }, 500, "easeOutBack");
 
          $triB.stop().animate({
            x : Math.random() * canvas.width,
            y : Math.random() * canvas.height,
            rotation : Math.random() * 2 * Math.PI,
            scaleX : 0.5 + Math.random(),
            scaleY : 0.5 + Math.random()
          }, 2000, "easeOutElastic");
        });
 
        setInterval(function(){
          c.fillStyle = "rgba(0,0,0,0.2)";
          c.fillRect(0,0,canvas.width,canvas.height);
 
          triA.render();
          triB.render();
 
        },$.fx.interval);
 
      });
    </script>
    <style>
      body,html{
        overflow : hidden;
        margin:0px;
        padding:0px; 
      }
    </style>
  </head>
  <body>
 
  </body>
</html>


 
 
 

Leave a Reply

Spam protection by WP Captcha-Free