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
有了以上官网文档的支持,动画组件的使用易如反掌
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」