01.04 愛碼哥開發進階｜動畫效果Animator開發預覽

控件的移動，縮放，旋轉，淡入淡出等動畫效果。

​

控件方法

imag.js中每個可顯示的控件都有一個animate()方法，animate()方法返回的是一個Animator對象。

控件樣式

animate()的options參數

Animator方法

設置淡入淡出(Alpha)動畫

 
<imag> 
 
 <page>
 <title>
 <center>
 <label>淡入淡出(Alpha)/<label>
 /<center>
 /<title>
 <content> 
 <button>淡入淡出/<button> 
 <label>測試文本/<label>
 /<content>
 /<page>
/<imag> 

移動(Translate)

設置translationX和translationY，值可以為正數或負數。如果值為數字，如100或-100，表示移動至某一位置；如果值為字符串，如“+=100”或“-=100”，表示位置在原來的基礎上增加或減少100。

 
<imag>
  
 <page>
 <title> 
 <center> 
 <label>移動(Translate)/<label> 
 /<center>
 /<title>
 <content>
 <button>移動至/<button> 
 <button>正向移動/<button> 
 <button>負向移動/<button>
 <label>測試文本/<label> 
 /<content> 
 /<page>
/<imag> 

縮放(Scale)

設置scale, scaleX, scaleY，其中設置scale會同時設置scaleX和scaleY。

可以通過控件的transform-origin樣式來設置縮放原點，transform-origin的默認值為50% 50%，即中點是原點。

關於transform-origin可以參考css3裡的用法:transform-origin

旋轉(Rotate)

設置rotation（繞Z軸旋轉）, rotationX（繞X軸旋轉）, rotationY（繞Y軸旋轉）。

rotation設置為數字，比如90或-90，表示旋轉至多少度；rotation設置為字符串比如“+=90”或“-=90”，“+=90”表示角度增加90度，“-=90”表示角度減少90度。

可以通過transform-origin樣式來設置旋轉原點，transform-origin的默認值為50% 50%，即中點是原點。

關於transform-origin可以參考css3裡的用法:transform-origin

傾斜(Skew)

skewX和skewY設置為數字，表示傾斜角度；skewX和skewY設置為字符串比如“+=20”或“-=20”，“+=20”表示角度增加20，“-=20”表示角度減少20。

愛碼哥（iMAG）是一款專門用來開發手機APP的工具軟件，它同時具備幾大特點：1.跨平臺開發的效率工具，大幅降低APP開發門檻；2.愛碼哥擁有強大的集成能力，高度模塊化、插件化的開發方式使得用戶可以在短時間裡整合海量功能；3.愛碼哥雲平臺（http://imagjs.com）基於雲技術為開發者和企業提供一體化（All In One）的完備服務。