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

Question

I think there is a bug with tweens in an animation loop. 我认为动画循环中存在补间错误。

If you create two tweens in the same loop and play them only the second actually fires and works. 如果您在同一循环中创建两个补间并播放它们，则仅第二个实际触发并起作用。

The first doesn't apply to the object and/or doesn't play. 第一个不适用于该对象和/或不播放。

I've tried separate layers, tried putting all the tweens in an array, tried putting objects in an array. 我尝试了单独的图层，尝试将所有补间放置在数组中，尝试将对象放置在数组中。

Two tweens created in the same animation loop, just don't work. 在同一个动画循环中创建两个补间，只是不起作用。

Answer 1

An animation loop executes about 60 times per second unless you throttle it down. 动画循环每秒执行约60次，除非您降低它的速度。

It's important that you don't repeatedly tween.play() inside the animation loop. 重要的是，不要在动画循环内重复tween.play（）。

You must be sure you tween.play() only once and not repeatedly 60 times per second. 您必须确保仅一次tween.play（）且每秒不重复60次。

Here's an example of 2 tweens started within an animation loop and then successfully playing. 这是一个在动画循环中开始并成功播放的2个补间的示例。

Note: In the code below the boostersAway variable is used to be sure the tweens are played only once. 注意：在boostersAway变量下面的代码中，用于确保补间仅播放一次。

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

在此处输入图片说明

Code: 码：

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

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

问题描述

1 个解决方案

解决方案1
1 2014-02-08 18:58:30

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

问题描述

1 个解决方案

解决方案1 1 2014-02-08 18:58:30

解决方案1
1 2014-02-08 18:58:30