Question

我认为动画循环中存在补间错误。

如果你在同一个循环中创建两个补间并播放它们，那么只有第二个实际触发并起作用。

第一个不适用于对象和/或不播放。

我尝试过单独的图层，尝试将所有补间放入数组中，尝试将对象放入数组中。

在同一个动画循环中创建的两个补间，只是不起作用。

Answer 1

动画循环每秒执行约60次，除非你将其限制。

在动画循环中不要重复tween.play（）非常重要。

您必须确保tween.play（）仅一次，而不是每秒重复60次。

这是一个在动画循环中开始然后成功播放的2个补间的示例。

注意：在下面的代码中，使用boostersAway变量确保补间仅播放一次。

演示：http://jsfiddle.net/m1erickson/E4MUz/

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-v4.7.2.min.js"></script>

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

    var imageURLs=[];  // put the paths to your images here
    var imagesOK=0;
    var imgs=[];
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/Shuttle.png");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/ShuttleBoosterRed.png");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/ShuttleBoosterPurple.png");
    loadAllImages(start);

    function loadAllImages(callback){
        for (var i=0; i<imageURLs.length; i++) {
            var img = new Image();
            imgs.push(img);
            img.onload = function(){ 
                imagesOK++; 
                if (imagesOK>=imageURLs.length ) {
                    callback();
                }
            };
            img.onerror=function(){alert("image load failed");} 
            img.crossOrigin="anonymous";
            img.src = imageURLs[i];
        }      
    }

    function start(){

        // the imgs[] array holds fully loaded images
        // the imgs[] are in the same order as imageURLs[]

        shuttle.setImage(imgs[0]);
        boosterLeft.setImage(imgs[1]);
        boosterRight.setImage(imgs[2]);
        layer.draw();
        animation.start();

    }


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


    var boosterLeft= new Kinetic.Image({
        x:stage.getWidth()/2-28,
        y:stage.getHeight()-128,
        width:16,
        height:128,
        image:null,
    });
    layer.add(boosterLeft);

    var boosterRight= new Kinetic.Image({
        x:stage.getWidth()/2+10,
        y:stage.getHeight()-128,
        width:16,
        height:128,
        image:null,
    });
    layer.add(boosterRight);

    var shuttle= new Kinetic.Image({
        x:stage.getWidth()/2-72/2,
        y:stage.getHeight()-122,
        width:72,
        height:122,
        image:null,
    });
    layer.add(shuttle);

    var boostersAway=false;

    var animation = new Kinetic.Animation(function(frame) {
    console.log(boosterLeft.getY());            

        var shuttleY=shuttle.getY();
        shuttle.setY(shuttleY-1);

        if(shuttleY>150){
            boosterLeft.setY(boosterLeft.getY()-1);
            boosterRight.setY(boosterRight.getY()-1);
        } else{
            if(!boostersAway){
                boostersAway=true;
                tweenLeft.play();
                tweenRight.play();
            }
        } 

        if(shuttleY<-122){animation.stop();}

    }, layer);

    var tweenLeft = new Kinetic.Tween({
      node: boosterLeft, 
      duration: 3,
      offsetX:100,
      offsetY: -200,
      rotation: -20*Math.PI/180,
    });

    var tweenRight = new Kinetic.Tween({
      node: boosterRight, 
      duration: 3,
      offsetX:-100,
      offsetY: -200,
      rotation: 20*Math.PI/180,
    });


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

</script>       
</head>

<body>
    <h4>2 Tweens started+playing in an animation loop.<br>
    The red and purple boosters are separate tweens<br>
    The animation moves the main shuttle.</h4>
    <div id="container"></div>
</body>
</html>

kinetic.js在同一动画循环中的两个补间

1 个答案: