【小程序】请教如何优化一个简单但导致卡顿的过渡动画

Question

我就是想要做一个搜索栏随着下滑渐隐，随着上滑渐出的动画，但是找不到流畅的解决方案

一开始尝试用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跪谢

Answer 1

好吧，解决了！！确实是用transform.....

handleScroll: function(e){
var now = e.detail.scrollTop
var last = this.data.scrollTop
var scrollDown = this.data.scrollDown
if ((now > last && !scrollDown) || (now < last && scrollDown))
{
scrollDown = this.data.scrollDown = 1 - scrollDown
this.setData({
hidden: scrollDown ? 'transform: translateY(-60px);':'',
})
}
this.data.scrollTop = now
console.log(now)
},
​

Answer 2

怎么优化来着？

Answer 3

做过类似的动画。判断上下滑动方向，然后客服图标滑出和滑入可视区域。根据自己多次尝试，和官方文档，动画卡最主要的原因是页面元素太多。
我的页面有个分页，初始数据10条，当分页数据加载到50、60条左右，真机开始出现动画卡顿。（用的方法就是trasition，做wxss属性的动画效果）

我的优化方法是
1、首先一个是减少页面元素，尽可能减少出现频率少的节点，用wx:if
2、少用全局绝对定位元素（这个一般不会写太多绝对定位）
3、防抖和节流去决定动画执行的时机
4、最后一点，我在完成前几个优化后，仍然出现卡顿，这时候再尝试用wx提供的动画接口createAnimation去做，自测超过100条数据也不会出现卡顿。

所以我觉得wx提供的api 是从jsBridge底层调用的。而 wxss 转成样式属性，再到底层解析到页面渲染，过程会没那么高效。