hooks 与 animejs

本文写于 2020 年 1 月 13 日

animejs 是现如今非常不错的一个 js 动画库。我们将其与 React Hooks 融合，使它更方便的在 React 中使用。

最终效果：

const Animate: React.FC = () => {   const { animateTargetRef, animationRef } = useAnime({     translateX: 300,     loop: true,     duration: 2000,     autoplay: false,   });    useEffect(() => {     setTimeout(() => {       animationRef.current?.play?.();     }, 3000);   }, [animationRef]);    return (     <div       ref={animateTargetRef}       style={{ width: '100px', height: '100px', backgroundColor: 'black' }}     />   ); }; 

首先看看 animejs 在一般的 JS 和 HTML 中如何使用：

<div class="xxx"></div> 

import anime from 'animejs';  const animation = anime({   translateX: 300,   loop: true,   duration: 2000,   autoplay: false,   targets: '.xxx', });  animation.play(); 

但是在 React 中，我们不想要到处写这些玩意儿。我们喜欢 hooks！

所以我们可以封装一个 useAnime hook。

第一步，我们可以引入 AnimeParams，让我们的 hook 拥有代码提示：

import anime, { AnimeParams } from 'animejs';  export const useAnime = (props: AnimeParams) => {   anime(props); }; 

然后我们通过 useRef 将 anime 的 targets 绑定，并且暴露出去，供其他地方使用。

//... const animateTargetRef = useRef<any>(null);  useLayoutEffect(() => {   if (!animationTargetRef.current) {     console.warn('please bind animation target ref');     return;   }   animate({     ...props,     targets: [animationTargetRef.current],   }); }, [props]);  return { animateTargetRef }; //... 

通过观察发现，animate 返回的是 AnimeInstance 类型，我们从 animejs 中导入：

import anime, { AnimeParams, AnimeInstance } from 'animejs';  // ...  const animationRef = useRef<AnimeInstance>();  // ... animationRef.current = animate({   ...props,   targets: [animationTargetRef.current], }); // ...  return { animateTargetRef, animationRef }; 

这样就轻松完成了 useAnime 的封装。

完整代码：

import anime, { AnimeParams, AnimeInstance } from 'animejs'; import { useRef, useLayoutEffect } from 'react';  export const useAnime = (props: AnimeParams = {}) => {   const animateTargetRef = useRef<any>();   const animationRef = useRef<AnimeInstance>();    useLayoutEffect(() => {     if (!animateTargetRef.current) {       console.warn('please bind the anime ref while useAnime');       return;     }     animationRef.current = anime({       ...props,       targets: [animateTargetRef.current],     });   }, [props]);    return { animateTargetRef, animationRef }; }; 

（完）