PHPackages                             pys/laravel-blade-lottie - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. pys/laravel-blade-lottie

Abandoned → [ys/laravel-blade-lottie](/?search=ys%2Flaravel-blade-lottie)Library[Templating & Views](/categories/templating)

pys/laravel-blade-lottie
========================

A lottie component for laravel blade.

v1.2.0(2y ago)78882MITPHPPHP ^7.4|^8.0

Since Mar 31Pushed 2y ago1 watchersCompare

[ Source](https://github.com/YunshuaiPeng/laravel-blade-lottie)[ Packagist](https://packagist.org/packages/pys/laravel-blade-lottie)[ RSS](/packages/pys-laravel-blade-lottie/feed)WikiDiscussions main Synced 3d ago

READMEChangelogDependencies (1)Versions (4)Used By (0)

顾名思义，laravel-blade-lottie 可以让你更方便的在 blade 模板中使用 [lottie animation json files](https://lottiefiles.com/)，也可以使用 [iconfont.cn Lottie 库](https://www.iconfont.cn/lotties/index)中的动画。

用法
--

[](#用法)

### 安装包

[](#安装包)

```
composer require ys/laravel-blade-lottie

```

### 发布必要文件

[](#发布必要文件)

```
php artisan lottie:publish

```

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

### 引入 app.js

[](#引入-appjs)

在需要用到页面中添加 ``。但是通常来说，把它添加到 `views/layouts/app.blade.php` 中会比较方便。

### 引入 lottie animation files

[](#引入-lottie-animation-files)

在 [lottie files](https://lottiefiles.com/) 官方网站上可以免费下载 json 文件。下载文件需要注册一个账号，我在[这里](https://raw.githubusercontent.com/yunshuaipeng/laravel-blade-lottie/main/resources/lottie-files/hello-lottie.json)提供了一个测试用的 json，将其中的内容复制到 `storage/app/public/lottiefiles/hello.json`。

### 使用组件

[](#使用组件)

在 `views/layouts/app.blade.php` 引入 ``，打开你的项目地址，就可以看到：

[![](https://camo.githubusercontent.com/dcd299ab7efd750ead637b92467a70ec05aebd564e904532a6eff7f4e8ee826e/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f707973313939322f73746f72616765406d61696e2f32303231303333313131303331332e676966)](https://camo.githubusercontent.com/dcd299ab7efd750ead637b92467a70ec05aebd564e904532a6eff7f4e8ee826e/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f707973313939322f73746f72616765406d61696e2f32303231303333313131303331332e676966)

关于 app.js
---------

[](#关于-appjs)

首先，[lottie-web](https://github.com/airbnb/lottie-web) 是必不可少的，另外我还使用了 [alpinejs](https://github.com/alpinejs/alpine)，用于实现一些 js 的操作。我把他们打包到了 `public/vendor/lottie/app.js` 中，你可以直接使用。

你也可以在自己的 `app.js` 中打包 `lottie-web` 和 `alpinejs`，如果这样做，那么上面提到的的 `` 就没必要再引入了。

如何控制动画
------

[](#如何控制动画)

这取决与 [lottie-web](https://github.com/airbnb/lottie-web#usage)，它提供了一些属性和方法，用于控制动画。

### loop 属性

[](#loop-属性)

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

```

```

或者简写为：

```

```

### autoplay 属性

[](#autoplay-属性)

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

```

```

或者简写为：

```

```

### 调用方法

[](#调用方法)

在 blade 组件中，初始化 alpinejs 的时候，`lottie-web` 实例被绑定给了 `animation`。所以，可以使用 `animation` 来调用 `lottie-web` 提供的方法，从而控制动画。

例如，如果想要单击动画停止播放，可以在 click 事件中，通过调用 `animation.stop()` 来实现。click 是 alpinejs 提供的，在 [alpinejs#use](https://github.com/alpinejs/alpine#use) 可以查看更多用法。

```

```

自定义 class
---------

[](#自定义-class)

自定 class 的会被追加到动画的容器上，参考 [laravel 文档](https://laravel.com/docs/master/blade#default-merged-attributes)。

例如，可以自定义 class：

```

```

自定义非 class 属性
-------------

[](#自定义非-class-属性)

自定属性的会被添加到动画容器上，如果已存在相同属性，则会把原来的覆盖，参考 [laravel 文档](https://laravel.com/docs/master/blade#non-class-attribute-merging)。

例如，可以自定义 style：

```

```

关于 data\_source
---------------

[](#关于-data_source)

支持配置 url 和 content。选择 url ，浏览器会发请求去获取 json 数据，意味着会增加网络开销；而选择 content，则 json 数据会通过后端渲染，附加到 HTML 中发送给前端，如果 json 数据很大，则你的 HTML 页面可能也会变得很大，但是我没有测试。

如果使用 url 的方式，不要忘了在 .env 文件中配置正确的 APP\_URL，以及执行 `php artisan storage:link`

###  Health Score

30

—

LowBetter than 64% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity21

Limited adoption so far

Community5

Small or concentrated contributor base

Maturity59

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~436 days

Total

3

Last Release

996d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/87582538b40b6bf0ba6e5bcc2d496ae5e42c680bf5d2e2579b6e480d354693c0?d=identicon)[Yunshuai](/maintainers/Yunshuai)

---

Tags

alpinejslaravellottie-fileslottie-weblaravelbladelottieAE Animation

### Embed Badge

![Health badge](/badges/pys-laravel-blade-lottie/health.svg)

```
[![Health](https://phpackages.com/badges/pys-laravel-blade-lottie/health.svg)](https://phpackages.com/packages/pys-laravel-blade-lottie)
```

###  Alternatives

[spatie/laravel-blade-comments

Add debug comments to your rendered output

177325.5k](/packages/spatie-laravel-blade-comments)[radic/blade-extensions

Laravel package providing additional Blade extensions: foreach (with $loop data like twig), break, continue, set,array (multiline), etc

271321.7k5](/packages/radic-blade-extensions)[daikazu/laravel-glider

Start using Glide on-the-fly instantly in your Laravel blade templates.

882.3k](/packages/daikazu-laravel-glider)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)