javascript - 如何在成帧器运动中多次使用动画
问题描述
就像在标题中一样,我试图在单击按钮时多次为我的组件设置动画。目前,动画只运行一次,然后它就不再工作了,我怎么可能实现它
这是我正在尝试做的一个例子:
const controls = useAnimation();
const handleClick = (e) => {
controls.start({
rotate: "360deg",
});
};
return(
<motion.button onClick={handleClick}>Button</motion.button>
<motion.div className="someRect" animate={controls}></motion.div>
)
解决方案
老实说,我从未使用过 useAnimation 控件,所以我不知道这里发生了什么以及如何使用您的方法克服这个障碍,但是您可以通过这样的方式实现您所追求的目标。
<button onClick={() => setRotate((prevState) => prevState + 360)}>
Button
</button>
<motion.div
className="someRect"
animate={{
rotate: rotate,
transition: { duration: 3 }
}}
style={{ width: "100px", height: "100px", background: "red" }}
>
</motion.div>
我知道这个解决方案并不是最优的,因为状态会随着每次点击而增长并增长到可能非常大的大小,这可能会在某些时候导致问题。
在这个CodeSanbox中检查我的解决方案
希望也许有人会想出一个更优雅的解决方案,我也很高兴看到。
推荐阅读
- math - 将两个笛卡尔(来自球体)坐标相加,存储没有四元数的方向
- bash - xdotool 没有调整 chrome 页面的大小
- r - 将重复的列组合成一列数据框 r
- import - Rust:根目录中没有“模块”
- docker - 加快Docker内部时间的方法?
- python - Django:如何使用 MySQL 数据库检索最新的、唯一命名的记录的查询集
- html - 如何将html中的文本居中?
- reactjs - 在 React 应用程序中从服务器而不是客户端进行 ajax 调用?
- time - 你好,谁能帮我用 Pine Script 中的时间函数?
- youtube - 很难构建 youtube/cobalt,当我构建它时,有很多问题