英文:
Framer Motion - How do I repeat an animation without the initial part?
问题
我想使用Framer Motion在我的React项目中以非常特定的方式对一个元素进行动画。当动画首次开始时，它应该从页面底部向上移动，但一旦它到达大约中间位置，它应该只是无限地漂浮在原地，永远不返回到初始位置。
我对Framer Motion相对新手，找不到解决方案。我也尝试过关键帧，但在某个时候动画必须结束并从头开始重复。我该怎么做才能创建这种行为？谢谢。
英文:
I'd like to animate an element in a very specific way using Framer Motion on my React project. It should go up from the bottom of the page when the animation first starts, but, once it hits about middle, it should just keep floating in place indefinitely - without ever going back to its initial position.
I'm fairly new to Framer Motion and couldn't find a solution. I've tried keyframes as well, but at some point the animation has to end and repeat from the beginning. What can I do to create this kind of behavior? Thank you.
答案1
得分: 1
你可以通过第一动画的持续时间来延迟第二个动画。这样，第二个动画将在第一个部分结束后无缝启动，考虑到没有任何事件参与。例如，如果第一个动画的持续时间为5秒，将第二个动画延迟5秒。
至于使用framer-motion来实现这一点，你可以使用motion以及第一个动画的initial和animate属性，以及第二个动画的useAnimate钩子。你可以在framer-motion的文档中找到所有实现步骤。
希望这对你有帮助，祝你好运！
英文:
You could delay the second animation by the duration of the first animation. That way the second animation will seamlessly fire up as soon as the first bit ends considering there aren't any events involved. For example, if the duration of the first animation is 5 seconds, delay the second animation by 5 seconds.
As for implementing this using framer-motion, you can use the motion and the initial and animate props for the first animation and the useAnimate hook for the second animation. You can find all the steps for implementation in the framer-motion docs.
Hope this helps and good luck!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论