Question

我正在尝试创建一个云在屏幕上浮动的效果。我尝试在函数内部创建云形状和云组的整个过程，将动画放在函数中，然后将该函数放在setInterval中。它的工作原理是动画重复，除了它稳定地建立速度并开始疯狂快速。

有人知道这里发生了什么吗？我在程序的另一部分中使用了相同的策略并且运行良好。唯一的区别是我在这个函数中创建了一个形状而不是三个形状和一个组。

请让我知道，谢谢！

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)

Answer 1

每次调用阴天时都会创建一个新动画。

每个新动画和现有动画都将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>

动画在KineticJS中变得疯狂

1 个答案: