回到所有的课程
课程库

嵌入后的效果和Lottie动画

添加After Effects动画和控制他们的回放使用与Lottie集成的交互。

本视频采用了旧的用户界面。更新版本即将到来!

与Webflow的After Effects和Lottie集成,您可以使用After Effects (AE) [xxx]甚至可以通过Lottie元素和Webflow的设置来控制它们的播放交互和动画工具

在这节课中:

  1. 获取JSON动画文件
  2. 将动画添加到您的网站
  3. 通过交互控制动画

获取Lottie JSON动画文件

您可以将AE动画以Lottie JSON文件的形式上传到您的网站。你可以通过以下方式获取这些文件:

  1. 导出AE动画为JSON文件与免费的AEbodymovin插件(↗)
  2. 下载免费JSON动画文件Lottiefiles(↗)(或其他在线动画库)
资源

将动画添加到您的网站

你可以使用JSON或Lottie动画作为图标、缩略图、页面背景、页面加载器、自定义动画光标等。

添加Lottie动画到您的网站。

就像其他图像文件一样,你可以上传你的JSON动画文件到你的项目的资产面板,并直接将它们从那里拖放到你的页面上。

直接从资产面板中删除Lottie动画。
直接从资产面板中添加Lottie动画。

或者,您也可以使用Lottie动画元素(位于添加元素面板>媒体)作为动画的占位符,直到你上传JSON文件。然后可以选择用Lottie序列替换此占位符资产面板

从Add Elements面板添加一个Lottie动画元素,然后用JSON动画文件替换占位符。
从Add Elements面板添加一个Lottie动画元素,然后用JSON动画文件替换占位符。

指定动画应该如何播放

Lottie元素设置允许您控制动画在页面上的播放方式。您可以重写默认持续时间,设置动画无限循环,或设置动画反向播放

通过Lottie动画设置调整动画。

下面是你可以为每个Lottie动画元素设置的所有参数列表:

  • 洛蒂替换序列(按钮)-从资产面板或通过上传一个新的动画替换另一个动画
  • 预览动画(按钮)-在画布上播放和预览动画
  • 使用内置的持续时间(复选框)-默认选中,使用默认的动画持续时间。取消选中以覆盖持续时间。
  • 使用内置的持续时间(输入字段-当复选框未选中时出现)-默认情况下,它显示动画的内置持续时间。使用较小的值使其更快,或使用较高的值使其变慢。
  • 循环(复选框)-使动画无限播放
  • 在反向(复选框)-使动画反向播放
  • 渲染模式(预设开关)-切换动画渲染模式。默认值是SVGSVG非常适合矢量动画。帆布适用于图像序列中最常见的栅格化层。如果动画在所选模式下不能正确播放,请切换渲染器。
注意,画布模式可能不总是正确渲染形状,可能会改变缩放行为。此外,每个渲染器支持不同的动画AE功能-检查每个渲染器支持哪些特性[xxx]

通过交互控制动画

以…的力量Webflow的交互和Lottie集成,你可以更多地控制这些动画的播放方式和时间。通过这些选项,您可以在用户交互时播放和暂停动画。

您可以设置触发器来启动动画,选择播放动画的哪个部分,以及在哪里停止动画播放。有两种方法可以通过交互控制Lottie动画:

  1. 洛蒂回放动画
  2. 洛蒂行动

这两个选项只适用于Lottie动画元素。也就是说,要访问它们,您需要在画布上选择Lottie动画。

例1。点击播放动画

默认情况下,所有动画在页面加载时播放。所以,当你滚动到它们的时候,你不会看到下面的动画,除非你把它们设置为循环。通过交互,您可以控制回放。

当用户单击动画时,使用快速Lottie播放动画。

假设你想在用户点击时播放一个动画:

  1. 在画布上选择Lottie动画元素
  2. 添加一个鼠标点击(tap)交互面板中的元素触发器
  3. 选择洛蒂回放在下面的操作菜单中点击1日.可选地,您可以选择延迟播放、反转播放或将其设置为循环播放。

就是这样!

如果您需要更改动画的持续时间/速度,您可以通过元素设置面板中的Lottie元素设置。所有其他设置在珞蒂动画设置将覆盖在互动面板的珞蒂播放设置。

例2。当它滚动进入或退出视野时播放动画

您可以使用我们在上面的例子中使用的快速操作鼠标悬停而且滚动到视图交互。

当您滚动页面时,这个动画会在它进入视口时播放。

在这个例子中,让我们设置动画在进入视口时播放:

  1. 选择Lottie动画元素
  2. 添加一个滚动到视图交互面板中的元素触发器
  3. 在下面创建一个动画当滚动到视图时
  4. 选择洛蒂回放在下面的操作菜单中点击1日
  5. 可选地,设置一个抵消如果动画播放太快
  6. 选择洛蒂回放在下面的操作菜单中在第二次点击
  7. 反向播放
  8. 可选地,设置一个抵消
为此滚动交互设置了两个动画。第一个在10%的Lottie元素滚动到视图时播放动画。当Lottie元素以10%的偏移量滚出视图时,第二种方法反向播放动画。

例3。在页面加载时只播放动画的一部分

对于某些交互类型,您可能需要创建一个自定义动画,并使用Lottie动作,使您能够更好地控制动画的播放方式。此选项允许您设置自定义的动画开始和结束帧。和其他定时动作一样,您可以应用缓和效果并设置自定义持续时间。此外,您还可以添加其他动作来创建更复杂的动画。

使用交互来调整Lottie动画的开始帧和结束帧。
通过设置初始状态,我们可以为我们的动画设置一个自定义的开始帧。否则,动画将总是从第一帧开始播放。

如果你想调整开始帧或结束帧:

  1. 选择洛蒂动画元素
  2. 添加一个页面加载元素触发。交互面板
  3. 在下面创建一个动画当页面开始加载时
  4. 添加一个洛蒂行动
  5. 如果您希望动画从不同的帧开始,可以在Lottie设置下调整开始帧,并将其设置为初始状态
  6. 添加另一个洛蒂行动
  7. 如果你想让动画在另一帧停止,请将结束帧设置为100%或更小
  8. 调整持续时间以控制动画播放的速度

专业提示:如果你想使用动画的默认持续时间,双击画布上的动画,取消选中持续时间复选框,然后使用出现的内置持续时间。

尝试Webflow——它是免费的
Baidu
map