Raphael.js-節拍器動畫在iDevice上非常慢？

Question

我正在嘗試使用PhoneGap，Sen​​cha Touch和Javascript構建節拍器。 我已經成功創建了具有完善功能的節拍器，但是在我的iPhone4和iPhone5上節拍器的渲染非常慢。

下面是相同的代碼：

Metronome.js

var metronomeFunction = function (){

var paper = Raphael("canvas",300,300);

var metronome = function(opts) {    
  // if no options specified, make an empty object
  opts = opts || {};

  //default values for variables if unspecified
  var len = opts.len || 150, // length of metronome arm
    angle = opts.angle || 20, //max angle from upright 
    width = len * Math.cos(angle),



    x = opts.x || 0,
    y = opts.y || 0,
    tempo = 100;

 // pieces of the metronome  



 var arm = paper.path("M" + (x + width) + "," + y + "v" + len).attr({
    'stroke-width': 5,
    stroke: "#999"
});




var weight = paper.path("M" + (x+width) + ","  + (y+len) + "h9l3,-18h-24l3,18h12")
    .attr({
        'stroke-width': 0,
        fill: '#666'
    });


/* Next, let's set the weight at the center of the arm, make a label for the tempo, and use a drag event to allow the user to adjust the tempo by moving it. */

//start the weight at the halfway point (18px less than length bc of weight)
weight.position = (len - 18) / 2;
weight.transform("T0,-" + weight.position);

var label = paper.text('20%', '25%', tempo);

// track drag position
var drag_position; 

weight.drag(
    function(x, y, dx, dy, e) {
        // restrict weight to top of bar and very bottom, allowing for 18px height of weight
        drag_position = Math.min(len - 18, Math.max(0, this.position - y));

        /* calculate tempo based on position, with range of 150 bpm to 50 bpm
        tempo = Math.round(50 + 100 * drag_position / (len - 18));
        label.attr("text", tempo);*/

        /* calculate tempo based on position, with range of 50 bpm to 150 bpm*/
        tempo = Math.round(150-100*drag_position / (len - 18));
        console.log('Actual Tempo : '+tempo+' :: at position: '+drag_position);
        label.attr("text", tempo);
        this.transform('T0,-' + drag_position);

        //Transform/Render the Drag Position
        this.transform('T0,-' + drag_position);            
    },
    function(x, y, e) {
        this.attr("fill", "#000");
    },
    function(e) {
        this.position = drag_position;
        this.attr("fill", "#666");
    }
);    
var armAnim;
return {
    play: function(repeats) {

        armAnim = {
            "25%": { transform:"R" + angle + " " + (x+width) + "," + (y+len), easing: "sinoid" },
            "75%": { transform:"R-" + angle + " " + (x+width) + "," + (y+len), easing: "sinoid" },
            "100%": { transform:"R0 " + (x + width) + "," + (y + len), easing: "sinoid" }
        };

        var weightAnim = {
            "25%": { transform:"T0,-" + weight.position + "R" + angle + " "
                        + (x + width) + "," + (y + len), easing: "sinoid" },
            "75%": { transform:"T0,-" + weight.position + "R-" + angle + " " 
                        + (x + width) + "," + (y + len), easing: "sinoid" },
            "100%": { transform:"T0,-" + weight.position + "R0 "
                        + (x + width) + "," + (y + len), easing: "sinoid" }
        };       

        //2 iterations per animation * 60000 ms per minute / tempo
        var interval = 120000 / tempo;
    arm.animate(Raphael.animation(armAnim, interval).repeat(repeats / 2));
    weight.animateWith(arm,arm.animate,Raphael.animation(weightAnim, interval).repeat(repeats / 2));    

    } ,

    stop: function() {

            arm.stop();
            weight.stop();
            console.log(arm.attr());
             arm.animate({transform:['M',1, 0, 0, 1, 0, 0]});
             weight.animate({transform:['M',1, 0, 0, 1, 0, -(drag_position)]});
             //weight.transform('T0,-' + drag_position);
             //tempo = drag_position;

                    }       




 };    
}   
 var m = metronome({
    x: 100,
    y: 15,
    angle: 20,
    len: 500    
});

var startstopButton = document.getElementById("play");


startstopButton.onclick = function()
     {
        if(startstopButton.value === 'play'){
                m.play(Infinity); 
                startstopButton.value = "stop";
            }
        else if (startstopButton.value==="stop") {
                console.log('do something to stop animation');
                startstopButton.value = "play";  
                m.stop();
            }
    }   

}; 

的CSS

#canvas {
        width: 100%;
        height: 90%;
        margin-bottom: 1%;
    }


    #tempo {
        width: 50px;
        text-align: center;
    }

    #ticks {
        width: 50px;
        text-align: center;
    }

    #play{

        left: 20%;
        position: absolute;
        bottom: 10%;
        width: 25%;
    }  

    #stop{

        left: 5%;
        position: absolute;
        bottom: 10%;
        width: 10%;
    }

我只是簡單地調用MetronomeFunction（）; 我想在哪里顯示我的節拍器。

請幫助我找出節拍器中不穩定的動畫的RC。

Answer 1

您絕對應該使用3d轉換，因為它們是硬件加速的。

-webkit-transform: translate3d(x,y,z);
transform: translate3d(x,y,z);

我不知道煎茶是如何使這種東西動起來的。 我通常只使用jQuery。 在那里，您可以使用

$el.css({
    "-webkit-transform": "translate3d(x,y,z)",
    "transform": "translate3d(x,y,z)"
});

我希望這有幫助！