备案要关闭网站吗,免费网页建设,网站开发后 怎么换前端,没有ftp wordpressLottie简介
Lottie是一个Airbnb 开发的用于Android#xff0c;iOS#xff0c;Web和Windows的库#xff0c;用于解析使用Bodymovin导出为json的Adobe After Effects动画#xff0c;并在移动设备和网络上呈现 — GitHub
Lottie主要特性
After Effects 兼容性#xff1a; …Lottie简介
Lottie是一个Airbnb 开发的用于AndroidiOSWeb和Windows的库用于解析使用Bodymovin导出为json的Adobe After Effects动画并在移动设备和网络上呈现 — GitHub
Lottie主要特性
After Effects 兼容性 - 将 AE 项目 .json 转换为应用程序/Web 动画。
跨平台
支持 Android、iOS、Web 和 React Native 等框架。
高性能
使用本机图形以获得比 CSS/JS 更好的性能。
可自定义
可以修改动画的颜色、大小、速度等。
轻量级
文件大小小因为它们仅包含关键帧数据。
易于使用
简单的 API易于集成。
丰富的效果
支持 After Effects 中的复杂动画。
实时渲染
在不同屏幕尺寸下保持质量。
社区支持
活跃的开源社区经常更新。
动画缓存
支持缓存以提高重复播放性能。
Lottie基本用法
// cdn
script srchttps://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.1/lottie.min.js typetext/javascript/script
npm install lottie-web;
// 示例
import lottie from lottie-web;
const animation lottie.loadAnimation({container: document.querySelector(.animation),path: ./data.json, // 动画文件路径renderer: svg, // 渲染方式loop: true, // 是否循环播放autoplay: true, // 是否自动播放name: New Year, // 动画参考名称
})Lottie API
名称参数container用于渲染的容器一般使用一个 div 即可renderer渲染器可以选择 ‘svg’ / ‘canvas’ / ‘html’个人测试发现 svg 效果和兼容性最好name动画名称用于 referenceloop循环autoplay自动播放pathjson 路径页面会通过一个 http 请求获取 jsonanimationDatajson 动画数据与 path 互斥建议使用 path因为 animationData 会将数据打包进来会使得 js bundle 过大
Lottie 实例方法
名称参数描述stop停止动画play播放动画pause暂停动画destroy销毁setSpeedNumber设置播放速度1 表示1倍速度0.5 表示 0.5倍速度setDirectionNumber正反向播放1 表示 正向-1 表示反向goToAndStopNumber, [Boolean]跳到某一帧或某一秒停止第二个参数 iFrame 为是否基于帧模式还是时间默认为 falsegoToAndPlayNumber, [Boolean]跳到某一帧或某一秒开始第二个参数 iFrame 为是否基于帧模式还是时间默认为 false画playSegmentsArray, [Boolean]播放片段参数1为数组两个元素为开始帧和结束帧参数2为是否立即播放片段还是等之前的动画播放完成
Lottie 实例事件
名称描述onComplete当动画播放完成时触发onLoopComplete当动画的一个循环播放完成时触发onEnterFrame每一帧动画播放时触发onSegmentStart当动画片段开始播放时触发 addEventListener 事件 const animation lottie.loadAnimation({...,
});
animation.addEventListener(complete, function() {console.log(Animation complete);
});名称描述complete动画播放完成时触发loopComplete动画的一个循环播放完成时触发enterFrame每一帧动画播放时触发segmentStart动画片段开始播放时触发config_ready当初始配置完成时触发data_ready当动画的所有部分都已加载时触发DOMLoaded当元素已添加到 DOM 时触发destroy动画销毁时触发
