A Simple Single-Sprite Card Flip in Cocos Creator

Many card-flip examples use two sprite nodes. This version uses only one: rotate it to 90 degrees, replace the sprite frame while it is edge-on, then rotate it back to zero.

tween(this._view._ImgC_poker.node)
    .to(0.5, { eulerAngles: new Vec3(0, 90, 0) })
    .call(() => {
        this._view._ImgC_poker.getComponent(Sprite).spriteFrame =
            this.pokerImg.getSpriteFrame('card_2');
    })
    .to(0.5, { eulerAngles: new Vec3(0, 0, 0) })
    .start();

The frame changes when the card has almost no visible width, which hides the transition.