uniapp vue3 如何实现navbar滚动动画学习记录

前言

在最近的学习中，刚好就学习到了滚动动画效果，来进行一波总结和记录

在小程序开发中滚动动画效果应该是非常常见的效果之一，加上动画效果可以让我们的小程序页面更加生动一点，不会变得生硬，视觉也比较舒服。

效果图

接下来我们来实现这种动画效果吧

实现效果

在小程序中的文档中有一个api就是我们的animate，我们可以通过使用这个api来制作滚动动画,我们可以在我们的onReady生命周期函数中，使用这个api,我们使用这个api必须先要获取一些页面栈中的页面实例，通过页面实例绑定我们这个api

//获取页面栈
const pages = getCurrentPages()
// 获取页面实例，数组的最后一项是
const pageInstance = pages.at(-1) as any

// 动画效果,导航栏背景色
  pageInstance.animate(
    '.navbar', // 选择器
    [{ backgroundColor: 'transparent' }, { backgroundColor: '#f8f8f8' }], // 关键帧信息
    1000, // 动画持续时长
    {
      scrollSource: '#scroller', // scroll-view 的选择器
      startScrollOffset: 0, // 开始滚动偏移量
      endScrollOffset: 50, // 停止滚动偏移量
      timeRange: 1000, // 时间长度
    },
  )

第一个参数：选择器，你需要为谁设置动画效果

第二个参数：是一个数组，这里面是你需要制作的动画效果关键帧

第三个参数：是动画持续的时间

第四个参数是我们的回调函数这里面设置的是什么时候触发动画动画执行的时间是多长

知道这几个参数的作用了，我们就可以设置动画效果了

代码实现

//获取页面栈
const pages = getCurrentPages()
// 获取页面实例，数组最后一项
const pageInstance = pages.at(-1) as any

// 页面渲染完毕，绑定动画效果
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,
  })
})

动画效果制作完毕