dotlottie- player 网络组件

这是一个Web组件,可以方便地在网站上嵌入并播放点Lottie动画.

什么是点洛蒂?

dot Lottie是一种开源文件格式,将一个或多个 Lottie 文件及其相关资源汇总为一个文件. 它们是使用Deflate压缩方法压缩的ZIP档案,并携带".lottie"的文件扩展名.

更多关于"洛蒂"的信息!

文档

查看全部文档

安装

在 HTML 中,从 CDN 从本地安装导入

乐天玩家

• 从CDN导入.

<script type="module" src="https://unpkg.com/@dotlottie/[email protected]/dist/dotlottie-player.mjs" ></script>

• 从本地节点模块目录导入 .

<script type="module" src="/node_modules/@dotlottie/player-component/dist/dotlottie-player.mjs"></script>

在 Javascript 或类型脚本中

1. 使用 npm 或 纱线安装软件包 .

npm install --save @dotlottie/player-component

2. 导入您的代码包 .

import '@dotlottie/player-component';

使用量

添加元素 dotlottie-player 设置 src 属性到 URL 指向.lottie 或.json 文件.

<dotlottie-player
  autoplay
  controls
  loop
  playMode="normal"
  src="http://dotlottieio.s3-website-us-east-1.amazonaws.com/sample_files/animation-external-image.lottie"
  style="width: 320px"
>
</dotlottie-player>

你也可以设定和装入动画.

<dotlottie-player autoplay controls loop mode="normal" style="width: 320px"> </dotlottie-player>

const player = document.querySelector('dotlottie-player');
player.load('http://dotlottieio.s3-website-us-east-1.amazonaws.com/sample_files/animation-external-image.lottie');

ReactJS 中的用法示例

1 - 导入播放器并使用如下

import '@dotlottie/player-component';

function App() {
  return (
    <div className="App">
      <dotlottie-player
        src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie"
        autoplay
        loop
        style={{ height: '100%', width: '100%' }}
      />
    </div>
  );
}

export default App;

ReactJS + Typescript 中的用法示例

1 - 以下进口

import '@dotlottie/player-component';

function App() {
  return (
    <div className="App">
      <dotlottie-player
        src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie"
        autoplay
        loop
        style={{ height: '100%', width: '100%' }}
      />
    </div>
  );
}

export default App;

2 - 在您的 src 文件夹中创建一个 global.d.ts 文件并添加下面的代码

declare namespace JSX {
  interface IntrinsicElements {
    "dotlottie-player": any;
  }
}

NuxtJS / VueJS 中的用法示例

1 - 更新您根部 nuxt. config.js 文件中的插件阵列如下

plugins: [{ src: '~/plugins/lottie-player', mode: 'client' }];

2 - 在根中创建文件夹插件, 如果它不存在, 请添加一个文件 lottie- player.js, 其内容如下

import * as LottiePlayer from '@dotlottie/player-component';

3 - 该组件现在可以在您的页面或组件模板标签中按以下方式使用,而无需导入

<template>
  <dotlottie-player src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie" autoplay loop />
</template>
<script>
export default {};
</script>

• vueJS 的注释 库/ 玩家必须声明为客户端侧插件模块.

关于玩家属性、方法、事件和多洛蒂-玩家风格的完整文档可供查阅 这里。 。 。 .

社区与支持

• Github问题. 对于错误和错误,您使用此播放器遇到.
• 出众. 分享你那精彩的洛蒂动画!

我们另一个洛蒂相关的图书馆

许可证

麻省理工学院许可证 ^ LottieFiles.com