README

一个 PHP 包，允许您直接或更新后加载 lottie 文件到您的 blade。

安装

使用 composer 安装

composer require aldeebhasan/lottie-laravel:1.1.0

包新增了缓存功能，您可以通过以下键在您的 env 文件中启用它

LOTTIE_CACHE=false
LOTTIE_CACHE_PERIOD=60

您可以使用以下命令发布配置文件

php artisan vendor:publish --provider="Aldeebhasan\LottieLaravel\LottieLaravelServiceProvider" --tag="config"

基本用法

Lottie 文件组件

您可以直接在 blade 中使用 lottie 文件组件，如下所示

 <x-lottie 
 class="class-1 class-2" 
 style="color:red; background-color:blue;" 
 path="path to lottie file (.json)"
 animType="animation type (ex: svg)"
 loop="true|false"
 autoplay="true|false"
 :data="array of the lottie file content"
 >
 
 </x-lottie>

所有属性都是可选的。无论如何，必须指定 path 或 animationData 以显示 lottie。

Lottie 文件管理器

该包还提供了一种管理 lottie 文件并对它们进行更新（如更改颜色）的管理器

您可以从远程 URL 加载 lottie 文件或将文件内容直接传递。请查看以下内容

use \Aldeebhasan\LottieLaravel\Facades\Lottie;
//from remote
$content = Lottie::loadUrl("https://example.json");
//from local array
$content = Lottie::loadData([ 
    "v" => "4.8.0", 
    "meta" => [
         "g" => "LottieFiles AE 3.0.2", 
         "a" => "", 
         "k" => "", 
         "d" => "", 
         "tc" => "" 
      ], 
      ....
    ]);

将 lottie 文件加载到管理器后，您可以使用以下方式更改颜色

$content = Lottie::loadUrl("https://example.json")
   ->replaceColor("#000","#0f0f0f") // color with color
   ->replaceColor(["#000","#00f"],"#fff") // color list with color
   ->replaceColor(["#000","#00f"],["#fff","#ff0"]); // color list with color list

函数 replaceColor 还接受 rgb 和 rgba 颜色编码

$content = Lottie::loadUrl("https://example.json")
   ->replaceColor("rgb(0,0,0)",'rgba(255,255,0)'); // color with color

要检索更新的 lottie 数据，您可以使用我们的 export 函数

$content = Lottie::loadUrl("https://example.json")
   ->replaceColor("rgb(0,0,0)",'rgba(255,255,0)')
   ->export();

最后，感谢 lottie-web 包的作者，没有他们的 lottie 播放器，我们无法完成这项工作。

您可以使用我们的辅助函数 lottie() 直接从 lottie 管理器获取实例

$content = lottie()->loadUrl("https://example.json");

直接渲染

现在您可以直接在 blade 文件中渲染所需的 lottie 文件。您只需提供 lottie 文件数据或路径，就会得到您的视图。

//From  URL
{!! lottie()->loadUrl('https://assets8.lottiefiles.com/packages/lf20_tuzu65Bu6N.json')->render() !!}

//From Data
$data = lottie()->loadUrl('https://assets8.lottiefiles.com/packages/lf20_tuzu65Bu6N.json')->export();
{!! lottie()->loadData($data)->render() !!}

示例

直接在 blade 中加载 lottie 文件

<x-lottie 
    class="w-50" 
    style="background-color:gray"  
    path="https://assets8.lottiefiles.com/packages/lf20_PmGV4skHBv.json"/>

使用管理器加载 lottie 文件并将其传递给 lottie 组件

 @php($data = lottie()
            ->loadUrl('https://assets8.lottiefiles.com/packages/lf20_PmGV4skHBv.json')
            ->export())
<x-lottie 
    loop="true"   
    :data='$data' />

@php($data2 = lottie()
            ->loadUrl('https://assets8.lottiefiles.com/packages/lf20_PmGV4skHBv.json')
            ->replaceColor(["#70D0EF","#B7B7B7","#FF5900"],["#F64848","#FFA900","#003BFF"])
            ->export())
<x-lottie 
    loop="true"   
    :data='$data2' />

许可证

Laravel Lottie 库包是根据 MIT 许可证 (MIT) 许可的。

安全联系方式

要报告安全漏洞，直接联系开发者的联系邮箱这里。

aldeebhasan / lottie-laravel

维护者

详细信息