用Framer+React创建滚动触发动画的简单方法

743 阅读1分钟

用Framer+React在视图中创建动画的更简单方法

前言这不是对Framer MotionReact的介绍。它假定你已经熟悉了Framer和React,并且可能已经在视图中的滚动元素的动画方面投入了更多的工作。我想补充的是,我自己还在学习,想分享这个,因为发现了一个更简单的方法来完成这个任务,所以很兴奋。

当我第一次使用Framer Motion时,我想在一个元素进入视图端口时为它制作动画。我以为这很简单,但在看了一些YouTube视频和谷歌上的博客后,我意识到这将是一件非常麻烦的事情......直到它不存在。

我看到的每个视频和博客都建议使用react-intersection-observeruseEffect

React代码片段

原来Framer Motion有一个道具,你可以在元素进入视野时使用。使用whileInView ,代替animate ,就可以使你的动画在进入你的视口时触发。瞧!这就对了。这简直是太简单了。用initial 来设置你的起始位置,用whileInView 来设置你的结束位置,然后再加上其他的动画属性。

就像魔术一样!