我就是想要做一個搜索欄隨著下滑漸隱，隨著上滑漸出的動畫，但是找不到流暢的解決方案一開始嘗試用transition屬性，判斷下滑方向和搜索欄顯示狀態，當兩者不一致時更新搜索欄height值。在電腦上看著效果很好，但是用安卓測試的時候卡頓嚴重：var?now?=?e.detail.scrollTop
var?last?=?this.data.scrollTop
var?scrollDown?=?this.data.scrollDown
var?sHeight?=?this.data.sHeight
if?((now?>?last?&&?!scrollDown)?||?(now?<?last?&&?scrollDown))?{
??sHeight?=?40-sHeight
??this.data.scrollDown?=?!scrollDown
??this.setData({
????sHeight:?sHeight
??})
}
this.data.scrollTop?=?e.detail.scrollTop然后嘗試使用微信的animation API，然而卡頓依然嚴重：var?animation?=?wx.createAnimation({
??duration:?500,
??timingFunction:?"ease"
})
this.animation?=?animation
if?((now?>?last?&&?!scrollDown)?||?(now?<?last?&&?scrollDown))?{
??this.data.scrollDown?=?1?-?scrollDown
??this.animation.scale(scrollDown).step()
??this.setData({
????sHeightAnim:?this.animation.export()
??})
}
this.data.scrollTop?=?e.detail.scrollTop查了一下感覺transform和animation的運行效率也差不多，畢竟也是要走transition所以有沒有大佬可以提供一個較好的解決方案orz跪謝
【小程序】請教如何優化一個簡單但導致卡頓的過渡動畫
cosloli
2018-02-05 19:40:43
