Анимация сходит с ума в KineticJS

Я пытаюсь создать эффект, когда облака плавают по экрану. Я попробовал обернуть весь процесс создания облачной формы и группы облаков внутри функции, поместив анимацию в функцию, а затем поместив эту функцию внутри setInterval. Он работает в том смысле, что анимация повторяется, за исключением того, что она неуклонно наращивает скорость и начинает идти безумно быстро.Анимация сходит с ума в KineticJS

Кто-нибудь знает, что здесь происходит? Я использовал эту же стратегию в другой части моей программы, и она хорошо работала. Единственное отличие состоит в том, что я создавал одну форму, а не три формы и группу внутри этой функции.

Пожалуйста, дайте мне знать, спасибо!

var cloudy = function(){ 

var bigCloud = new Kinetic.Group({}); 

var cloud1 = new Kinetic.Circle({ 
    x:257, 
    y:28, 
    radius:8, 
    fill:'white' 
}) 

var cloud2 = new Kinetic.Circle({ 
    x:283, 
    y:28, 
    radius:8, 
    fill:'white' 
}) 

var cloud3 = new Kinetic.Circle({ 
    x:270, 
    y:26, 
    radius:13, 
    fill:'white' 
}) 

bigCloud.add(cloud1); 
bigCloud.add(cloud2); 
bigCloud.add(cloud3); 

skyLayer.add(bigCloud); 

    cloudx=500; 

var cloudMove = new Kinetic.Animation(function(){ 
     bigCloud.setX(cloudx); 
     cloudx-=2; 
    },skyLayer); 


cloudMove.start(); 

}; 

setInterval(function(){ 
    cloudy(); 
},1000)

источник

2014-02-14 user3294779

Вы создаете новую анимацию с каждым вызовом облачно.

Каждая новая и существующая анимация перемещается bigCloud на -2.

Вот пример, который использует 1 анимацию для анимации, а также для создания новых облаков.

Демо: http://jsfiddle.net/m1erickson/jG3BL/

<!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); 

    function addCloud(){ 
     var circle1 = new Kinetic.Circle({ 
      x:30, 
      y:30, 
      radius: 10, 
      fill: randomColor(), 
     }); 
     layer.add(circle1); 
     layer.draw(); 
    } 

    var newCloudCountdown=120; 

    var cloudMove=new Kinetic.Animation(function(){ 

     var clouds=layer.getChildren(); 
     clouds.each(function(child){ 
      child.x(child.x()+.25); 
     }); 

     if(--newCloudCountdown<0){ 
      addCloud(); 
      newCloudCountdown=120; 
     } 

    },layer); 

    function randomColor(){ 
     return('#'+Math.floor(Math.random()*16777215).toString(16)); 
    } 

    // Go 
    addCloud(); 
    cloudMove.start(); 


}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <button id="myButton">Button</button> 
    <div id="container"></div> 
</body> 
</html>

источник

2014-02-14 01:03:49 markE

я, вероятно, должен был быть более ясным в моей оригинальный вопрос. Мне нужно создать цикл, в котором создается новое облако, а затем анимируется каждую секунду. Этот код хорош, но он помогает только при создании и анимации одного облака. – user3294779

Хорошо, я пересмотрел свой ответ как на анимированные существующие облака, так и на создание новых облаков. Опять же, ключ к остановке вашей «беглой» анимации - использовать только 1 анимацию. Удачи с вашим проектом! – markE

Анимация сходит с ума в KineticJS

ответ

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