framerx使⽤教程_如何使⽤FramerMotion将交互式动画和页⾯
过渡添加到Nex。。。
framer x使⽤教程
The web is vast and it's full of static websites and apps. But just because those apps are static, it doesn't mean they have to be boring.
⽹络⾮常庞⼤，到处都是静态的⽹站和应⽤。 但是，仅仅因为这些应⽤程序是静态的，并不意味着它们⼀定很⽆聊。
How can we use Framer Motion to add some animations to our web apps and provide a more interactive experience?animate下载安装
我们如何使⽤Framer Motion将⼀些动画添加到我们的Web应⽤程序中并提供更具交互性的体验？
什么是成帧器运动？ (What is Framer Motion?)
is an API that comes straight from the Framer API. It provides ready-to-go animations and gesture controls that makes it easy to create dynamic effects.
是直接来⾃Framer API的API。 它提供了随时可⽤的动画和⼿势控件，可轻松创建动态效果。
What is ? Framer itself is a UI prototyping tool that allows you to create interactive interfaces with animations that you can hand off to your team, while the is a Javascript library that lets you do that with code.
什么是 ？ Framer本⾝是⼀个UI原型制作⼯具，可让您创建带有动画的交互式界⾯，您可以将该动画传递给您的团队，⽽是⼀个Javascript 库，可⽤于编写代码。
The Motion API stems from that work, but is conveniently available as a separate package that we can use for animation control.
Motion API源⾃这项⼯作，但是可以作为单独的软件包⽅便地使⽤，我们可以将其⽤于动画控制。
我们要建造什么？ (What are we going to build?)
We’re going to use the concepts of Framer Motion to add interaction and page transition effects to our app.
我们将使⽤Framer Motion的概念向我们的应⽤程序添加交互和页⾯过渡效果。
We’ll start off with some basic animations that happen when the page load, learn how to trigger them on hover, and build out a wrapper that allows us to gracefully transition our pages in Next.js.
我们将从页⾯加载时发⽣的⼀些基本动画开始，学习如何在悬停时触发它们，并构建⼀个包装器，使我们能够在Next.js中正常转换页⾯。开始之前 (Before getting started)
This is the second part of series of articles walking through building a Rick and Morty wiki. focuses on requesting the data from the Rick and Morty API and creating dynamic pages.
这是构建Rick and Morty Wiki的系列⽂章的第⼆部分。 着重于从Rick and Morty API请求数据并创建动态页⾯。
While you can follow along without walking through the first one, it might be helpful to have a place to start from. Otherwise, you should be able to follow along most of this with any React app.
尽管您可以不遵循第⼀个步骤地进⾏学习，但是到⼀个起点可能会有所帮助。 否则，您应该能够在任何React应⽤程序中遵循⼤部分内容。
步骤0：在Next.js应⽤中安装Framer Motion (Step 0: Installing Framer Motion in your Next.js app)
Since we’re going to use Framer Motion to provide our animation features, the first thing we want to do is install it!
由于我们将使⽤Framer Motion提供动画功能，因此我们要做的第⼀件事就是安装它！
Once you have the app running locally, you can install it with:
在本地运⾏应⽤程序后，可以使⽤以下命令进⾏安装：
yarn add framer-motion
# or
npm install framer-motion
And at this point you can start back up your development server and we’ll be ready to go!
现在，您可以启动您的开发服务器了，我们就可以开始了！
第1步：在Next.js应⽤中使⽤Framer Motion对页⾯标题进⾏动画处理 (Step 1: Animating the page title with Framer Motion in a Next.js app)
To get started, we’re going to animate the page title in our wiki app. Particularly, we’re going to configure Framer Motion to make the title fade in and grow when the page first loads.
⾸先，我们将为Wiki应⽤程序中的页⾯标题设置动画。 特别是，我们将配置成帧器运动以使标题淡⼊并在页⾯⾸次加载时增长。
First things first, we need to import Motion into our app.
⾸先，我们需要将Motion导⼊到我们的应⽤程序中。
Start off by adding the following import statement to the top of pages/index.js:
⾸先将以下import语句添加到pages/index.js的顶部：
import { motion } from 'framer-motion';
And now that we’re ready to use motion, we can get started by wrapping out <h1> title with a motion component:
现在我们已经准备好使⽤motion ，我们可以通过将<h1>标题包装到运动组件<h1>开始使⽤：
<motion.div>
<h1 className="title">
Wubba Lubba Dub Dub!
</h1>
</motion.div>
Wrapping our element is what’s going to allow us to hook into the .
包装元素是使我们能够连接到 。
If we reload our page though, it won’t be doing anything yet. That’s because we haven’t yet configured our animation,
so let’s do that!
但是，如果我们重新加载页⾯，它将不会做任何事情。 那是因为我们还没有配置动画，所以让我们开始吧！
When using the Motion API with our <motion.x> component, we have two basic concepts we need to use:
将Motion API与<motion.x>组件⼀起使⽤时，我们需要使⽤两个基本概念：
Animation lifecycle
动画⽣命周期
Variants
变体
Each of the animation lifecycle props such as initial and animate allow us to define our animation’s name as a variant.
每个动画⽣命周期道具(例如initial animate和animate允许我们将动画名称定义为⼀个变体。
Our variants prop is where we configure those animations by defining variant names along with the animation we’d like them to perform.
我们的variants道具是通过定义变体名称以及我们希望它们执⾏的动画来配置这些动画的地⽅。
So to start, let’s add two lifecycle definitions to our title component by adding two lifecycle props:
⾸先，让我们通过添加两个⽣命周期道具，将两个⽣命周期定义添加到标题组件中：
<motion.div initial="hidden" animate="visible">
<h1 className="title">
Wubba Lubba Dub Dub!
</h1>
</motion.div>
Now, we want to define those:
现在，我们要定义这些：
<motion.div initial="hidden" animate="visible" variants={{
hidden: {},
visible: {},
}}>
<h1 className="title">
Wubba Lubba Dub Dub!
</h1>
</motion.div>
We’re defining two variants — hidden and visible — which we then reference in the initial and animate lifecycle props.
我们定义了两个变体-隐藏的和可见的，然后在initial和animate⽣命周期道具中引⽤它们。
Now again, reloading the page, it still won’t do anything since we still haven’t defined the animations themselves, so let’s do that:
再⼀次，重新加载页⾯，由于我们还没有定义动画本⾝，它仍然不会做任何事情，所以让我们这样做：
<motion.div initial="hidden" animate="visible" variants={{
hidden: {
scale: .8,
opacity: 0
},
visible: {
scale: 1,
opacity: 1,
transition: {
delay: .4
}
},
}}>
<h1 className="title">
Wubba Lubba Dub Dub!
</h1>
</motion.div>
Here’s what’s going on:
这是怎么回事：
We have two different lifecycles, an initial and an animate. The initial is what “initially” loads when the page loads where animate is what happens after the page loads
我们有两个不同的⽣命周期，⼀个初始⽣命周期和⼀个⽣命周期。 初始是页⾯加载时“初始”加载的内容，动画是页⾯加载后发⽣的动画
In our initial state, we’re setting the element to be slightly scaled down with a 0 opacity
在我们的初始状态下，我们将元素设置为以0不透明度稍微缩⼩
When the page loads and triggers our animation, we set the scale back to 1 and the opacity back to 1
当页⾯加载并触发动画时，我们将⽐例设置回1，将不透明度设置回1
We’re also setting a delay on our transition so that it ways .4s before firing the animation. This is just to help let things load a tiny bit before triggering
我们还为过渡设置了延迟，以便在触发动画之前它的延迟为.4s。 这只是为了让事情在触发之前加载⼀点点
So in the above, what’s actually happening is .4s after the page loads, we’re going to fade in the title and make it look like it’s slightly growing.
因此，在上⾯，实际发⽣的是页⾯加载后的0.4秒，我们将淡⼊标题，使其看起来略有增长。
And if we save that and reload the page, we can see our title’s effect!
如果保存并重新加载页⾯，我们可以看到标题的效果！
步骤2：使⽤Framer Motion将动画悬停效果添加到Next.js应⽤程序中的元素 (Step 2: Adding animated hover effects with Framer Motion to elements in a Next.js app)
Now that we have a basic understanding of how to add animations when the page loads, let’s starting adding some interaction.
现在，我们对如何在页⾯加载时添加动画有了基本的了解，让我们开始添加⼀些交互。
We’re going to add some hover effects to each character card. That way, when your cursor moves over one of the cards, we’ll trigger our animation.
我们将为每个⾓⾊卡添加⼀些悬停效果。 这样，当您的光标移到其中⼀张卡⽚上时，我们将触发动画。
First, inside of our unordered list grid <ul className=“grid”>, let’s update the list element <li> to be a <motion.li> element:
⾸先，在我们的⽆序列表⽹格<ul className=“grid”> ，让我们将列表元素<li>更新为<motion.li>元素：
<motion.li key={id} className="card">
...
</motion.li>
If you save and reload the page, you’ll notice that we actually have an issue.
如果您保存并重新加载页⾯，您会注意到我们实际上存在问题。
Because of the integration between motion and the Next.js CSS integration, our app is getting tripped up on the class name.
由于motion和Next.js CSS集成之间的集成，我们的应⽤程序在类名上被绊倒了。
While this isn’t fixing it at it’s “core”, we can fix this for our demo by removing the jsx prop from our top <style> block where inside, we have our .card definition.
虽然这不能解决它的“核⼼”问题，但是我们可以通过从顶部的<style>块中移除jsx道具来解决此问题，其中我们在其中拥有.card定义。
Change:
更改：
<style jsx>{`
To:
⾄：
<style>{`
Now if we reload our page, we’re back to where we started off.
现在，如果我们重新加载页⾯，我们将回到开始的地⽅。
In order to add our hover effect, we’re going to create a new prop on our <motion.li> component called whileHover and fill it with some base styles:
为了添加悬停效果，我们将在<motion.li>组件上创建⼀个名为whileHover的新道具，并⽤⼀些基本样式填充它：
<motion.li key={id} className="card" whileHover={{
scale: 1.2,
transition: {
duration: .2
}
}}>
Above, we’re telling motion that when someone hovers over our element, we want it to grow by scaling it to 1.2 and we want that animation to last .2s.
上⾯，我们告诉运动，当有⼈将⿏标悬停在元素上时，我们希望通过将其缩放到1.2来使其增长，并且希望该动画持续0.2s。
And if we reload the page, we can see our animation!
如果重新加载页⾯，我们可以看到动画！
If you look at the bottom of the effect though, when the card grows, it’s overlapping with the card below it and looks a bit broken. We can fix that by applying some z-indexing and a background color!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。