---
navTitle: aninationEffect
---
# aninationEffect - 动效背景扩展

在制作仪表板或者其他页面时，往往存在这样一种需求：背景是一张带特效的图片效果，比如星空效果，里面的星星在闪动或者移动。

传统的做法是使用gif图片或者使用css脚本控制样式动起来。这样做的缺点比较明显：较难复用，大量的定制开发，动画卡顿。使用动效背景扩展，可以做到组件化开发特效，一次开发无限复用。

## 扩展文件结构

1. [package.json](#package.json) 定义扩展的配置信息。
2. [main.action](#main.action) 定义扩展的执行逻辑。

### package.json

properties中定义了这个扩展公布的属性名，按照属性栏的格式编写。

```json
{
	"name": "succ-animationEffect-birds",
	"displayName": "飞鸟特效",
	"categories": ["animationEffect"],
	"version": "1.0.0",
	"compatibilities": {
		"platform": "^4.0.0"
	},
	"author": {
		"name": "succez"
	},
	"main": "main",
	"thumbnail": "thumbnail.png",
	"contributes": {
		"animationEffect": {
			"properties": [{
				"propertyName": "backgroundColor",
				"propertyType": "colorButton",
				"gradientColorVisible" : false,
				"defaultValue": "bgColor1",
				"caption": "背景颜色"
			}, {
				"propertyName": "color1",
				"propertyType": "colorButton",
				"gradientColorVisible" : false,
				"defaultValue": "color5",
				"caption": "躯干颜色"
			}, {
				"propertyName": "color2",
				"propertyType": "colorButton",
				"defaultValue": "color3",
				"gradientColorVisible" : false,
				"caption": "两翼颜色"
			}, {
				"propertyName": "birdSize",
				"propertyType": "slider",
				"caption": "飞鸟大小",
				"expandVisible": false,
				"expend": true,
				"step": 0.1,
				"max": 3,
				"min": 0.5,
				"defaultValue": 1
			}, {
				"propertyName": "speedLimit",
				"propertyType": "slider",
				"caption": "飞鸟速度",
				"expandVisible": false,
				"expend": true,
				"max": 10,
				"min": 1,
				"defaultValue": 3
			}]
		}
	}
}
```

### main.action

动效扩展的main.ts中需要实现一个class继承IAnimationEffect接口，并默认导出。

```typescript
/**
 * 
 * 	动效扩展是用来扩展dom能力的一种扩展机制，可以为指定dom 赋予一些背景特效，动画特效等能力。
 *  每个动效扩展应该实现AnimationEffect接口并在package.json中公布支持的属性列表，外界可以通过设置这些属性来调节特效的显示效果。
 * 
 */
interface IAnimationEffect {

	/**
	 * 返回扩展的名称。定义在package.json中的name。
	 */
	getName(): string;

	/**
	 * 渲染方法实现。
	 * 需要注意的是，调用的地方传递的是增量的opt,扩展实现的时候需要处理：合并默认值，对比上次的opt,决定是否增量渲染。
	 */
	render(opt:AnimationEffectOption): Promise<void>;

	/**
	 * dom大小改变，会调用resize方法来resize动效。
	 */
	resize():void;

	/**
	 * 销毁动效。
	 */
	dispose():void;
}
```