用Framer+React在视图中创建动画的更简单方法
前言这不是对Framer Motion或React的介绍。它假定你已经熟悉了Framer和React,并且可能已经在视图中的滚动元素的动画方面投入了更多的工作。我想补充的是,我自己还在学习,想分享这个,因为发现了一个更简单的方法来完成这个任务,所以很兴奋。
当我第一次使用Framer Motion时,我想在一个元素进入视图端口时为它制作动画。我以为这很简单,但在看了一些YouTube视频和谷歌上的博客后,我意识到这将是一件非常麻烦的事情......直到它不存在。
我看到的每个视频和博客都建议使用react-intersection-observer 和useEffect
React代码片段
原来Framer Motion有一个道具,你可以在元素进入视野时使用。使用whileInView ,代替animate ,就可以使你的动画在进入你的视口时触发。瞧!这就对了。这简直是太简单了。用initial 来设置你的起始位置,用whileInView 来设置你的结束位置,然后再加上其他的动画属性。