Skip to content

A solution to Use Lottie animations in Laravel Blade files

License

Notifications You must be signed in to change notification settings

Andre-ADPC/laravel-lottie

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Introduction | 简介

NOTE: this is still a work-in-progress | 注意:这仍然是一个正在进行的工作

The package has not been published yet.

As the name suggests, laravel-lottie can make it easier for you to use Lottie Animation JSON files, in Laravel Blade templates. It is also possible to use Ali-Pay's emoji Animations.

This package was forked from Pys/1992 on Github and is being adapted for use with both Lottie-Web and Bodymovin, running on Laravel 9 and PHP 8. It is still a work-in-progress, and this is my first attempt to create a Laravel package.

顾名思义,laravel-lottie 可以让你更轻松地在 Laravel Blade 模板中使用 Lottie Animation JSON 文件。 也可以使用 Ali-Pay 的 emoji Animations

这个包是从 Github 上的 Pys/1992 派生的,并且正在适应 Lottie-Web 和 Bodymovin,在 Laravel 9 和 PHP 8 上运行。 它仍在进行中,这是我第一次尝试创建 Laravel 包。

Usage | 用法

Installing the package | 安装包

composer require pys/laravel-blade-lottie

Publishing the Required Files | 发布必要文件

php artisan lottie:publish

This operation will copy the configuration file to config/lottie.php and will also publish the required frontend files to public/vendor/lottie.

这个操作会把配置文件复制为 config/lottie.php,还会把需要用到的前端文件发布到 public/vendor/lottie

Opting-out of Package Discovery | 选择退出包发现

If you would like to disable "package discovery" for this package, you may list the package name in the extra section of Your application's composer.json file in the ROOT of Your application before running composer update, as shown below. You can refer to Laravel's Documentation to read more about managing the packages you use in the development of your applications.

如果您想禁用此包的“包发现”,您可以在运行 composer update 之前,在应用程序的根目录中的 composer.json 文件的 extra 部分列出包名称,如图所示 以下。 您可以参考 Laravel 的文档 了解更多关于应用程序开发中的包管理。

"extra": {
"laravel": {
    "dont-discover": [
        "adpc/laravel-lottie"
    ]
}

},

Implementing app.js into the Blade File | 在 Blade 文件中实现 app.js

Add <script src="{{ asset('vendor/lottie/app.js') }}" defer></script> to the required pages in the script section. Generally, adding it to the views/layouts/app.blade.php will be more convenient.

在需要用到页面中添加 <script src="{{ asset('vendor/lottie/app.js') }}" defer></script>。但是通常来说,把它添加到 views/layouts/app.blade.php 中会比较方便。

引入 lottie animation files

lottie files 官方网站上可以免费下载 json 文件。下载文件需要注册一个账号,我在这里提供了一个测试用的 json,将其中的内容复制到 storage/app/public/lottiefiles/hello.json

Using the Package Components | 使用包组件

After introducing <x-lottie-hello/> in views/layouts/app.blade.php, and opening your project in a browser, you should be able to see a GIF render of the JSON file:

views/layouts/app.blade.php 中引入 <x-lottie-hello/> 后,在浏览器中打开您的项目,您应该能够看到 JSON 文件的 GIF 渲染:

About app.js | 关于 app.js

Firstly, lottie-web is essential, or, you could use Bodymovin's package which has a bit more functionality if you require it. The laravel-lottie package also uses alpinejs. Alpine.JS is used to implement some of the JS operations. These vendor files are packaged in public/vendor/lottie/app.js, so you can use them directly.

You can also package lottie-web, bodymovin and alpinejs in your own app.js. If you do, then the above mentioned <script src="{{ asset('vendor/lottie/app. js') }}" defer></script> is unnecessary.

首先,lottie-web 是必不可少的,或者,你可以使用Bodymovin's package,如果您需要,它具有更多功能。 laravel-lottie 包也使用 alpinejs。 Alpine.JS 用于实现一些 JS 操作。 这些 vendor 文件打包在 public/vendor/lottie/app.js 中,因此您可以直接使用它们。

您也可以将 lottie-webbodymovinalpinejs 打包到自己的 app.js 中。 如果你这样做了,那么上面提到的<script src="{{asset('vendor/lottie/app.js') }}" defer></script>就没有必要了。

Example code snippets | 示例代码片段

<script src="js/bodymovin.js" type="text/javascript"></script>
<!-- OR -->
<script
  src="https://cdnjs.com/libraries/bodymovin"
  type="text/javascript"
></script>

How to Configure the Animation's Parameters | 如何配置动画的参数

It depends on lottie-web, which provides some properties and methods for controlling animations. In the case of Bodymovin's Usage, please refer to their documentation.

它依赖于lottie-web,它提供了一些控制动画的属性和方法。 关于 Bodymovin 的使用,请参考他们的文档

Loop Control | 属性

In config/lottie.php you can define the global loop playback property. If it is defined separately for each component, you can do this:

config/lottie.php 中可以定义全局的是否循环播放属性,如果为每个组件单独定义,可以这样做:

<x-lottie-hello loop="true" />

or | 或者

<x-lottie-hello loop="3" />

Or use abbreviated as: | 或者简写为:

<x-lottie-hello loop />

The autoplay Attribute | 自动播放属性

The global autoplay property can also be defined in config/lottie.php. If it is defined separately for each component, you can do the following:

config/lottie.php 中可以定义全局的是否自动播放属性,如果为每个组件单独定义,可以这样做:

<x-lottie-hello autoplay="false" />

Or use abbreviated as: | 或者简写为:

<x-lottie-hello autoplay />

Call Method | 调用方法

In the blade component, when alpine.js is initialized, the lottie-web instance is bound to animation. So, you can use animation to call the methods provided by lottie-web to control the animation.

For example, if you want a click animation to stop, you can do so by calling animation.stop() in the click event. click is provided by alpine.js, you can read more about various usage cases at alpinejs#use.

在刀片组件中,初始化 alpine.js 时,lottie-web 实例绑定到 animation。因此,您可以使用 animation 调用 lottie-web 提供的方法来控制动画。

例如,如果您希望点击动画停止,您可以通过在点击事件中调用 animation.stop() 来实现。 click 由 alpine.js 提供,您可以在 alpinejs#use 阅读更多关于各种使用案例的信息。

<x-lottie-hello @click="animation.stop()" />

自定义 class

自定 class 的会被追加到动画的容器上,参考 laravel 文档

例如,可以自定义 class:

<x-lottie-hello class="h-16 w-auto z-20" />

自定义非 class 属性

自定属性的会被添加到动画容器上,如果已存在相同属性,则会把原来的覆盖,参考 laravel 文档

例如,可以自定义 style:

<x-lottie-hello style="w-100px h-auto z-10 bg-gray-700 " />

About 'data_source' | 关于 'data_source'

Support to configure url and content. If a url is selected, the browser will send a request to obtain JSON data, which means that the network overhead will be increased; and if content is selected, the JSON data will be rendered through the backend, appended to HTML , and sent to the frontend. If the JSON data is large, the HTML page code might also get quite large. This hasn't been tested, yet.

About

A solution to Use Lottie animations in Laravel Blade files

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • PHP 94.8%
  • JavaScript 5.2%