AM LottiePlayer – Vector animations for WordPress

外掛說明

The most complete Lottie Player yet.

AM LottiePlayer is easy to use, lightweight, and gives you total control over how to implement crisp, vectorized animations to your website. Easily set up user interactions, choose between JSON or the optimized dotLottie format, choose whether to serve the files from a CDN or your own Media Library, choose whether to render the animations as malleable SVGs or performant Canvases, choose how to scale the animation, add a nice description for screen readers and search eninge crawlers, and you’re off to the races!

Upload Lottie animations to WordPress and add them to Gutenberg, Divi, Elementor, Flatsome UX Builder, or via the shortcode [am-lottieplayer]. This plugin also offer partial support for WPBakery (formerly Visual Studio).

Features

  • Contains two Gutenberg blocks: a player and a cover block with text overlay – great for headers.
  • Contains a Divi Builder Module
  • Contains an Elementor Widget
  • Contains the shortcode [am-lottieplayer]
  • Has intergration for Flatsome UX Builder
  • Has partial support for WPBakery (formerly Visual Studio)
  • Scripts are only loaded for pages where the player is used
  • Upload Lottie JSON or dotLottie files to your Media Library
  • Drag & drop a Lottie JSON or dotLottie file
  • Insert a Lottie JSON or dotLottie animation from URL
  • Choose renderer, scaling, speed, size, background color, interactions and more from the block settings in Gutenberg. The same settings are accessible in the Divi Module menu, the Elementor Widget menu, the Flatsome UX Builder menu, and WPBakery menu.

Feedback

We’d love to hear from you!

Thanks for using our plugin! Please take a moment to rate it.

Translations

You can contribute your translation here.

New to Translating WordPress? Read through the Translator Handbook to get started.

螢幕擷圖

  • AM LottiePlayer works with Gutenberg…
  • …as well as Divi Builder…
  • …Elementor…
  • …and even Flatsome!

適用於區塊編輯器

這個外掛提供 2 個可供 Gutenberg/區塊編輯器使用的區塊。

  • AM LottieCover Add a Lottie animation with a text overlay — great for headers.
  • AM LottiePlayer Play Lottie animations on your WordPress website.

安裝方式

Automatic installation

Automatic installation is the easiest option — WordPress will handle the file transfer, and you won’t need to leave your web browser.

  1. Log in to your WordPress dashboard
  2. Navigate to the Plugins menu
  3. Search for AM LottiePlayer
  4. Click Install Now and WordPress will take it from there
  5. Activate the plugin through the Plugins menu in WordPress

Manual installation

  1. Upload the entire ‘am-lottieplayer’ folder to your plugins directory
  2. Activate the plugin through the Plugins menu in WordPress

After activation

  1. Go to the WordPress Block Editor / Elementor / Divi Builder / Flatsome UX Builder
  2. Add new block / widget / module
  3. Search for Lottie
  4. Click on Lottie to add the block

If you want to use the shortcode [am-lottieplayer], it has the following parameters:

  • src: string (required)
  • autoplay: true | false, default: false
  • controls: true | false, default: false
  • loop: true | false, default: false
  • objectfit: cover | contain | none, default: contain
  • speed: number (1 – 5), default: 1
  • direction: 1 | -1, default: 1
  • renderer: svg | canvas | html, default: svg
  • onclick: true | false, default: false
  • onmouseover: true | false, default: false
  • onmouseout: void | stop | pause | reverse, default: void

常見問題集

What is the structure of the shortcode?

The shortcode [am-lottieplayer] has the following parameters:

  • src: string (required)
  • autoplay: true | false, default: false
  • controls: true | false, default: false
  • loop: true | false, default: false
  • objectfit: cover | contain | none, default: contain
  • speed: number (1 – 5), default: 1
  • direction: 1 | -1, default: 1
  • renderer: svg | canvas | html, default: svg
  • onclick: true | false, default: false
  • onmouseover: true | false, default: false
  • onmouseout: void | stop | pause | reverse, default: void

Here’s an example: [am-lottieplayer src="https://storage.googleapis.com/aarsteinmedia/am.lottie" controls="true" ]

使用者評論

2023 年 2 月 6 日
Great plugin and good support. Will be using this on several sites. Keep up the development! 🙂
閱讀全部 3 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈AM LottiePlayer – Vector animations for WordPress〉的開發相關工作。

參與者

〈AM LottiePlayer – Vector animations for WordPress〉外掛目前已有 4 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將〈AM LottiePlayer – Vector animations for WordPress〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

2.5.1

  • Bugfix: Added polyfill for Buffer, allowing bitmap assets for dotLottie animations.

2.5.0

  • New Feature: Added play on scroll functionality

2.4.1

  • New Feature: Expanded possibility to play segments to Divi Builder

2.4

  • New Feature: Added possibility to play segments, in Gutenberg editor
  • Compability: Checked compability with new release of WordPress

2.3.3

  • Bugfix: Fixed issue with shortcode and namings

2.3.2

  • New Feature: Added support for selectors to Elementor, Flatsome, WPBakery and Divi

2.3.1

  • Bugfix: Fixed issue with Boomerang

2.3.0

  • New Feature: Added selector option for interactions
  • Bugfix: Fixed issue in Gutenberg where the player lost connection on block move

2.2.2

  • Bugfix: Issue prevented Gutenberg backend from working properly

2.2.1

  • Optimization: Preparatioins for future functionality expansion

2.2.0

  • New Feature: Adding preview of animations in Media Library

2.1.5

  • Optimization: Minor patches

2.1.4

  • New Feature: Added partial support for WPBakery

2.1.3

  • Bugfix: Minor errors in shortcode
  • Optimization: More options for screen readers

2.1.2

  • Optimization: Bugfix in frontend script

2.1.1

  • Optimization: Minor patches

2.1.0

  • New Feature: Added support for Flatsome UX Builder

2.0.4

  • Bugfix: An error caused shortcode not to load necessary scripts.

2.0.3

  • Optimization: WCAG compliance

2.0.2

  • Optimization: Less weight – same functionality!

2.0.0

  • New Feature: Added support for Elementor.
  • Optimization: Made scripts load dynamically only when used
  • Bugfix: Minor bugfixes

1.0.3

  • Optimization: Updates to animation engine. Faster and even more lightweight!

1.0.2

  • Bugfix: typo in dotLottie decompression, causing base64 encryption of bitmap images to break.