滚动时对元素进行动画处理

作为我们系列的一部分After Effects和Lottie在Webflow，我们在After Effects中创建了一个Lottie动画。在本教程中，我们将设置Lottie资产在视图中进行动画。

我们将分4步完成:

1. 添加Lottie资产
2. 设置基于滚动的触发器
3. 配置动画
   
   

1.添加Lottie资产

你需要从After Effects中导出Lottie动画并上传到你的Webflow项目中。我们导出动画使用Bodymovin．在我们的第3步和第4步中学习如何做到这一点全面介绍教程．

对于这个项目，你需要设置3个部分-检查我们的节教程或克隆项目．

要查找并添加动画，单击左侧工具栏中的Assets面板中的照片图标，并将动画拖到中间部分。

太棒了!现在我们来设置触发器。

2.设置基于滚动的触发器

在添加触发器之前，我们要确保动画(而不是其他元素)被选中。我们希望这个动画在滚动时发生。从右边工具栏上的interaction面板中，打开Element trigger菜单并选择While scrolling in view。

留在交互面板中，在我们的最后一步配置动画。

3.配置动画

让我们通过添加动画来让这一切变得生动起来。下在滚动,选择播放滚动动画从Action菜单。在滚动动画，点击加号，并从下拉菜单中选择Lottie添加我们的第一个动作。

在滚动动作时间轴中选择100%的动画，在下面的Lottie下，将其更改为100%。

现在动画将从0%开始，当它滚动出视图时达到100%。

你可以打开实时预览模式或在预览中检查你的工作，以查看你滚动的动画进度。

就是这样——您刚刚在Webflow设计器中创建了一个基于滚动的Lottie动画。路要走!