web-lottie 前端动画效果

资源 

http://airbnb.io/lottie/#/web  lottie 官网

动画的实现逻辑借用官网的一句话

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!

优势

简单快捷的 为前端添加炫酷动画效果

且,动画更精致 (完全由设计去制作,专业的事专业的人去做 ,关于AE的要使用的插件 http://airbnb.io/lottie/#/after-effects

且,在web端兼容性好

且,相对于 gif 等,体积更小,更好的适应拉伸,和高分辨率屏幕

使用

npm install lottie-web 

import lottie from 'lottie-web'

let amt = lottie.loadAnimation({

  container: element, // the dom element that will contain the animation

  renderer: 'svg',

  loop: true,

  autoplay: true,

  path: 'data.json' // the path to the animation json

});

amt .play() // 运行动画

amt.addEventListener('complete', _=>{})

官网关于 动画 的参数

http://airbnb.io/lottie/#/web?id=usage

官网关于 动画 的方法

http://airbnb.io/lottie/#/web?id=usage-1

官网关于 动画 的事件

http://airbnb.io/lottie/#/web?id=events

有了以上官网文档的支持,动画组件的使用易如反掌

 

posted @   南巷清风--大R  阅读(112)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示