`
浮生长恨
  • 浏览: 212159 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

实现淡入淡出效果的蒙版

 
阅读更多
  这是一个系列的文章,详情可点击关于这两年所经历项目的系列总结

  接下来要做的第一个小功能就是,实现一个有淡入淡出效果的蒙版。cocos2dx里面的蒙版有CCLayerColor,直接使用会比较生硬。这里使用CCFade动画来给它实现一个淡入淡出的效果。
这个类给我它取名GameMaskLayer。

.h文件如下
#ifndef _GAME_MASK_LAYER_H_
#define  _GAME_MASK_LAYER_H_

#include "cocos2d.h"

USING_NS_CC;

class GameMaskLayer : public CCLayerColor
{
public:
	enum {MaskLayerZOder=-100, MaskLayerTag=100, FadeOutTag=101, FadeInTag=102};
	GameMaskLayer(void);
	~GameMaskLayer(void);
	
	static GameMaskLayer* create(ccColor4B color = ccc4(0, 0, 0, 100));
	static GameMaskLayer* create(CCNode* pNode, ccColor4B color = ccc4(0, 0, 0, 100));
	static GameMaskLayer* create(CCNode* pNode, int zOrder, ccColor4B color = ccc4(0, 0, 0, 100));
	static GameMaskLayer* create(CCNode* pNode, int zOrder, int tag, ccColor4B color = ccc4(0, 0, 0, 100));
	virtual bool initLayer(CCNode* pNode, int zOrder, int tag, ccColor4B color);
	void doFadeOut(CCNode* pParent);

private:
	void onFadeInEnded(CCNode* pParent);
	void onFadeOutEnded(CCNode* pParent);
	virtual void visit();

private:
	GLubyte mOpacity;
	static GameMaskLayer* mInstance;
};
#endif


.cpp文件如下
#include "GameMaskLayer.h"

GameMaskLayer::GameMaskLayer(void)
{
	mOpacity = 0;
}

GameMaskLayer::~GameMaskLayer(void)
{
}

GameMaskLayer* GameMaskLayer::create(ccColor4B color)
{
	return create(NULL, MaskLayerZOder, MaskLayerTag, color);
}

GameMaskLayer* GameMaskLayer::create(CCNode* pNode, ccColor4B color)
{
	return create(pNode, MaskLayerZOder, MaskLayerTag, color);
}

GameMaskLayer* GameMaskLayer::create(CCNode* pNode, int zOrder, ccColor4B color)
{
	return create(pNode, zOrder, MaskLayerTag, color);
}

GameMaskLayer* GameMaskLayer::create(CCNode* pNode, int zOrder, int tag, ccColor4B color)
{
	GameMaskLayer *mInstance = new GameMaskLayer();
	if (mInstance != NULL && mInstance->initLayer(pNode, zOrder, tag, color))
	{
		mInstance->autorelease();
		return mInstance;
	}
	CC_SAFE_DELETE(mInstance);
	return NULL;
}

bool GameMaskLayer::initLayer(CCNode* pNode, int zOrder, int tag, ccColor4B color)
{
	GLubyte oldOpactiy = this->getOpacity();	

	if (!CCLayerColor::initWithColor(color)) return false;
	
	this->setOpacity(oldOpactiy);
	mOpacity = color.a;
	this->_setZOrder(zOrder);
	this->setPosition(ccp(0, 0));
	this->setTag(tag);

	if (oldOpactiy != mOpacity)
	{
		this->stopActionByTag(FadeOutTag);
		this->stopActionByTag(FadeInTag);

		CCAction *pAction = CCSequence::create(CCFadeTo::create(0.2f, mOpacity),
											CCCallFuncN::create(this, callfuncN_selector(GameMaskLayer::onFadeInEnded)), NULL);
		pAction->setTag(FadeInTag);
		this->runAction(pAction);
	}

	if (pNode != NULL)
	{
		pNode->addChild(this, zOrder);
	}else {
		return false;
	}

	return true;
}

void GameMaskLayer::doFadeOut(CCNode* pParent)
{
	GLubyte oldOpactiy = this->getOpacity();
	if(oldOpactiy > 10)
	{
		this->stopActionByTag(FadeOutTag);
		this->stopActionByTag(FadeInTag);
		CCFiniteTimeAction* pAction = CCSequence::create(CCFadeTo::create(0.2f, 0), 
															CCCallFuncN::create(this, callfuncN_selector(GameMaskLayer::onFadeOutEnded)), NULL);
		pAction->setTag(FadeOutTag);
		this->runAction(pAction);
	} else {
		CCFiniteTimeAction* pAction = CCSequence::create(CCDelayTime::create(0.05f), 
			CCCallFuncN::create(this, callfuncN_selector(GameMaskLayer::onFadeOutEnded)), NULL);
		this->runAction(pAction);
	}
}

void GameMaskLayer::onFadeInEnded(CCNode* pParent)
{
	
}

void GameMaskLayer::onFadeOutEnded(CCNode* pNode)
{
	this->stopActionByTag(FadeOutTag);
	this->stopActionByTag(FadeInTag);
	this->removeFromParentAndCleanup(true);
}

void GameMaskLayer::visit()
{
	CCNode* pParent = this->getParent();
	float oldScale = pParent->getScale();
	float oldScaleX = pParent->getScaleX();
	float oldScaleY = pParent->getScaleY();
	this->setScale(2.0f/oldScale);
	this->setScaleX(2.0f/oldScaleX);
	this->setScaleY(2.0f/oldScaleY);
	CCLayerColor::visit();
	this->setScale(oldScale);
	this->setScaleX(oldScaleX);
	this->setScaleY(oldScaleY);
}


关于这个功能的实现,相对简单没啥好说的,所以贴出全部代码,自己看吧。如果以后实现的功能更复杂些,就会贴出相关代码,附加自己的实现思路。
分享到:
评论

相关推荐

    Android实现蒙版引导功能

    - 可以使用动画效果增强引导的吸引力,如淡入淡出、缩放等。 5. **保存用户状态** - 为了防止重复展示引导,需要记录用户是否已经完成过引导。可以使用SharedPreferences存储状态。 - 当用户首次启动应用或满足...

    WPF消息蒙版弹窗UI以及await实现等待反馈(popup)-Demo

    这是一个使用WPF(Windows Presentation Foundation)开发的消息蒙版弹窗UI的示例。该弹窗具有等待反馈(popup)功能...例如,可以使用渐变动画来实现弹窗的淡入淡出效果,或者在弹窗中添加按钮以支持用户的交互操作。

    jQuery layout demo 蒙版 bpop 插件

    在"蒙版实例"中,我们可以看到如何利用jQuery和CSS来实现各种蒙版效果,包括淡入淡出、滑动显示等,这些技巧对于增强网页交互性大有裨益。 在"layout"压缩包中,可能包含了jQuery Layout的示例代码、bpop插件的...

    js蒙版特效

    5. **自定义动画效果**:jQuery还提供了丰富的动画效果,如淡入淡出(`fadeIn()`, `fadeOut()`),滑动(`slideDown()`, `slideUp()`)等,可以增强用户体验: ```javascript $('#mask').fadeIn(500); // 淡入效果,...

    Android蒙版+广告自动无限轮播

    ViewPager可以轻松地处理页面滑动,而PageTransformer则允许我们自定义页面转换动画,如淡入淡出、3D翻转等。 3. **无限轮播**: 为了使用户感觉广告一直在连续播放,开发者需要实现无限轮播的效果。这通常通过...

    新手引导蒙版

    6. **动画效果**:为了提升用户体验,可以添加一些过渡动画,如淡入淡出,使引导过程更流畅。这可以通过`FragmentTransaction`的`setCustomAnimation()`方法来实现。 7. **考虑可访问性**:确保蒙版不影响屏幕阅读...

    StarTails插件使用教学

    对于星轨合成,有多种特效可以选择,如普通效果、淡入效果、淡出效果、淡入淡出效果和螺旋效果。其中,螺旋效果需要考虑素材的缩放和旋转,以实现螺旋星轨、辐射星轨或同心圆星轨,而彗星效果则模仿彗星划过的轨迹,...

    制作视频蒙版

    3. **艺术效果**:通过蒙版可以实现各种创意效果,如淡入淡出、模糊过渡、局部色彩调整等。 4. **复合合成**:在多层视频素材中,蒙版可以用来精确地合并不同元素,创造出复杂的视觉效果。 **制作视频蒙版的步骤** ...

    jQuery实现手风琴效果(蒙版)

    6. **淡入淡出效果**:`.fadeIn()`和`.fadeOut()`方法分别用来控制元素的渐显和渐隐。 7. **样式设计**:理解`<style>`标签内CSS样式设计对布局和视觉效果的影响,例如绝对定位、背景色透明度等。 8. **相对定位和...

    photoshop关键技术之一——蒙版

    蒙版的应用非常广泛,尤其是在图像融合、淡入淡出等效果制作中。通过在蒙版上涂画不同灰度,可以实现从完全透明到完全不透明的平滑过渡,产生比羽化更为自然的效果。例如,如果你希望隐藏某个图层的部分内容,只需在...

    WPF显示蒙版弹窗(半透明遮罩覆盖在窗体上方)

    6. **动画效果**:为了提升用户体验,可以添加淡入淡出等动画效果。WPF提供了丰富的动画支持,例如使用`DoubleAnimation`来实现窗口透明度的变化。 通过以上步骤,我们就可以创建一个具有半透明蒙版效果的弹窗,并...

    Photoshop CC入门到精通视频教程第18章 蒙版的创建与应用技巧.zip

    7. **蒙版与图层混合模式**:结合蒙版和图层混合模式,可以创造出各种独特的视觉效果,例如淡入淡出、颜色叠加等。 8. **非破坏性编辑**:理解蒙版的非破坏性本质,即修改蒙版不会影响原图层,使您可以随时更改和...

    jquery 随机焦点图轮播 蒙版提示框

    确保在切换时有平滑的过渡动画,例如淡入淡出或滑动效果,可以通过`fadeIn()`、`fadeOut()`等函数实现。 蒙版提示框通常用于显示额外的信息或提示,比如图片的描述或相关链接。它由一个半透明的遮罩层(蒙版)和一...

    安卓欢迎界面引导页面viewpager相关-Android高亮指示布局蒙版引导.rar

    5. **动画效果**: 在引导页面中,动画可以帮助提升用户体验,例如淡入淡出、滑动过渡等。可以使用Android的`ObjectAnimator`、`ValueAnimator`或者`Transition`类来实现这些效果。 6. **数据绑定与状态保存**: 如果...

    Android100种图片处理效果大全项目

    7. **图像混合**:通过结合多个图像,可以创建出丰富的视觉效果,如淡入淡出、蒙版混合等。 8. **图像特效**:可能包含各种创意特效,如素描、油画、水彩等艺术风格的转换。 9. **图片保存与分享**:完成处理后的...

    ps中关于图层及蒙版的详细解说.ppt

    例如,你可以让一个图层与下方图层融合,实现淡入淡出的效果。 图层面板是操作图层的主要界面,通过它可以查看和管理所有图层,调整它们的顺序、不透明度和混合模式。执行“窗口”→“图层”命令或按键即可打开图层...

    Cocos2d-x教程第(12)讲-利用遮罩(蒙版)CCLayerColor制作新手引导界面(中)

    4. **动画效果**: 为了增加用户体验,可以添加动画效果,如淡入淡出、滑动等,来切换不同步骤的引导内容。 5. **控制流程**: 最后,我们需要一个逻辑来控制新手引导的流程,何时显示下一个引导步骤,何时结束引导并...

    C# 实现一些图像特效

    3. **图像合成**:结合两张或多张图片,可以创建出各种创意效果,如淡入淡出、蒙版混合等。C#中的Graphics类提供了DrawImage方法,可以方便地将一张图像绘制到另一张图像上。 4. **扭曲与变形**:利用OpenCV的 ...

    淡出图像或图形对象

    在IT行业中,尤其是在图形编程和用户界面设计领域,淡入淡出效果是一种常见的视觉过渡手法,可以增强用户体验和视觉吸引力。本主题将深入探讨如何在C# .NET WinForms环境中利用GDI+来实现图像或Graphics对象的淡出...

Global site tag (gtag.js) - Google Analytics