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

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/