Taro（微信小程序端）-滚动驱动型动画

本文介绍了在Taro微信小程序中如何实现滚动驱动型动画，通过使用Taro的animate方法，避免了频繁更新数据导致的卡顿问题。文章详细讲解了animate方法的定义、限制及使用注意事项，并提供了示例代码。

1.动机

在某些需求场景下需要滚动的时候触发一些动画，那么怎么在Taro中实现类似的行为呢？一般会考虑使用 usePageScroll根据滚动的距离去触发动画，但是这种方法性能不好，如果在滚动的时候频繁的触setData会导致卡顿

那么什么是比较好的方法呢？下面介绍下Taro内的animate方法（经测试h5端无法使用）

先看下效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pq2IySrU-1655186543957)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f09df774ac1a46ad8283da68880d0112~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

2.animate方法

先来看下定义

animate(selector, keyframes, duration, ScrollTimeline)

属性	类型	必填	说明
selector	String	是	选择器
keyframes	Array	是	关键帧信息
ScrollTimeline	Object	是	绑定滚动元素的配置

keyframes是一个数组，数组的每项类似以下表格内容：

属性	类型	默认值	必填	说明
offset	Number		否	关键帧的偏移，范围[0-1]
ease	String	linear	否	动画缓动函数
transformOrigin	String	否	基点位置，即 CSS transform-origin
可选的css属性	String		否

ScrollTimeline中对象的结构

属性	类型	默认值	必填	说明
scrollSource	String		是	指定滚动元素的选择器（只支持 scroll-view），该元素滚动时会驱动动画的进度
orientation	String	vertical	否	指定滚动的方向。有效值为 horizontal 或 vertical
startScrollOffset	Number		是	指定开始驱动动画进度的滚动偏移量，单位 px
endScrollOffset	Number		是	指定停止驱动动画进度的滚动偏移量，单位 px
timeRange	Number		是	起始和结束的滚动范围映射的时间长度，该时间可用于与关键帧动画里的时间 (duration) 相匹配，单位 ms

此方法的几个限制：

h5端无法使用
ScrollTimeline暂时只能绑定ScollView元素

3.使用方法

//获取animate方法
const animate = Taro.getCurrentInstance()?.page?.animate;
//定义动画，以下是定义在0-85滚动距离内头像的动画（上面实例的头像）
animate(
  ".avatar",
  [
    {
      borderRadius: "0",
      borderColor: "red",
      transform: "scale(1) translateY(-20px)",
      offset: 0,
    },
    {
      borderRadius: "25%",
      borderColor: "blue",
      transform: "scale(.65) translateY(-20px)",
      offset: 0.5,
    },
    {
      borderRadius: "50%",
      borderColor: "blue",
      transform: `scale(.3) translateY(-20px)`,
      offset: 1,
    },
  ],
  2000,
  {
    scrollSource: "#scroller",
    timeRange: 2000,
    startScrollOffset: 0,
    endScrollOffset: 85,
  }
);

注意事项：

必须在元素渲染到页面上后再定义动画，也就是说在useReady()中定义。
如果useReady()定义也无效，建议包裹在Taro.nextTick中

tip:在微信小程序开发工具中无法看到触发动画时元素css变化

4.结尾

其他示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hgHlZHli-1655186543958)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a24c6f6204c4eb09595fcbdd980c14e~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

原微信小程序文档

示例Taro源代码