【前端 | Lottie】如何将AE动画渲染到网页上？
合集 · 前端教程 (23)
-
【前端 | 教程】如何做一个扑克牌轮播图
10:23
-
【前端 | 教程】实现酷酷的文字故障效果
7:22
-
【前端 | 教程】纯干货！三步实现滑动阻尼效果
8:13
-
【前端 | Lottie】如何将AE动画渲染到网页上？
10:25
-
前端还能这样玩？做一只顶级走位的小蜘蛛
8:25
-
你的网站或许离高级，，还差一个跳转动画？
9:06
-
何止竖向滑动？让你的网页横着走！
9:30
-
干到开裂！上下左右⚡网页无限滑动⚡
12:32
-
做一个网页信息表单：不仅可以打勾，还可以擦掉？
11:56
-
硬到牙疼！如何将SVG图形嵌入网页、优雅地做动画？
7:57
-
网页SVG描边效果？一段动画给你整明白
7:26
-
你最该学会的网页交互？SVG描边动画 + 按钮
6:16
-
最具科技感的一集？用SVG打造网页矩阵动画
7:57
-
全站首发！别再问哪找网页灵感了，AW保姆级教程
8:33
-
不用物理引擎？让网页小球附加🧲磁力效果🧲
7:15
-
一个让人猜不到原理的，，网页小蛇加载效果？
7:48
-
终！极！网页横向滑动效果📕教程📕
6:34
-
再花里胡哨一点？在网页里使用ASCII动画
6:24
-
手搓物理效果？详解大神写的前端代码
8:09
-
音频可视化第一步？无库实现网页音波环
6:33
-
“自瞄锁敌”？做一个带有磁力的网页光标
5:40
-
网页也能一刀两断？这个开屏动画有点小帅
6:10
-
另类切图法？当CSS不按套路出牌
6:14
Description
源码链接: https://pan.baidu.com/s/1hCJ8AQff9XA-IJaWWaE4rw 提取码：jiej (其中包含AE文件、源码以及bodymovin压缩包，包内带有安装说明) lottie代码文档: http://airbnb.io/lottie/#/web lottie AE兼容表: http://airbnb.io/lottie/#/supported-features lottie官网: https://lottiefiles.com/ 喜欢这个视频的话，就点个赞吧❤
Comments
这次为大家带来的lottie，对于大家来说，可能最难的是动画制作[热]，在lottie的实际应用中，大家可能需要去麻烦一下设计，UI那边的小伙伴们[妙啊]，或者说能够自己做Ae动画，又或者是具有在网上找到动画资源的能力 后面up帮大家找一下，我记得好像有一些提供免费lottie资源的网站[打call][打call]
♥ 35
相当实用的思路！之后有一些复杂的动画效果就可以直接用ae做了，三连给了！
♥ 35 ↩ 1
之前看过一个很牛逼的交互网站，再看到这个感觉突然有思路了[藏狐]
♥ 17 ↩ 2
有了这玩意，前端工程师跟ui动画师又可以友好的玩耍了[星星眼]
♥ 16 ↩ 1
up可以说一下怎么样下载ae插件嘛，我点击插件没有效果，呜呜呜。
♥ 2 ↩ 4
up主，我想请教您一个问题，这种签名动画用bodymovin导出的话，是不是得一笔写完才行？我把签名分成了几个字母，设置了效果是应用于每个单独的形状，不是同时的，AE里播放是正常的签名效果。但是用bodymovin导出的时候，是几个字母一起写的，而不是像签名一样从左往右一笔一画写的[委屈]
♥ 1 ↩ 2
up 有用过 lottielab 吗，为什么我用那个文字的时候，输不了中文，字体列表里没有显示本地安装的字体，该咋整啊[大哭]
♥ 1 ↩ 1
UI前来看看前端都能做些什么效果[doge]
♥ 1
大佬你呢个不能写一个出场动画+循环的控制，就是出场和循环做在一个里面，一共100帧 前面20帧出场只播放一次，然后一直循环21帧-100帧的动画？
♥ 1 ↩ 1
牛掰啊，找了那么多教程都没在 mac ae2024 安装成功，up 的方法一下成功了，投币
♥ 1 ↩ 1
老师，为什么我每一步都按照视频的来，最后显示一片黑什么都没有[呲牙]
♥ 1 ↩ 4
lottie的导出，主要还是看性能问题和可定制化的问题吧，性能问题才是最难的，怎么设计动画，让导出的lottie性能更好，不然移动端直接整个9页面卡死了，用都用不了[吃瓜]
♥ 1
能要下範例的AE檔和導出的檔案嗎？三連了
♥ 1
up用的什么IDE啊，还是说什么插件能做到把代码最近的层次固定在顶端
♥ 1 ↩ 2
好！！ 直接给lottie基本说明白了[星星眼]
♥ 1 ↩ 1
好东西[打call][打call][打call]
♥ 1 ↩ 1
三连了[家人们谁懂啊_家人们]
♥ 1 ↩ 1
这个的ae动画可以导出透明底的吗
↩ 1
这个lottie教程.html是不是必须用live server打开
↩ 1