小程序-滚动驱动动画

官网：动画 | 微信开放文档

结构代码：

获取小程序页面实例：

// 获取页面栈

const pages = getCurrentPages()

// 获取当前页面实例，数组最后一项

const pageInstance = pages.at(-1) as any

// 页面渲染完毕，绑定动画效果   onReady  相当于 vue 中的onMounted

onReady(() => {

  // 动画效果

  pageInstance.animate(

    '.navbar',

    [{ backgroundColor: 'transparent' }, { backgroundColor: '#f8f8f8' }],

    1000,

    {

      scrollSource: '#scroller', // scroll-view 的选择器

      startScrollOffset: 0, // 开始滚动偏移量

      endScrollOffset: 50, // 停止滚动偏移量

      timeRange: 1000, // 时间长度

    },

  )

  // 动画效果,导航栏标题

  pageInstance.animate('.navbar .title', [{ color: 'transparent' }, { color: '#000' }], 1000, {

    scrollSource: '#scroller',

    timeRange: 1000,

    startScrollOffset: 0,

    endScrollOffset: 50,

  })

  // 动画效果,导航栏返回按钮

  pageInstance.animate('.navbar .back', [{ color: '#fff' }, { color: '#000' }], 1000, {

    scrollSource: '#scroller',

    timeRange: 1000,

    startScrollOffset: 0,

    endScrollOffset: 50,

  })

})

效果展示：