被否决

此软件包的功能已内移 @aarsteinmedia/dotlottie-player。要使用轻型版本,请导入 @aarsteinmedia/dotlottie-player/light。此软件包将不再更新 .

这是轻取版本 @aarsteinmedia/dotlotie-player (英语)。如果您只需要 SVG 渲染器(不是 HTML 或 Canvas ) , 并且不需要转换 JSON 来点Lottie 或者在苍蝇上结合动画, 这个是给你的 。 这个版本支持dot Lottie格式以及JSON格式,可以在一个文件中的多个动画之间切换.

该组件与服务器侧渲染兼容,像任何好的网络组件一样,它是框架不可知论的.

安装

在 HTML 中

• 从 CDN 导入 :

<script src="https://unpkg.com/@aarsteinmedia/dotlottie-player-light@latest/dist/index.js"></script>

• 从节点模块目录导入 :

<script src="/node_modules/@aarsteinmedia/dotlottie-player-light/dist/index.js"></script>

在 Java 脚本或类型脚本中

1. 使用 npm 或纱线安装 :

npm install --save @aarsteinmedia/dotlottie-player-light

2. 在您的应用程序中导入 :

import '@aarsteinmedia/dotlottie-player-light'

使用量

添加元素 dotlottie-player 标记和点 src 你选的洛蒂动画.

<dotlottie-player
  autoplay
  controls
  subframe
  loop
  src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
  style="width: 320px; margin: auto;"
>
</dotlottie-player>

要设定动画程序,请使用 load() 方法.

const lottiePlayer = document.querySelector('dotlottie-player')
lottiePlayer.load('https://storage.googleapis.com/aarsteinmedia/am.lottie')

在一个文件中控制多个动画的回放

使用 全文 中,将多个动画组合为一个文件。 要控制回放,您可以使用 next() 财务报告和审定财务报表 prev() 方法、控件或参数中的导航按钮 multiAnimationSettings 在标记.

在下面的例子中,第一个动画会播放一次,然后下一个动画会循环:

<dotlottie-player
  id="find-me"
  subframe
  src="/path/to/combined-animations.lottie"
>
</dotlottie-player>  

  const player = document.querySelector('#find-me')
  player?.setMultiAnimationSettings(
    [
      {
        autplay: true
      },
      {
        autoplay: true,
        loop: true
      }
    ]
  )

角质

1. 导入组件为 app.component.ts。 。 。 .

import { Component } from '@angular/core'
import '@aarsteinmedia/dotlottie-player-light'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'your-app-name';
}

2. 将玩家添加到您的 html 模板中 .

React.js / Next.js (英语)

如果您已经导入了父组件的库, 您不需要再次导入该组件的子组件 。 如果您想要指定元素需要使用的 CSS 类注释 class 名称空间,而不是 className。 。 。 .

import '@aarsteinmedia/dotlottie-player-light'

function App() {
  return (
    <dotlottie-player
      class="your-class-name"
      src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
      autoplay
      controls
      subframe
      loop
      style={{
        width: '320px',
        margin: 'auto'
      }}
    />
  )
}

export default App

如果您正在使用 TypeScript 并想要指定组件 a ref你可以这样

import { useRef } from 'react'
import '@aarsteinmedia/dotlottie-player-light'
import type DotLottiePlayer from '@aarsteinmedia/dotlottie-player-light'

function App() {
  const animation = useRef<DotLottiePlayer | null>(null)
  return (
    <dotlottie-player
      ref={animation}
      src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
    />
  )
}

export default App

Vue.js / Nuxt.js (使用vite.js) 互联网档案馆的存檔,存档日期2013-12-02

相较于React和Angular,还有一对额外的台阶,但肯定没有什么过于令人生畏.

1. 宣布dotlottie-player标签为自定义元素,以阻止Vue试图解决.

在Vue.js语中

vite.config.ts数字 :

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag: string) => ['dotlottie-player'].includes(tag),
        }
      }
    })
  ]
})

在 Nuxt.js 中

nuxt.config.ts数字 :

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag: string) => ['dotlottie-player'].includes(tag),
    }
  }
})

2. 导入/启动组件.

在Vue.js语中

main.ts数字 :

import { createApp } from 'vue'
import DotLottiePlayer from '@aarsteinmedia/dotlottie-player-light'
import App from './App.vue'

const app = createApp(App)
app.component('DotLottiePlayer', DotLottiePlayer)

在 Nuxt.js 中

创建一个 plugins 如果根中不存在文件夹, 请添加一个名为文件 dotlottie-player-light.js数字 :

import DotLottiePlayer from '@aarsteinmedia/dotlottie-player-light'

export default defineNuxtPlugin(({ vueApp }) => {
  vueApp.component('DotLottiePlayer', DotLottiePlayer)
})

3. 该组件现在可以在您的页面或组件模板标签中使用.

<template>
  <dotlottie-player
    src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
    autoplay
    controls
    subframe
    loop
    style="width: 320px; margin: auto;"
  />
</template>

属性

方法

活动

以下事件已曝光,可通过下列方式收听: addEventListener 打电话.

文字新闻插件

我们做了一个免费的WordPress插件,它与Gutenberg Blocks, Elementor, Divi Builder 和 Flatsome UX Builder 合作: AM Lottie Player 文字新闻。它具有这个软件包的所有功能,有一个有用的用户界面.

它的超轻量级——并且只在使用动画的页面上加载.

我们还制作了一个溢价WordPress插件,用于购买: AM LottiePlayer PRO 文字新闻。它有一个易于使用的GUI,用于将多个Lottie动画合并到一个文件中并进行控制,将JSON转换为带有拖放功能的DotLottie,以及许多更独有的功能.

许可证

GPL-2.0-或-后期