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>