AM 乐天网
Airbnb 的脚本分叉 乐天网,为 Aarstein 媒体点 Lottie 播放器生态系统。 。 。 .
为什么这个叉子存在
- 更安全的表达方式 - 在效果表达式被评价后
new Function改为eval,这略微改善了安全和性能。 然而,对于不信任的投入,/light建议. - 经济进口 – 这个软件包坚持模块化设计理念,提供颗粒导入,以免在应用程序中获得任何不需要的bloat — 只要你继续阅读.
- 更好的相片渲染 – 虽然Canvas渲染不像SVG渲染那样多功能,但它更能表现并更有利于大多数浏览器处理视觉元素. 这个叉子有更好的DPR处理和更广泛的Canvas渲染器特性支持.
- 方便安全部门改革 – 浏览器和Web API的用法为节点和服务器渲染而守护.
- 更好的错误 ——失败通过打出的事件浮出水面,而不是沉默地失败.
此软件包主要是为 @aarsteinmedia/dotlottie-player 财务报告和审定财务报表 @aarsteinmedia/dotlottie-react. 其他使用案例得到支持,但继承自上游Lottie-web行为.
安装
pnpm add @aarsteinmedia/lottie-web
如果您使用点Lottie的切入点,请同时安装对等依赖:
pnpm add fflate
入境点
在这里读这整件事都有好处。 还记得我说的模块设计吗? 就是这样.
| 导入 | 说明 |
|---|---|
@aarsteinmedia/lottie-web | 完全构建: SVG + 画布渲染器,效果和表达式 |
@aarsteinmedia/lottie-web/light | 只有 SVG 渲染器, 没有表达式 |
@aarsteinmedia/lottie-web/svg | SVG 有表达式的渲染器 |
@aarsteinmedia/lottie-web/canvas | 带有表达式的相机 |
@aarsteinmedia/lottie-web/utils | 共享助手和词库 |
@aarsteinmedia/lottie-web/dotlottie | dot Lottie 存档公用事业 |
基本用途
import lottie, { loadAnimation } from '@aarsteinmedia/lottie-web'
import type { AnimationItem } from '@aarsteinmedia/lottie-web'
import { PlayerEvent } from '@aarsteinmedia/lottie-web/utils'
const container = document.getElementById('animation')
const animation: AnimationItem = loadAnimation({
container,
renderer: 'svg',
loop: true,
autoplay: true,
path: '/animations/hero.json',
})
animation.addEventListener(PlayerEvent.Complete, () => {
console.log('Animation finished')
})
// Later
animation.destroy()
内置动画数据
import animationData from './animation.json'
const animation = loadAnimation({
container: document.getElementById('animation'),
renderer: 'svg',
animationData,
autoplay: false,
})
SVG 唯一的捆绑( 小)
import lottie from '@aarsteinmedia/lottie-web/svg'
活动
AnimationItem 扩展小事件发射器。 共同活动包括:
| 活动 | 当它起火时 |
|---|---|
DOMLoaded | 动画已经准备好播放了 |
enterFrame | 每个框架 |
complete | 回放到达尾端 |
loopComplete | 循环迭代完成 |
configError | 无效的配置或数据 |
renderFrameError | 帧无法渲染 |
destroy | 动画被撕了 |
导入事件名称 @aarsteinmedia/lottie-web/utils数字 :
import { PlayerEvent } from '@aarsteinmedia/lottie-web/utils'
animation.addEventListener(PlayerEvent.RenderFrameError, (event) => {
console.error(event?.nativeError)
})
发展
pnpm install
pnpm dev # preview player with live reload
pnpm lint # eslint
pnpm test # vitest
pnpm prod # typecheck + production build
pnpm check # lint, test, build, and verify version injection
pnpm dev 需要一个本地 assets/ 样本目录 .json 编号 : .lottie 文件( 此回波跟踪一个同名链接到同名兄弟) lottie-fixtures 文件夹). 试验使用固定装置 tests/lottie-fixtures/ 而不依赖 assets/。 。 。 .
许可证
GPL2.0-或后发. 如果你发行合并作品或衍生作品,请查看上游Lottie-web许可的影响.