Как я могу улучшить производительность рисования пути анимации?

Я нарисовал прямоугольник с kinetic.js и оживил его по круговой траектории. В каждом кадре анимации я уменьшаю его радиус, и я рисую анимационный путь этого объекта по кинетической линии. Но этот цикл анимации кинетики развивает нежелательную паузу «шататься». Этот маневр небольшой в Chrome, заметен в IE и ужасен в FireFox. Кажется, это связано с тем, что Kinetic.Line не может плавно добавить + нарисовать тысячи изменяющихся точек данных. Как сделать эту анимацию безупречной, гладкой. Было бы очень полезно, если бы вы дали мне ссылку на jsfiddle. Букеты благодарности заранее.Как я могу улучшить производительность рисования пути анимации?

КОДЫ:

var R= 80; 

$(document).ready(function(){ 
var stage= new Kinetic.Stage({ 
    container: 'container', 
    width:500, 
    height:500 
}); 

var layer = new Kinetic.Layer(); 
var line = new Kinetic.Line({ 
    points:[0,0,0,0], 
    stroke:'blue', 
    strokeWidth:2 
}); 
var rect = new Kinetic.Rect({ 
    x:10, 
    y:10, 
    width:10, 
    height: 10, 
    fill:'black', 
    stroke:'red' 
}); 
layer.add(rect); 
layer.add(line); 
stage.add(layer); 

var centerX = stage.width()/2; 
var points=[]; 
var anim = new Kinetic.Animation(
     function(f){ 
      var cX= stage.width()/2; 
      var cY= stage.height()/2; 
      R=R-1/100; 
      var X = cX + R*Math.cos(f.time/1000); 
      var Y = cY+ R*Math.sin(f.time/1000); 
      points.push(X,Y); 
      line.setPoints(points); 
      rect.setX(X); 
      rect.setY(Y); 
     } 
,layer); 
anim.start(); 
});

JSFIDDLE:http://jsfiddle.net/tanvirgeek/n8z8N/7/

Спасибо заранее.

источник

2014-02-02 tanvirgeek

Как вы обнаружили, обновление и рисование Kinetic.Line, содержащего тысячи сегментов линии, вызывает заметное отставание.

Один кинетический трюк, который я редко видел, полезен для создания безмассовой анимации тысяч сегментов линии.

Сначала нарисуйте свои сегменты линии на холсте html5 за пределами экрана. Когда требуется новый сегмент линии, просто добавьте этот сегмент ко всем уже существующим сегментам. Это очень эффективно, потому что нужно провести только последний сегмент линии.

Вы можете использовать Kinetic.Image для отображения вне экрана html5 холста на экране.

Хитрость заключается в том, чтобы установить источник изображения Kinetic.Image на html-холст: myKineticImage.setImage(myOffscreenCanvas). Это работает, потому что «за кулисами» Kinetic.Image использует context.drawImage для отображения своего изображения. Так как context.drawImage также может принимать еще один холст в качестве источника изображения, вы можете эффективно отображать текущие черно-белые рисунки.

демонстрационный: http://jsfiddle.net/m1erickson/rYC96/

enter image description here

И пример код:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script> 

<style> 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 350, 
     height: 350 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 

    // variables used to set the stage and animate 
    var rectSize=15; 
    var cx=stage.getWidth()/2; 
    var cy=stage.getHeight()/2; 
    var R=100; 
    var A=0; 
    var deltaA=Math.PI/180; 
    var lastX=cx+R*Math.cos(A); 
    var lastY=cy+R*Math.sin(A); 

    // the html canvas incrementally draws the line segments 
    // which are in turn displayed as a Kinetic.Image (called line) 
    var canvas=document.createElement("canvas"); 
    var ctx=canvas.getContext("2d"); 
    canvas.width=stage.getWidth(); 
    canvas.height=stage.getHeight(); 
    ctx.strokeStyle="blue"; 
    ctx.lineWidth=2; 


    // this Kinetic.Image exactly displays the current html canvas drawings 
    // (this trick cures the lags) 
    var line=new Kinetic.Image({ 
     x:0, 
     y:0, 
     width:canvas.width, 
     height:canvas.height, 
     image:canvas 
    }); 
    layer.add(line); 


    // the rotating Kinetic.Rectangle 
    var rect = new Kinetic.Rect({ 
     x:lastX, 
     y:lastY, 
     width:rectSize, 
     height:rectSize, 
     fill:'black', 
     stroke:'red' 
    }); 
    layer.add(rect); 


    // use requestAnimationFrame (RAF) to drive the animation 
    // RAF efficiently schedules animation frames with display 
    function animate(){ 

     // stop animating when rect reaches center 
     if(R<=rectSize/2){return;} 

     // schedule another animation frame even before this one is done 
     requestAnimationFrame(animate); 

     // calc the new XY position 
     R=R-.01; 
     A+=deltaA; 
     var X=cx+R*Math.cos(A); 
     var Y=cy+R*Math.sin(A); 

     // animate the rect and line to their next position 

     // draw just the latest line segment to the canvas 
     // (all the previous line segments are still there--no need to redraw them) 
     ctx.beginPath(); 
     ctx.moveTo(lastX,lastY); 
     ctx.lineTo(X,Y); 
     ctx.stroke(); 
     // set lastXY for next frame 
     lastX=X; 
     lastY=Y; 

     // update the rect position 
     rect.setX(X); 
     rect.setY(Y); 

     // draw the changed line-image and rect to the kinetic layer 
     layer.draw(); 
    } 

    // start animating! 
    animate(); 

}); // end $(function(){}); 
</script>  
</head> 
<body> 
    <div id="container"></div> 
</body> 
</html>

источник

2014-02-02 16:43:48 markE

вас человек !! Гуру. Было бы здорово, если бы я мог следовать за вами в твиттере. Еще раз спасибо. – tanvirgeek

Как я могу улучшить производительность рисования пути анимации?

ответ

Смежные вопросы