收藏
回答

请教如何优化一个简单但导致卡顿的height过渡动画

问题模块 框架类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 wx.createAnimation 客户端 Android 6.6.2 1.9.6


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

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


最后一次编辑于  2018-02-05  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

2 个回答

  • 進
    2018-02-05

    好吧,解决了!!确实是用transform.....

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


    2018-02-05
    赞同
    回复
  • 永恒君
    永恒君
    2018-02-06

    如果你是要边滑边变淡,那小程序并不合适,

    因为 setData 的沟通成本比操作 DOM 还高,连 setData 一个 loading 都会卡顿。


    所以现在你的选择是正确的,很棒,

    只需2个状态,其他就靠 webview 端的 transition 了。

    2018-02-06
    赞同
    回复