KineticJS教程（7）

KineticJS教程（7）

做者: ysm

 7.图形变换

7.1.线性变化

Kinetic提供了一个图形对象的transitionTo(config)方法实现图形的线性变换，也就是从原始的状态线性变换到新的状态，这里的状态是指的尺度上的参数。方法的config参数也就是有关图形尺度的一些参数，好比 x， y， rotation， width， height， radius， strokeWidth， alpha， scale， centerOffset等。除了这些尺度参数，还须要一个duration参数，单位是秒，也就是指定这种线性变换是在多长时间内变换完成。

好比，下面代码实现图形在两秒钟内从原位置移动到横坐标100处，并逐渐变成透明：

<script>

shape.transitionTo({

x: 100,

alpha:0,

duration:2

});

</script>

7.2.变换中的速度

Kinetic的transitionTo(config)方法中的config参数包括一个easing属性，是指的变换是以较均匀的速度到达变换目的点仍是在变换过程当中在不一样位置以不一样速度进行变换。Easing能够设定的值包括ease-in、 ease-out、 ease-in-out、 back-ease-in、 back-ease-out、 back-ease-in-out、 elastic-ease-in、 elastic-ease-out、 elastic-ease-in-out、 bounce-ease-in、 bounce-ease-out、 bounce-ease-in-out、 strong-ease-in、 strong-ease-out以及 strong-ease-in-out。

在文章里很难形容这些值之间的不一样，仍是具体写成代码，在浏览器里看效果吧。

<script>

shape.transitionTo({

x: 100,

duration: 1,

easing: ‘ease-out’

});

</script>

7.3.变换完成后的回调方法

Kinetic的transitionTo(config)方法中的config参数还包括一个回调方法属性，这个方法会在变换完成后被执行。

<script>

shape.transitionTo({

x: 100,

duration: 1,

easing: “bounce-ease-out”,

callback: function() {

alert(“transition complete!”);

}

});

</script>

7.4.变换的开始与结束

当执行transitionTo方法的时候能够返回一个对象变量，并用这个对象的 start()、 stop() 和 resume()方法来启动、中止和恢复转换的执行。

<script>

var trans = shape.transitionTo(config);

 

// 开始转换

trans.start();

 

// 中止转换

trans.stop();

 

// 恢复转换

trans.resume();

</script>