文章/答案/技术大牛

发布

社区首页 >问答首页 >在同一动画循环中kinetic.js两个补间

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

Stack Overflow用户

提问于 2014-02-08 00:42:57

回答 1查看 385关注 0票数 0

我认为在动画循环中补间有一个bug。

如果您在同一个循环中创建了两个补间并播放它们，则只有第二个补间会实际触发并工作。

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

我已经尝试了不同的层，尝试将所有补间放入一个数组，尝试将对象放入一个数组。

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

javascript

kineticjs

回答 1

Stack Overflow用户

发布于 2014-02-09 02:58:31

一个动画循环每秒大约执行60次，除非你降低它的速度。

重要的是，不要在动画循环中重复使用tween.play()。

下面是在动画循环中启动并成功播放的2个补间的示例。

注意:下面boostersAway变量代码中的用于确保补间只播放一次。

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

代码：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21633223

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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