Question

<script>
        var stage = new Kinetic.Stage({
            container: 'container',
            width: 800,
            height: 600
        });

        var layer = new Kinetic.Layer();

        var image = new Image();
        var image2 = new Image();
        var newX = 500;
        var animations = {
        pos1: [{
            x: 32,
            y: 32,
            width: 32,
            height: 32
            },
            {
            x: 64,
            y: 32,
            width: 32,
            height: 32
            },
            {
            x: 96,
            y: 32,
            width: 32,
            height: 32
            },{
            x: 128,
            y: 32,
            width: 32,
            height: 32
            },
            {
            x: 160,
            y: 32,
            width: 32,
            height: 32
            },
            {
            x: 32,
            y: 0,
            width: 32,
            height: 32
            },],



        };

        image.onload = function() {

            var anim = new Kinetic.Sprite({
                x: 100,
                y: 100,
                image: image,
                animation: 'pos1',
                animations: animations,
                frameRate: 10
                });
            layer.add(anim);

            stage.add(layer);
            anim.start();

        };



    //image.src = 'myimgsrc';
</script>

开始一个Sprite动画。它是一个能够做散步动画的角色，现在我想让他从一个点到另一个点可能有一个按钮或什么东西.. 我现在的问题是，如何用x = 100的动画缓慢移动这个精灵 x = 700并停止动画？

Answer 1

您可以使用transitionTo进行移动：

anim.transitionTo({
  x : 200,
  duration: 3
 });

如果您需要在移动后停止精灵动画：

setTimeout(function(){
  anim.stop();
},3000);

示例：http://jsfiddle.net/lavrton/7C6Mn/

将动力学精灵移动到特定点

1 个答案: