NextJS，framer motion:如何使动画只在初始页面加载时启动，并每12小时重置一次

Question

我有一个网站，它的主页加载了一个帧器运动动画。如何使动画仅在初始页面加载时触发，而不是在刷新页面/从一个页面切换回主页时触发？我使用的是NextJS，所以本地存储只有在useEffect((钩子内的第一次渲染之后才可用。有没有一种方法可以在motion.div动画启动后调用回调？我正在考虑在动画之后设置本地存储。

Answer 1

根据文档，您可以通过将initial道具的值设置为false而不是当前的animation properties(与animate道具相同(来禁用动画(停止射击(。

设置为false以使用animate中的值进行初始化(禁用装载动画(。

也许为了实现你想要的，你可以简单地使用useState来解决：

const [runAnimation,setRunAnimation] = React.useState(false)
React.useEffect(()=>{
/* Some logic to know whether the user has run animation before */
const needToRunAnimation = ...
if (needToRunAnimation){
setRunAnimation(yourAnimationProperty)
}
},[])

然后，可以将runAnimation属性应用于成帧器运动组件，以控制动画是否会激发。