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