Hi,
Who know how to create the flip card animation in Javascript code?
Flip Animation look like the picture bellow:
(from :http://gameit.ro/2014/04/card-flipping-effect-using-cocos2d-x-without-fisheye-distortion/)
My Code:
properties: {
card: {
default: null,
type: cc.Node
},
},
onLoad: function () {
this.flip();
},
flip: function(){
let front = this.card.getChildByName("front");
let back = this.card.getChildByName("back");
var rotationBy = cc.rotateBy(1, 0, 90);
let changeOpacity = cc.callFunc(() => {
front.opacity = 0 ;
});
let flipBack = cc.callFunc(() => {
this.flip2();
});
let seq = cc.sequence(rotationBy, changeOpacity, rotationBy, cc.delayTime(2), flipBack);
this.card.runAction(seq);
},
flip2: function(){
let front = this.card.getChildByName("front");
let back = this.card.getChildByName("back");
var rotationBy = cc.rotateBy(1, 0, 90);
let changeOpacity = cc.callFunc(() => {
front.opacity = 255;
});
let flipBack = cc.callFunc(() => {
this.flip();
});
let seq = cc.sequence(rotationBy, changeOpacity, rotationBy, cc.delayTime(2), flipBack);
this.card.runAction(seq);
},