Raphael.js - Метроном анимации очень медленно на iDevice?

Question

Я пытаюсь построить метроном с помощью PhoneGap, Sencha 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); 

Я не знаю, как sencha оживляет этот материал. Обычно я использую jQuery. Там вы можете применить этот вид анимации с помощью

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

Надеюсь, это поможет!