AlterAnim.ts
3.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
import { DummyNode } from "../CCDummyObjects";
const { ccclass, property,menu} = cc._decorator;
@ccclass
@menu("自定义UI组件/AlterAnim")
export default class AlterAnim extends cc.Component {
@property({ type: Number, tooltip: "动画时长" })
animTime: number = 0.3;
@property({ type: cc.Node, tooltip: "弹出框遮罩" })
maskNode: cc.Node = DummyNode;
@property({ type: cc.Node, tooltip: "内容node父节点" })
mainNode: cc.Node = DummyNode;
onEnable() {
this._showUIAnim(this.maskNode,this.mainNode);
}
/**
*
* @param maskNode 遮罩node
* @param mainNode 所有内容node
* @param params callback：执行完成后的回调，maskNodeOpacityValue遮罩node的opacity值
*/
_showUIAnim(maskNode: cc.Node, mainNode: cc.Node, params = { callback: () => { }, maskNodeOpacityValue: 200 }): void {
maskNode.opacity = 0;
maskNode.active = true;
mainNode.scale = 0;
mainNode.active = true;
// 播放背景动画
let opacityValue = params.maskNodeOpacityValue;
cc.tween(maskNode)
.to(this.animTime * 0.8, { opacity: opacityValue })
.call(() => {
})
.start();
// 播放主体动画
cc.tween(mainNode)
.to(this.animTime, { scale: 1 }, { easing: 'backOut' })
.call(() => {
// 弹窗已完全展示（动画完毕）
if (params.callback) params.callback();
})
.start();
}
hideUIAnim(params){
this._hideUIAnim(this.node,this.maskNode,this.mainNode,params);
}
/**
*
* @param parentNode 该组件挂载的node
* @param maskNode 遮罩node
* @param mainNode 所有内容node
* @param params callback：执行完成后的回调，maskNodeOpacityValue遮罩node的opacity值
*/
_hideUIAnim(parentNode: cc.Node, maskNode: cc.Node, mainNode: cc.Node, params = { callback: () => { } }): void {
// 拦截点击事件
let blocker = parentNode.getChildByName("blocker");
if (!blocker) {
blocker = new cc.Node('blocker');
blocker.addComponent(cc.BlockInputEvents);
blocker.setParent(parentNode);
blocker.setContentSize(parentNode.getContentSize());
}
blocker.active = true;
// 播放背景动画
cc.tween(maskNode)
.delay(this.animTime * 0.2)
.to(this.animTime * 0.8, { opacity: 0 })
.call(() => {
})
.start();
// 播放主体动画
cc.tween(mainNode)
.to(this.animTime, { scale: 0 }, { easing: 'backIn' })
.call(() => {
blocker.active = false;
if (params.callback) params.callback();
})
.start();
}
}