Class: EffectSystem

特效系统

// stage.effectSystem.特效(对象, 特效参数:{参数n:参数值})
// 例如:
stage.effectSystem.flash(node, {times: 5, duration:500}).play();

一个特效源码实现：

   
// 生成一个线条流动的特效动画实例
flow(nodeOrLink: Node | Link, opt: { lineDash?: Array<number>, direction?: 'clockwise'|'anticlockwise' } = {}) {
   let lineDash = opt.lineDash || [3, 2];
   let direction = opt.direction || 'clockwise';

   let dir  = direction == 'clockwise' ? 1 : -1;

   let animationSystem = this.animationSystem;

   nodeOrLink.css({
       lineDash: lineDash
   });

   let animation = animationSystem.anime({
       from: [0],
       to: [300],
       update: (arr) => {
           nodeOrLink.css({
               lineDashOffset: -arr[0] * dir
           });
       },
       times: 20,
       duration: 10000
   });
   return animation;
}

Table of contents

Constructors

• constructor

Properties

• animationSystem
• stage

Methods

• colorFilter
• expandScale
• flash
• flow
• imageFilter
• linkMark
• lookAt
• rippling
• unexpandScale
• waterLike
• xyToCenter

Constructors

constructor

new EffectSystem(stage, animationSystem)

Parameters

Name	Type
stage	Stage
animationSystem	AnimationSystem

Properties

animationSystem

animationSystem: AnimationSystem

---

stage

stage: Stage

Methods

colorFilter

colorFilter(node, color): void

颜色滤镜

Parameters

Name	Type
node	Node
color	number[]

Returns

void

---

expandScale

expandScale(node, opt?): Animation

节点展开, 节点的宽高从指定尺寸（默认从0）逐渐变为当前尺寸

Parameters

Name	Type
node	Node
opt	ExpandScaleOpt

Returns

Animation

---

flash

flash(nodeOrLink, opt?): Animation

生成一个闪烁的特效动画实例

Parameters

Name	Type
nodeOrLink	Node | Link
opt	FlashOpt

Returns

Animation

一个闪动动画

---

flow

flow(nodeOrLink, opt?): Animation

生成一个线条流动的特效动画实例

Parameters

Name	Type
nodeOrLink	Node | Link
opt	FlowOpt

Returns

Animation

---

imageFilter

imageFilter(node, color): void

使用指定颜色修改节点的图片, 该方法性能敏感，不适合在循环中频繁调用

// 这是一个异步方法，如果节点的图片还在加载中，会等加载完毕后修改节点的图片
// 源码参考:
imageFilter(node: Node, color: Array<number> ){
node.getImage((image) => {
   if(image == null){
   return;
   }

   //生成一张带颜色滤镜的新图片
   let filterImg = ImageUtil.colorFilter(image, color);

   // 替换节点的原图片
   node.setImage(filterImg);
});
}

Parameters

Name	Type
node	Node
color	number[]

Returns

void

---

linkMark

linkMark(link, opt?): Node

在连线的中间位置放置一个文本符号(默认是emoji符号：❌)

可以用来表示：断开、告警、状态等

类似的其他emoji符号：🚫 ❗ ️💢️ ❓ ✅

Parameters

Name	Type
link	Link
opt	Object
opt.color?	string
opt.font?	string
opt.text?	string

Returns

Node

---

lookAt

lookAt(layer, opt?): Animation

Parameters

Name	Type
layer	Layer
opt	Object
opt.x	number
opt.y	number

Returns

Animation

---

rippling

rippling(opt?): AENode

生成一个’涟漪‘（圆形扩散）的特效节点对象

Parameters

Name	Type
opt	RipplingOpt

Returns

AENode

---

unexpandScale

unexpandScale(node, opt?): Animation

节点逐渐收起来的效果

Parameters

Name	Type
node	Node
opt	UnexpandScaleOpt

Returns

Animation

---

waterLike

waterLike(colors?, width?, height?): AENode

‘水’ 特效, 默认渐变色为: ['white', 'green', 'rgb(rgb(0,87,55))'] 即：白色 -> 绿色 -> 墨绿色

let waterEffect = stage.effectSystem.waterLike(['white', 'green', 'rgb(rgb(0,87,55))'], 80, 80,);
let node = waterEffect.objects[0]; 
node.setXY(0, 0);
layer.addChild(node);
waterEffect.play();

Parameters

Name	Type	Default value	Description
colors?	string[]	undefined	颜色 [color1, color2, color3], 默认：['white', 'green', 'rgb(rgb(0,87,55))']
width	number	60	初始化的宽度, 默认60
height	number	60	初始化的高度, 默认60

Returns

AENode

---

xyToCenter

xyToCenter(layer, opt?): Animation

移动’镜头‘到某个坐标的特效

Parameters

Name	Type
layer	Layer
opt	Object
opt.x	number
opt.y	number

Returns

Animation