動畫效果的實現，使用wx.createanimation
實現。具體實現時，首先，建立動畫物件，並設定相關的引數；其次，設定動畫型別，並執行動畫；第三，匯出並設定動畫資料；最後，將設定的動畫資料動態配置相應的元件，以此實現元件的動畫效果。
效果圖
**示例
***.wxml
[html]
view plain
copy
<
view
style
='width:60px;height:60px;background-color:yellow;'
animation
="}"
bindtap
='moveclick'
>
移動view
>
<
view
style
='width:60px;height:60px;background-color:red;'
animation
="}"
bindtap
='rotateclick'
>
旋轉view
>
<
view
style
='width:60px;height:60px;background-color:green;'
animation
="}"
bindtap
='alphaclick'
>
透明度view
>
<
view
style
='width:60px;height:60px;background-color:orange;'
animation
="}"
bindtap
='scaleclick'
>
縮放view
>
<
view
style
='width:60px;height:60px;background-color:blue;'
animation
="}"
bindtap
='skewclick'
>
傾斜view
>
<
view
style
='width:60px;height:60px;background-color:black;color:white'
animation
="}"
bindtap
='matrixclick'
>
變形view
>
<
view
style
='width:60px;height:60px;background-color:yellow;'
animation
="}"
bindtap
='queueclick'
>
移動\n變小\n透明
view
>
www.wxjs
[html]
view plain
copy
page(,
moveclick: function());
animation.translate((this.data.widthscreen - 60), 0).step()
this.setdata()
},
rotateclick: function(even) )
animation.rotate(180).step()
this.setdata()
},
alphaclick: function(even) )
animation.opacity(0.1).step()
this.setdata()
},
scaleclick: function(even) )
animation.scale(1.6).step()
this.setdata()
},
skewclick: function(even) )
animation.skew(160).step()
this.setdata()
},
matrixclick: function(even) )
animation.matrix(1,3,4,5,2,2).step()
this.setdata()
},
queueclick: function() );
animation.translate((this.data.widthscreen - 60), 0).scale(0.3).opacity(0.5).step()
this.setdata()
},
/**
* 生命週期函式--監聽頁面載入
*/
onload: function (options) )
},
})
} }
微信小程式的動畫效果
前言 由於公司計畫有變，所以從h5頁面改成去小程式寫。所以在著手開發小程式。本人也不是什麼前端高手，只是一名寫後端偶爾寫寫前端的渣渣。請前端大神們勿噴。二 小程式不能操縱dom 小程式不能直接操縱dom，鼓勵的是資料繫結。例如vue.js這種。所以個人而言感覺跟如果習慣了用jq去操縱dom的開發者很...
微信小程式動畫
一 自定義動畫使用步驟 1.建立動畫例項 let animation wx.createanimation duration 900 2.呼叫例項的方法 動畫執行過程 animation.opacity 0.5 scale 1.3,1.3 step opacity 1 scale 1,1 step ...
微信小程式實現卡片切換動畫效果
index.wxml 你有一封新的信件 致 by 2.index.wxss xin xin title xin border xin list xin list single nth of type 1 xin list single nth of type 2 xin list single nt...