参考:https://www.bilibili.com/video/BV1kJ411u72v?p=2
1.选择要生成动画的弹窗 》添加组件 》其他组件 》Animation
结果就是这样的
这里看到需要 animation-clip 文件,下面制作animation-clip文件
2.在 assets 中新建文件夹 animClip , 专门用来存放 animation-clip 文件的,名字可以随便取
右键 》新建 》Animation Clip,这里我们需要用到两个动画,所以我新建了两个animation-clip文件
3.动画制作
4.开始由无到有的播放,代码
cc.Class({
extends: cc.Component,
properties: {
scrollView: {
default: null,
type: cc.ScrollView
},
ruleTip: {
default: null,
type: cc.Node
}
// scrollView: cc.ScrollView
},
// LIFE-CYCLE CALLBACKS:
onLoad() {
this.ruleTip = this.ruleTip.getComponent(cc.Animation);
this.ruleTip.node.active = false; //这里要node是因为this.ruleTip = this.ruleTip.getComponent(cc.Animation);这个重新获取了Animation,
// 如果this.ruleTip.node.active = false;
// 放在this.ruleTip = this.ruleTip.getComponent(cc.Animation);这句的上面就不用node了
},
bottonClick(target, data) {
this.ruleTip.node.active = true;
this.ruleTip.play('scaleToShow')
},
5.隐藏,制作动画,就是将上面的显示的动画相反制作,这里就不讲解了
6.隐藏代码
注意:如果需要隐藏,是需要回调函数的
制作回调函数:
右键方块:点击编辑,在里面写上函数名称
这里可以添加很多函数
完整代码:
cc.Class({
extends: cc.Component,
properties: {
scrollView: {
default: null,
type: cc.ScrollView
},
ruleTip: {
default: null,
type: cc.Node
}
// scrollView: cc.ScrollView
},
// LIFE-CYCLE CALLBACKS:
onLoad() {
this.ruleTip = this.ruleTip.getComponent(cc.Animation);
this.ruleTip.node.active = false; //这里要node是因为this.ruleTip = this.ruleTip.getComponent(cc.Animation);这个重新获取了Animation,如果this.ruleTip.node.active = false;放在this.ruleTip = this.ruleTip.getComponent(cc.Animation);这句的上面就不用node了
this.ruleTip.scaleToHidePlayEnd = function() {
this.ruleTip.node.active = false;
}.bind(this)
},
bottonClick(target, data) {
if (data == 'help') {
this.ruleTip.node.active = true;
this.ruleTip.play('scaleToShow')
} else if (data == 'close') {
this.ruleTip.play('scaleToHide');
}
},