AM Lottie 显示器

我们自豪地宣称,这是Lottie Player网络组件中最多能、最轻能、最有效率的。 它与服务器侧渲染和完全框架-可知性兼容.

选择建筑

演示

这里 演示,在 Next.js 上运行,并带有 TypeScript .

安装

在 HTML 中

• 从 CDN 导入 :

  • 满:

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

  • SVG : (英语)

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

  • 帆布:

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

  • 光线 :

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

• 从 node_modules 同样的方式,例如. /node_modules/@aarsteinmedia/dotlottie-player/dist/unpkg-full.js。 。 。 .

在 Java 脚本或类型脚本中

1. 使用 npm 、 pnpm 或纱线安装 :

   pnpm add @aarsteinmedia/dotlottie-player
   

2. 导入您的应用程序( 选择一个构件 ) :

   import '@aarsteinmedia/dotlottie-player'
   // or:
   import '@aarsteinmedia/dotlottie-player/svg'
   import '@aarsteinmedia/dotlottie-player/canvas'
   import '@aarsteinmedia/dotlottie-player/light'
   

因为这是一个Web组件, 你把它添加到你的Web应用程序的全球范围。 与模块化组件不同,它只应该导入一次 — — 最好是在应用程序生命周期的早期.

如果您正在使用 TypeScript 并想要导入组件类型, 请在全局导入之外进行模块化 :

import '@aarsteinmedia/dotlottie-player' // Do this once globally.
import type DotLottiePlayer from '@aarsteinmedia/dotlottie-player' // Do this per file that needs the type.

⚠️ 注意,这种模式可能引起穿插错误,例如: import/no-duplicates。 。 。 .

使用量

添加数据 dotlottie-player 标出和标出 src 给您选择的洛蒂动画:

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

装入动画

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

const player = document.querySelector('#find-me')
await player?.load('https://storage.googleapis.com/aarsteinmedia/am.lottie')

转换为点Lottie

(仅可入建

如果您有一款Lottie JSON动画,并想将其转换成"点Lottie"文件——以杠杆压缩,组合多款动画,并维护一个整齐的文件库——您可以使用此功能 convert() 方法。 这将触发浏览器下载 .

若为 controls 在右侧的上下文菜单中也有一个转换按钮.

转换为 JSON

(仅可入建

如果您正在调试 Dot Lottie 动画( 例如, 表达式没有如预期的那样有效), 您可以使用 convert() 方法或通过转换按钮,如果 controls 已启用.

组合动画

(仅可入建

将多个动画合并到单个点Lottie文件中,请使用 addAnimation() 方法。 这也触发了浏览器的下载. 源文件可以是dot Lottie或JSON,输出将永远是dot Lottie:

const player = document.querySelector('#find-me')
await player?.addAnimation([
  { id: 'animation_1', url: '/url/to/animation_1.lottie' },
  { id: 'animation_2', url: '/url/to/animation_2.json', direction: -1, speed: 2 }
])

您也可以使用这种方法而无需任何 <dotlottie-player> 在页面上。 只要剧本上膛, dotLottiePlayer() 作为全球方法可供使用.

await dotLottiePlayer().addAnimation([
  { id: 'animation_1', url: '/path/to/animation_1.lottie' },
  { id: 'animation_2', url: '/path/to/animation_2.json', direction: -1, speed: 2 }
])

新文件初始化后会自动加载第一部动画. 您可以使用 : next() 财务报告和审定财务报表 prev() 方法,或控件中的导航按钮.

以下是如何控制多个动画的回放设置:

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

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

角质

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

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

@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 (英语)

因为这是Web组件而不是反应组件,请注意,您必须使用 class 属性( 不) className在分配CSS课程时.

如果您更喜欢纯反应逻辑, 您可能想要查看 @aarsteinmedia/dotlotie-反应。 。 。 .

import '@aarsteinmedia/dotlottie-player'

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

export default App

如果您正在使用 TypeScript 并想要指定一个 ref像这样

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

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

export default App

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

1. 宣布: dotlottie-player 标记为自定义元素, 因此 Vue 不试图将其作为 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) => tag === 'dotlottie-player',
        }
      }
    })
  ]
})

在 Nuxt.js 中

nuxt.config.ts数字 :

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

2. 将包导入一次以获取其副作用(注册自定义元素) .

在Vue.js语中

main.ts数字 :

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

createApp(App).mount('#app')

在 Nuxt.js 中

创建一个 plugins 如果此文件夹不存在,则在根中添加一个客户端插件,例如:. dotlottie-player.client.ts数字 :

import '@aarsteinmedia/dotlottie-player'

export default defineNuxtPlugin(() => {})

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 显示器。它具有这个软件包的所有功能,有一个有用的用户界面.

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

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

许可证

GPL-2.0-或-后期