标签：关键帧动画 type 方法 数组 ems inf frame lin 相同
1、useAnimate（普通anima动画的形式）
（1）js
const animate = useAnimate({
complete: { display: ‘none‘ }, //动画完成的css
easeType: "linear", //动画的表现
duration: 5, //动画时长
start: { opacity: 0 }, //动画开始
end: { opacity: 1 }, //动画结束
onComplete: () => { //动画结束的方法
console.log(‘complete‘)
}
})
（2）dom
<div style={animate.style}>123</div>
（3）动画播放方法
animate.play(true)
2、useAnimateKeyframes（关键帧动画的形式）
（1）js
const animateFrames = useAnimateKeyframes({
iterationCount: ‘infinite‘, //动画循环方式
direction: ‘alternate‘, //动画方向
duration: 5, //时长
keyframes: [
‘transform: rotateX(0) rotateY(0) rotateZ(0)‘,
‘transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)‘,
]
})
（2）其余与上面相同，只是在原来就有play方法的前提下多了一个pause的方法
3、useAnimateGroup（数组的形式）
（1）js
const items = [‘R‘, ‘E‘, ‘A‘, ‘C‘, ‘T‘]
const animateGroup = useAnimateGroup({
sequences: items.map(() => ({
start: { opacity: 1, transform: ‘translateY(0)‘ },
end: { opacity: 0, transform: ‘translateY(-10px)‘ }
}))
})
（2）整体与anima方式相同，就是以数组的形式，就是变为"styles"
注意：在方法中包装了isPlaying和setIsPlaying，所以如果一个方法中包含多个动画，会产生互相影响（关键帧动画同理，isPaused和setIsPaused）
react-hook的简单的动画插件react-simple-animate（其实是react插件，但是这里只介绍react-hook的简单用法）
标签：关键帧动画 type 方法 数组 ems inf frame lin 相同
原文地址：https://www.cnblogs.com/huangqiming/p/11884467.html
