和MAX一起學編程（五）-讓垃圾桶“動”起來

前言MAX馬上就要生初一了，之前學過一段時間python語言，對計算機編程有濃厚興趣。可原先在PC上寫的代碼，執行的結果也只能在PC上顯示，效果也不夠酷炫。聽說爸爸有辦法可以讓代碼執行後在手機上秀出來，就很好奇，決定利用這個暑期好好學一下。

上期在愛碼哥用代碼寫了垃圾數據和不同垃圾桶圖片後是下圖這樣的靜態頁面效果：

​

靜態頁面效果

在垃圾分類應用中我想設計成根據垃圾選擇垃圾桶時出現不同的動畫效果來直觀顯示是否選擇正確。選擇錯誤會出現錯誤的動畫效果，選擇正確出現正確的動畫的同時跳到下一題。根據這樣的想法我在愛碼哥技術文檔裡找了可以實現這種效果的控件。

在技術文檔中找到了動畫（animator）控件，這個控件的方法是animate（option：Object），imag.js中每個可顯示的控件都有一個animate()方法，可以使這些控件產生移動、縮放、旋轉、淡入淡出等動畫效果。下面來看看怎麼實現的吧。

選擇正確的垃圾桶會顯示下面的動態效果

代碼

function play2(img){
 img.animate({
 easing: 'Ease In', //easing是動畫緩動曲線函數，Ease In表示加速運動
 scale: 1.1,
 duration: 200,
 complete: function(){
 img.animate({
 easing: 'default',
 scale: 0.9, //scale表示縮放效果，數值為1.1會變為原來的1.1倍，數值為0.9會變為原來的9/10
 duration: 150, //duration表示動畫播放持續多少毫秒，默認為1000
 complete: function(){
 img.animate({
 easing: 'Ease Out', //Ease Out表示減速運動
 scale: 1,
 duration: 200,
 });
 }
 });
 }
 });
}

3張同樣的圖片，每一張圖片通過不同動畫組合達到一定的動畫效果，首先將第一張圖片用scale放大1.1倍並持續200毫秒（duration: 200），第二張圖片縮小0.9倍並持續150毫秒，最後一張放大1倍，持續200毫秒，疊加組合達到放大縮小的動畫效果。

選擇錯的垃圾桶會顯示下面的動態效果

代碼

function play(img){
 img.animate({
 rotation: -15, //rotation設置為數字，比如90或-90，表示繞Z軸旋轉至多少度
 scale: 0.8,
 easing: 'Ease In',
 duration: 200,
 complete: function(){
 img.animate({
 rotation: 15,
 duration: 100,
 complete: function(){
 img.animate({
 rotation: -15,
 duration: 100,
 complete: function(){
 img.animate({
 rotation: 15,
 duration: 100,
 complete: function(){
 img.animate({
 rotation: -15,
 duration: 100,
 complete: function(){
 img.animate({
 rotation: 0,
 scale: 1,
 duration: 200
 });
 }
 });
 }
 });
 }
 });
 }
 });
 }
 });
}

第一張圖片首先縮小0.8倍並向左旋轉15度（rotation: -15）；第二張向右旋轉15度（rotation: 15），接下來的三張圖片向左、向右、向左各旋轉15度，最後一張圖旋轉0度並放大1倍，各自設置持續的時間，六張圖片疊加組合達到左右旋轉的動態效果。

成功編寫這兩個動畫效果後，我的垃圾分類應用基本就可以完成啦。下期會和大家分享完整的應用效果和代碼講解，下期見嘍！

歷史文章：