点滴滴滴

dot Lottie-js是创建并抽象出bot Lottys的主要库.

备有的全部文件 这里。 。 。 .

快速使用指南

1. 使用您最喜欢的套件操纵器安装

安装多洛蒂- js

pnpm add @dotlottie/dotlottie-js

npm i @dotlottie/dotlottie-js

yarn install @dotlottie/dotlottie-js

导入中 :

浏览器

import { DotLottie } from '@dotlottie/dotlottie-js'

节点

import { DotLottie } from '@dotlottie/dotlottie-js/node'

2. 利用库创建点Lottie

更多使用的案例查看文件 图书

import { DotLottie } from '@dotlottie/dotlottie-js';
//If running on Node
// import { DotLottie } from '@dotlottie/dotlottie-js/node';
import like_animation from './like.json';

async function createDotLottie(){
  const dotLottie = new DotLottie();

  // build dotLottie
  await dotLottie 
        .setAuthor('LottieFiles')
        .setVersion('1.0')
        .addAnimation({
          id: 'like_animation',
          data: like_animation,
          loop: true,
          autoplay: true
        })
        .addAnimation({
          id: 'cat_animation',
          url: 'https://my_cat_animation.json',
          loop: true,
          autoplay: false
        })
        .build()
  
  // download dotLottie
  await dotlottie.download('my_animation.lottie');
}

createDotLottie();

管理清单

一份清单 Json的文件会出现在你的洛蒂里面.

显示文件允许玩家知道其中包含的动画是什么,如何播放和更多. 所有这些设置都是通过与Dot Lottie对象和其中包含的Lottie Animation交互而自定义的.

可能的定制有两个层面,第一个层面是Dot Lottie层面,它涉及的事物有: author, (中文(简体) ), version 动画和更多。 第二个是动画层面,设置选项如 autoplay, (中文(简体) ), loop 还有更多.

所有点 Lottie 对象的定制选项都可见 这里。 。 。 .

所有动画对象定制选项都可见 这里。 。 。 .

框架中的使用

关于如何在React、Next.js、Vue和Nuxt 3中使用的实例,请参见 完整文档页。 。 。 .

发展

准则

• 使用 防御性编程 技术: 确保类型和范围 输入值,尽可能给本地代表投放值等.
• 不使用外部依赖性:在添加依赖性之前进行讨论。 检查 捆绑恐惧症 用于选择软件包大小和依赖性.
• 使用给定的eslint+prettier配置在 IDE 中使用代码格式化.
• 写入测试以覆盖所有具有有效值和无效值的函数和代码分支.

设置

git clone https://github.com/dotlottie/dotottie-js

cd dotlottie-js

pnpm i

大楼

pnpm run build

运行测试套件

pnpm run test