回调函数应用-翻牌效果

在炸金花游戏中, 有个看牌动作:三张反面牌经翻转180度后,显示牌面,用动作解体这个过程:

初始化三张牌及牌点---->设置翻牌前的Zorder ---->(从0到90翻转同时所有牌的中心点向第一张牌位置靠近直至重合)--->更改所有牌的牌点(更换显示帧)--->设置牌点显示时的Zorder--->从90到180度翻转同时所有牌移动到自己的位置----->动作结束回调。

例:

	void MyTest_1::runActionReverse()
	{
		CCSize size = CCDirector::sharedDirector()->getWinSize();
		CCPoint pt_0;
		for(int i = 0; i < CARDNUM ; i ++)
		{
			CCSprite* pSprite = CCSprite::spriteWithFile("send_card_1.png"); // 反面时的显示帧一样
			pSprite->setPosition( ccp(size.width/2 + i * 20, size.height/2) );// 20为牌间距
			this->addChild(pSprite,CARDNUM - i - 1, i + Tag_CardStart);  // CARDNUM 为宏 当前牌数3
			if(0 == i)
			{
				pt_0 = pSprite->getPosition();
				pSprite->runAction( CCSequence::actions(CCDelayTime::create(1), 
					CCOrbitCamera::actionWithDuration(0.5 , 1 , 0 , 0 , 90 , 0, 0), // 翻转90度
					CCCallFuncND::actionWithTarget(this , callfuncND_selector(MyTest_1::objectReset), (void*)i) , // 重置显示帧及Zorder
					CCOrbitCamera::actionWithDuration(0.5 , -1 , 0 , 90, 90 , 0, 0), NULL));
			}
			else
			{
					pSprite->runAction( CCSequence::actions(CCDelayTime::create(1),  
					CCSpawn::create(CCOrbitCamera::actionWithDuration(0.5 , 1 , 0 , 0 , 90 , 0, 0), 
					CCMoveTo::create(0.5, ccp(pt_0.x - 20 * i, pt_1.y)), NULL),
					CCCallFuncND::actionWithTarget(this , callfuncND_selector(MyTest_1::objectReset), (void*)i), 
					CCSpawn::create(CCOrbitCamera::actionWithDuration(0.5 , -1 , 0 , 90, 90 , 0, 0), CCMoveTo::create(0.5, pt_1), NULL), NULL));
			}
		}
	}

// 90度时的回调函数

	void MyTest_1::objectReset(CCNode* pSender, void* param)
	{
		int nIndex = (int) param;
		// 通过下标取得牌点 及所对应的纹理  略
		CCSprite *sprite = (CCSprite *)pSender;
		if(NULL != sprite)
		{
			CCTexture2D* texture = CCTextureCache::sharedTextureCache()->addImage("poker_XX.png");
			if	(texture)
			{
				sprite -> setTexture(texture);
				if (sprite->getParent())
				{
					sprite->getParent()->reorderChild(sprite, zorder); // 显示时牌的Zorder
				}
			}
		}
	}


可在runAction时加翻转结束的回调, 做回收及状态更改通知。





 




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
时间翻牌效果通常用于展示时间轴或时间流逝的情况。它通常是通过将一个日期或时间显示在一个翻牌上,然后通过旋转或翻转这个翻牌来显示下一个日期或时间。这种效果可以使用CSS 3D转换和动画来实现。以下是一个使用CSS实现时间翻牌效果的示例: HTML: ```html <div class="flip-clock"> <div class="flip-clock__wrap"> <div class="flip-clock__card flip-clock__card--day"> <div class="flip-clock__top"> <span class="flip-clock__digit flip-clock__digit--day">0</span> <span class="flip-clock__digit flip-clock__digit--day">0</span> </div> <div class="flip-clock__bottom"> <span class="flip-clock__digit flip-clock__digit--day">0</span> <span class="flip-clock__digit flip-clock__digit--day">1</span> </div> </div> <div class="flip-clock__card flip-clock__card--month"> <div class="flip-clock__top"> <span class="flip-clock__digit flip-clock__digit--month">0</span> <span class="flip-clock__digit flip-clock__digit--month">0</span> </div> <div class="flip-clock__bottom"> <span class="flip-clock__digit flip-clock__digit--month">0</span> <span class="flip-clock__digit flip-clock__digit--month">1</span> </div> </div> <div class="flip-clock__card flip-clock__card--year"> <div class="flip-clock__top"> <span class="flip-clock__digit flip-clock__digit--year">0</span> <span class="flip-clock__digit flip-clock__digit--year">0</span> <span class="flip-clock__digit flip-clock__digit--year">0</span> <span class="flip-clock__digit flip-clock__digit--year">0</span> </div> <div class="flip-clock__bottom"> <span class="flip-clock__digit flip-clock__digit--year">2</span> <span class="flip-clock__digit flip-clock__digit--year">0</span> <span class="flip-clock__digit flip-clock__digit--year">2</span> <span class="flip-clock__digit flip-clock__digit--year">1</span> </div> </div> </div> </div> ``` CSS: ```css .flip-clock { display: flex; justify-content: center; align-items: center; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .flip-clock__wrap { display: flex; justify-content: center; align-items: center; height: 100%; } .flip-clock__card { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 80px; width: 50px; margin: 0 10px; perspective: 800px; } .flip-clock__top, .flip-clock__bottom { display: flex; justify-content: center; align-items: center; height: 50%; width: 100%; position: absolute; overflow: hidden; } .flip-clock__top { top: 0; transform-origin: bottom; } .flip-clock__bottom { bottom: 0; transform-origin: top; } .flip-clock__digit { font-size: 40px; font-weight: bold; color: #333; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); background-color: #fff; padding: 5px; box-sizing: border-box; border-radius: 5px; } .flip-clock__digit--day { width: 30px; } .flip-clock__digit--month { width: 30px; } .flip-clock__digit--year { width: 20px; } .flip-clock__card--day { animation: flip 1s ease-in-out infinite; animation-delay: 0.5s; } .flip-clock__card--month { animation: flip 1s ease-in-out infinite; animation-delay: 0.3s; } .flip-clock__card--year { animation: flip 1s ease-in-out infinite; animation-delay: 0.1s; } @keyframes flip { 0% { transform: rotateX(0deg); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); } } ``` 这个示例展示了一个简单的时间翻牌效果,其中年、月、日分别在三个翻牌中显示。这个效果可以通过CSS动画实现,其中使用了3D旋转转换来模拟翻牌效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值