# cloud-web

**Repository Path**: Tianyu201809/cloud-web

## Basic Information

- **Project Name**: cloud-web
- **Description**: lottie动画云聚云散插件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-24
- **Last Updated**: 2024-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 云聚云散过渡插件

直接引用插件查看效果
example中index.html 为使用案例

本项目是基于lottie开发的云聚云散效果

lottie-web官网: https://airbnb.io/lottie/#/web

assets中是设计师提供的效果文件(.json)
src是插件项目的源代码
example是demo项目


# 使用方式说明

### 引入方式 (esm)
```js
	import { CloudWeb } from '../dist/CloudWeb.esm.js'
```
### 初始化
```js
	const cloud = new CloudWeb({
		container: document.querySelector('.cloud-web-container'),
		renderer: 'svg',
		onComplete: (res) => {
			console.log('播放完成', res);
		}
	});
```

### 完整的参数列表
```ts
interface {
		animateName: string; // 动画名称
		animationData: Object; // 动画原始数据， 不传递则采用云聚云散的效果(.json)
		loop: boolean; // 是否循环
		autoplay: boolean; // 是否自动播放
		renderer: 'svg' | 'canvas' | 'html'; // 渲染方式
		speed: number; // 播放速度
		container: HTMLElement; // dom元素，用来渲染效果的容器
		onComplete: Function; // 动画播放完成回调
		onLoopComplete: Function; // 循环播放完成回调
		onEnterFrame: Function; // 进入渲染帧回调
		onSegmentStart: Function; // 分段开始回调
}

```

### api

`play(number)` 播放动画， number为1时，正向播放， -1时为倒放
`geAnimateObject()` 获取lottie动画实例对象
`pause()` 暂停
`destory()` 销毁
`setSpeed(number)` 设置速度
`resetSpeed()` 重置速度
`resize(width, height)` resize