如何在 duxapp 中开发一个兼容 RN 的动画库
· 阅读需 7 分钟
duxapp框架作者
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 }
}
最后
当然这个动画也不是完美的，只是实现了一个基础的动画，甚至使用的时候还有诸多的限制，你可以点击下面的动画文档查看详细的使用方法以及限制
