Class: EffectSystem
特效系统
js
// stage.effectSystem.特效(对象, 特效参数:{参数n:参数值})
// 例如:
stage.effectSystem.flash(node, {times: 5, duration:500}).play();
一个特效源码实现:
ts
// 生成一个线条流动的特效动画实例
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
Properties
Methods
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
flash
flash(nodeOrLink
, opt?
): Animation
生成一个闪烁的特效动画实例
Parameters
Name | Type |
---|---|
nodeOrLink | Node | Link |
opt | FlashOpt |
Returns
一个闪动动画
flow
flow(nodeOrLink
, opt?
): Animation
生成一个线条流动的特效动画实例
Parameters
Name | Type |
---|---|
nodeOrLink | Node | Link |
opt | FlowOpt |
Returns
imageFilter
imageFilter(node
, color
): void
使用指定颜色修改节点的图片, 该方法性能敏感,不适合在循环中频繁调用
js
// 这是一个异步方法,如果节点的图片还在加载中,会等加载完毕后修改节点的图片
// 源码参考:
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
lookAt
lookAt(layer
, opt?
): Animation
Parameters
Name | Type |
---|---|
layer | Layer |
opt | Object |
opt.x | number |
opt.y | number |
Returns
rippling
rippling(opt?
): AENode
生成一个’涟漪‘(圆形扩散)的特效节点对象
Parameters
Name | Type |
---|---|
opt | RipplingOpt |
Returns
unexpandScale
unexpandScale(node
, opt?
): Animation
节点逐渐收起来的效果
Parameters
Name | Type |
---|---|
node | Node |
opt | UnexpandScaleOpt |
Returns
waterLike
waterLike(colors?
, width?
, height?
): AENode
‘水’ 特效, 默认渐变色为: ['white', 'green', 'rgb(rgb(0,87,55))'] 即:白色 -> 绿色 -> 墨绿色
js
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
xyToCenter
xyToCenter(layer
, opt?
): Animation
移动’镜头‘到某个坐标的特效
Parameters
Name | Type |
---|---|
layer | Layer |
opt | Object |
opt.x | number |
opt.y | number |