hooks 与 animejs
2024-09-07 22:20:03
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 };
};
（完）
最新文章
- Ajax基础（小猫）
- SQL Server 变更数据捕获（CDC）监控表数据
- Linq专题之提高编码效率—— 第三篇 你需要知道的枚举类
- Android Studio Tips and Tricks
- winform C#获得Mac地址,IP地址,子网掩码,默认网关
- [转载] Go语言并发之美
- C# 子窗体点击按钮产生的新子窗体放在父窗体里
- Android -- Support包特性
- s3c-u-boot-1.1.6源码分析之一start.s
- QT QSqlQuery QSqlQueryModel
- vs2008 edit spin 十六进制实现
- Bootstrap Alert 使用
- asp.net下cookie 的基础使用
- 【剑指offer】二叉搜索树转双向链表
- .NET基础——ASSCII码表
- PHP成长之路之PHP连接MySql数据库(一)
- The `XXXX` target overrides the `HEADER_SEARCH_PATHS` build setting defined in `Pods/Target Support Files/Pods-game-desktop/Pods-game-desktop.release.xcconfig'. This can lead to prob
- [学习OpenCV攻略][001][Ubuntu安装及配置]
- Tomcat系列(9)——Tomcat 6方面调优（内存，线程，IO，压缩，缓存，集群）
- nodejs EventEmitter 发送消息