动画在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里疯狂

回答

相关问题