如何在 duxapp 中开发一个兼容 RN 的动画库

Taro 一直以来都没有一个能兼容 RN 的动画方案，duxapp 中扩展了 createAnimation 方法，让这个方法兼容了 RN 端，下面让我们来看看实现思路

createAnimation方法

这个方法是用来创建一个动画实例的，使用方法像下面这样，每次 step 创建一组动画，每组动画同时执行，执行完一组继续执行下一组，直到所有的动画执行完

const an = createAnimation()
  .translate(50, 50).rotate(180).step()
  .translate(0, 0).rotate(0).step()
  .export()

将创建的结果设置给 View 的 animation 属性，这个动画就能被执行了

在 Taro 里面这个方法目前兼容小程序 和 H5 端，我们要实现的就是让他兼容 RN，这样后面要给我们的组件加动画就更加简单了，不用在要加动画的组件 H5 写一套，RN 再写一套

RN的动画方案

RN 里面的动画和 createAnimation 这个方式可以说是天差地别，下面来看这个实现淡入动画的代码，这是一个官方示例

import React, { useRef, useEffect } from 'react';
import { Animated, Text, View } from 'react-native';

const FadeInView = (props) => {
  const fadeAnim = useRef(new Animated.Value(0)).current  // 透明度初始值设为0

  React.useEffect(() => {
    Animated.timing(                  // 随时间变化而执行动画
      fadeAnim,                       // 动画中的变量值
      {
        toValue: 1,                   // 透明度最终变为1，即完全不透明
        duration: 10000,              // 让动画持续一段时间
      }
    ).start();                        // 开始执行动画
  }, [fadeAnim])

  return (
    <Animated.View                 // 使用专门的可动画化的View组件
      style={{
        ...props.style,
        opacity: fadeAnim,         // 将透明度绑定到动画变量值
      }}
    >
      {props.children}
    </Animated.View>
  );
}

好在 RN 的动画库本身是很强大的，我们要做的是在 RN 端模拟实现一个 createAnimation, 还是有办法解决的

实现

要实现 RN，我们需要两步

• 1、编写一个类，用来模拟 createAnimation 方法，通过这个类创建一些动画数据
• 2、将这个类创建的数据传递给一个自定义组件，这个组件里面将这些数据解析成动画，并执行这些动画

创建 Animation 类

这个类就比较简单，模拟 createAnimation 每一个方法即可，并在 export() 之后生成一个数据并返回，因代码过长，下面是部分代码展示

export const create = option => new Animation(option)

class Animation {

  constructor(option = {}) {
    if (!option.duration) {
      option.duration = 400
    }
    if (!option.timingFunction) {
      option.timingFunction = 'linear'
    }
    if (!option.delay) {
      option.delay = 0
    }
    if (!option.transformOrigin) {
      option.transformOrigin = '50% 50% 0'
    }
    this.defaultOption = option
  }

  result = []

  current = {}

  export() {
    const res = this.result
    this.result = []
    return res
  }

  step(option) {
    if (Object.keys(this.current).length) {
      this.result.push({
        option: {
          ...this.defaultOption,
          ...option
        },
        action: this.current
      })
      this.current = {}
    }
    return this
  }

  set(name, value) {
    this.current[name] = value
    return this
  }

  translate(x, y) {
    this.translateX(x)
    return this.translateY(y)
  }

  translate3D(x, y, z) {
    this.translateX(x)
    this.translateY(y)
    return this.translateZ(z)
  }

  translateX(val) {
    return this.set('translateX', val)
  }

  translateY(val) {
    return this.set('translateY', val)
  }

  translateZ(val) {
    return this.set('translateZ', val)
  }
}

创建组件实现动画

这个地方相对会复杂一些，其中的难点有几个

• 在小程序上的动画，是会根据 css 的默认值去执行变化的，但是 RN 上的默认值需要在动画中设置，因此，需要获取这个默认值
• 将动画拆分成适合 RN 端动画组件的 style 属性

此处代码过长,可以前往 github 查看，或者使用 duxapp 创建项目之后就能看到

使用

