领众品牌官网
为厦门网站建设公司企业提供高品质网站建设
热线:0592-5596197

网站建设

当前位置:首页 > 营销运营 > 网站建设

网站设计lottie动画教程

来源:领众品牌    查看次数:    发表时间:2022-08-30 22:38:24

这几年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动画
 
lottie-player 参数介绍
 
  • hover:鼠标悬停播放
  • loop:设置重复动画
  • controls :显示动画控制,播放,暂停和滑块
  • autoplay:播放载入动画
 
 
网站设计中加入lottie动画是非常简单的,难的是动画本身的设计,如果你想设计一些个性化的动画元素,就需要学习下AE+Bodymovin(AE支持导出json的插件),这样可以让你的网站设计出高端档次。
 

 

相关文章:

  • 让Jquery代替Flash动画网站建设效果吧

    让Jquery代替Flash动画网站建设效果吧!相信很我客户看过很多很酷的网站也许是flash技术也许是jquery技术,这两种是时下最常见的,两者都能做出很好的动画效果,下就让我们厦门领

    2014-01-14