react-hook的简单的动画插件react-simple-animate（其实是react插件，但是这里只介绍react-hook的简单用法）

Posted 2020-11-22 huangqiming

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）