动画库写好之后我们就能给我们原有的一些组件进行改造了，例如 PullView，在这之前，这个组件是针对 RN 端和其他端写了两套代码的，现在只需要一套代码就实现了，下面的示例代码展示了这个组件动画实现方式

import { isValidElement, cloneElement, forwardRef, useState, useEffect, useRef, useImperativeHandle, useCallback } from 'react'
import { View } from '@tarojs/components'
import { asyncTimeOut, nextTick, px, pxNum, transformStyle, useBackHandler } from '@/duxapp/utils'
import { Absolute } from '../Absolute'
import { Animated } from '../Animated'
import './index.scss'

export const PullView = forwardRef(({
  side = 'bottom',
  style,
  overlayOpacity = 0.5,
  children,
  masking = true,
  group,
  onClose,
  modal,
  mask = modal,
  duration = 200
}, ref) => {

  const [mainAn, setMainAn] = useState(Animated.defaultState)

  const [maskAn, setMaskAn] = useState(Animated.defaultState)

  const ans = useRef()

  const refs = useRef({})
  refs.current.onClose = onClose
  refs.current.overlayOpacity = overlayOpacity

  const translate = siteTranslates[side]

  const close = useCallback(async () => {
    let an = ans.current.main
    if (side === 'center' && process.env.TARO_ENV !== 'rn') {
      an = an.translate('-50%', '-50%')
    }
    setMainAn(an[translate.key](pxNum(translate.value)).opacity(0).step(
      process.env.TARO_ENV !== 'rn' ? {
        transformOrigin: '25% 25% 0'
      } : {}
    ).export())
    setMaskAn(ans.current.mask.opacity(0).step().export())
    await asyncTimeOut(duration)
    refs.current.onClose?.()
  }, [duration, side, translate.key, translate.value])

  useBackHandler(close, !mask)

  useImperativeHandle(ref, () => {
    return {
      close
    }
  })

  useEffect(() => {
    nextTick(() => {
      if (!ans.current) {
        ans.current = {
          main: Animated.create({
            duration,
            timingFunction: 'ease-in-out'
          }),
          mask: Animated.create({
            duration,
            timingFunction: 'ease-in-out'
          })
        }
      }
      if (side === 'center') {
        let an = ans.current.main.scale(1).opacity(1)
        if (process.env.TARO_ENV !== 'rn') {
          an = an.translateX('-50%').translateY('-50%')
        }
        setMainAn(an.step().export())
      } else {
        setMainAn(ans.current.main.translateX(0).translateY(0).opacity(1).step().export())
      }
      setMaskAn(ans.current.mask.opacity(refs.current.overlayOpacity).step().export())
    })
  }, [duration, side])

  return <Absolute group={group}>
    {masking && <Animated.View
      animation={maskAn}
      className='PullView'
    >
      <View className='PullView__other'
        onClick={() => {
          if (mask) {
            return
          }
          close()
        }}
      ></View>
    </Animated.View>}
    <Animated.View
      animation={mainAn}
      className={`PullView__main PullView__main--${side}`}
      style={{
        ...style,
        transform: transformStyle(side === 'center' ? {
          translateX: '-50%',
          translateY: '-50%',
          scaleX: 0.4,
          scaleY: 0.4
        } : {
          [translate.key]: px(translate.value)
        })
      }}
    >
      {
        isValidElement(children) ?
          cloneElement(children, {
            style: {
              ...children.props.style,
              ...(side === 'center'
                ? {}
                : side === 'bottom' || side === 'top'
                  ? { width: '100%' }
                  : { height: '100%' })
            }
          }) :
          children
      }
    </Animated.View>
  </Absolute>
})

const siteTranslates = {
  top: { key: 'translateY', value: -200 },
  bottom: { key: 'translateY', value: 200 },
  left: { key: 'translateX', value: -200 },
  right: { key: 'translateX', value: 200 },
  center: { key: 'scale', value: 0.4 }
}

最后

当然这个动画也不是完美的，只是实现了一个基础的动画，甚至使用的时候还有诸多的限制，你可以点击下面的动画文档查看详细的使用方法以及限制

Animated 动画文档

开发文档

GitHub