网站设计lottie动画教程
来源：领众品牌 查看次数： 发表时间：2025-03-06 12:38:582025年lottie动画在网站建设行业中越来越受重视， 这几年lottie动画非常的流行，最近在给客户做网站设计的时候就考虑到运用这个lottie技术，摸索半天看了一些教程最终搞定这个动画在网站页中的显示。
在说lottie动画教程之前，看看下面的这个lottie效果吧
鼠标移到下图试试
你可以鼠标放在图上，动画效果就出来了，这个就是采用了lottie技术。
话不多说来看看我给大家提供的教程吧！
lottie是什么？
lottie是一个动画库插件，它的原理是："js(lottie-player.js) + json" 的一个可以控制播放的前端库，可以运用到网站、APP、小程序；
这里的 json文件就是通过AE软件把做好的动画导出json格式，AE动画导出json需要用到Bodymovin这个插件，这里就不介绍AE动画这块了，大家有兴趣可以研究下。
lottie的动画json文件生成插件在lottiefiles.com上面下载。
网站设计如何运用lottie动画？
在网站中插入lottie动画你需要运用到这个两个文件：
1、这个文件lottie-player.js，点击下载 https://unpkg.com/@lottiefiles/lottie-player@1.5.7/dist/lottie-player.js；
2、*.json文件，这个为AE软件通过插件导出的json文件，这里大家可以通过lottiefiles.com下载一些免费的；
如下代码：
|
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets9.lottiefiles.com/packages/lf20_PBgNop.json" mode="bounce" background="#FFFFFF" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
|
只要把上面的代码黏贴进入你的网页中就可以看到效果了。
lottie-player 参数介绍
- hover：鼠标悬停播放
- loop：设置重复动画
- controls ：显示动画控制，播放，暂停和滑块
- autoplay：播放载入动画
网站设计中加入lottie动画是非常简单的，难的是动画本身的设计，如果你想设计一些个性化的动画元素，就需要学习下AE+Bodymovin(AE支持导出json的插件)，这样可以让你的网站设计出高端档次。
作者：一名
12年资深网站设计师 前端交互开发工程师相关文章：
-
让Jquery代替Flash动画网站建设效果吧
让Jquery代替Flash动画网站建设效果吧!相信很我客户看过很多很酷的网站也许是flash技术也许是jquery技术，这两种是时下最常见的，两者都能做出很好的动画效果，下就让我们厦门领
2014-01-14