-webkit-transform : Use 3D for 2D

My students are often surprised when I show them web app demos for the iphone. They simply weren’t aware that you could use SVG or webkit-transform/transition to get some really smooth running interactive animation and graphics.

I’ve been wanting to post an intermediate level example on this site for awhile but haven’t gotten around to it until now.

This will only work in a webkit browser like chrome, safari/safari mobile etc…

The key to get this to run nicely on mobile devices is not to use the 2D transforms like rotate() or transform(), you should always use the 3D transforms like rotateZ() etc…

Here is a video of it running on ipad2: (i also tested on an old ipod touch and a g4 – it ran completely smoothly on all across the board)

If you’d like to try it on your phone or other mobile device yourself, check this link out: http://mtcanvas.com/mem/swim.html

…and 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
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swim</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(function(){
 
        var win = $(window);
        var winWidth, winHeight;
        var body = $("body");
        var TWO_PI = Math.random() * Math.PI * 2;
 
        function Mover(){
          this.init();
        }
 
        Mover.prototype = {
          init : function(){
            this.x = 200;
            this.y = 200;
            this.rad = Math.random() * 6 + 3;
 
            this.vx = this.vy = 0;
            this.rot = Math.random() * TWO_PI;
            this.theta = 0;
            this.damp = 24;
            this.graphics = $("<div class='mover'>").css({opacity : 0.8});
 
            this.update();
            body.append(this.graphics);
          },
          run : function(){
 
            if (parseInt(Math.random() * 10) == 1){
              this.theta += Math.random() * 2 - 1;
            }
 
            this.vx += (this.rad * Math.cos(this.theta) - this.vx) / this.damp;
            this.vy += (this.rad * Math.sin(this.theta) - this.vy) / this.damp;
 
            this.rot += (this.theta / Math.PI * 180 - this.rot) / this.damp;
 
            this.x += this.vx;
            this.y += this.vy;
 
            if (this.x < left){
             this.x = right; 
            }else if (this.x > right){
              this.x = left;
            }
            if (this.y < top){
             this.y = bottom; 
            }else if (this.y > bottom){
              this.y = top;
            }
            this.update();
          },
          update : function(){
 
            this.graphics.css({
              "-webkit-transform" : "translate3D("+this.x+"px, "+this.y+"px, 0px) rotateZ("+this.rot+"deg)"
            });
          }
 
        };
 
        var movers = [];
        var NUM = 30;
        for (var i = 0; i<NUM; i++){
          movers[i] = new Mover();
        } 
 
        var interval = 1000/60;
 
        var left = -50, top = -50, right, bottom;
 
        setInterval(function(){
          winWidth = win.width();
          winHeight = win.height();
          right = winWidth + 50;
          bottom = winHeight + 50;
 
          for (var i = 0; i<NUM; i++){
            movers[i].run();
          }
        }, interval);
 
      });
    </script>
    <style>
      .mover{
        position : absolute;
        background-color :  #7e9fc2;
        width : 50px;
        height : 20px;
        -webkit-box-shadow : 0px 0px 10px #7e9fc2;
      }
    </style>
  </head>
 
  <body></body>
</html>


 
 
 

3 Responses to “-webkit-transform : Use 3D for 2D”

  1. mkeblx
    16. June 2011 um 18:12

    That runs a lot faster than I would have expected on my Droid, faster than my desktop. Great.

    Is using divs a better option than going with canvas or svg for something like this though?

  2. jonathan
    22. June 2011 um 05:43

    Transform 3D on android browser is not really smooth.

  3. Zevan
    22. June 2011 um 05:52

    yeah, it depends on the phone – but I haven’t seen the android browser run smooth like safari mobile – not even sure if android will use hardware to render these… so this demo is really for iphone, ipad etc…

Leave a Reply

Spam protection by WP Captcha-Free