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>