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 包。
composer require pys/laravel-blade-lottie
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
。
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"
]
}
},
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 files 官方网站上可以免费下载 json 文件。下载文件需要注册一个账号,我在这里提供了一个测试用的 json,将其中的内容复制到 storage/app/public/lottiefiles/hello.json
。
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 渲染:
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-web
、bodymovin
和 alpinejs
打包到自己的 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>
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 的使用,请参考他们的文档。
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 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 />
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 的会被追加到动画的容器上,参考 laravel 文档。
例如,可以自定义 class:
<x-lottie-hello class="h-16 w-auto z-20" />
自定属性的会被添加到动画容器上,如果已存在相同属性,则会把原来的覆盖,参考 laravel 文档。
例如,可以自定义 style:
<x-lottie-hello style="w-100px h-auto z-10 bg-gray-700 " />
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.