想要的效果:
在cocos2dx中有一个遮罩类,ClippingNode.可以很容易的实现文字类遮罩效果,有兴趣的可以自行百度看一看.具体效果图如下.
闪烁的标题
但是cocos2dx中是用的是openGL实现的效果,直接使用openGL的话会比较难.所以就想着用CALayer的遮罩效果做一个闪烁的标题.
实现原理:
这里用两张一模一样的图片,一张渐变白色,一张是本来的图片,渐变白色是美工PS处理来的.将两张图重叠放在一起,白色在上面,将白色的图片进行遮罩剪切.见效果图.
遮罩加动画效果图
将原图片放入最底部实现的效果
实现代码:
- (void)viewDidLoad {
[super viewDidLoad];
//添加视图
[self addView];
}
-(void)addView{
//注意Z轴位置
UIImageView *titleBack = [[UIImageView alloc]init];
titleBack.image = [UIImage imageNamed:@"titleBack.png"];
titleBack.frame = CGRectMake(0, 100, SCREEN_SIZE.width, 150);
[self.view addSubview:titleBack];
UIImageView *title = [[UIImageView alloc]init];
title.image = [UIImage imageNamed:@"title.png"];
title.frame = CGRectMake(0, 100, SCREEN_SIZE.width, 150);
[self.view addSubview:title];
//遮罩剪切
title.layer.mask = [self titleMaskLayer:title];
}
-(CALayer*)titleMaskLayer:(UIImageView*)imageView{
//通过图片剪切,也可以自己画一个路径来剪切
CALayer *mask = [CALayer layer];
UIImage *maskImage = [UIImage imageNamed:@"spark.png"];
mask.contents = (__bridge id _Nullable)(maskImage.CGImage);
mask.frame = CGRectMake(100.0f, 0, 50.0f, imageView.bounds.size.height);
mask.bounds = CGRectMake(0, 0, 50.0f, imageView.bounds.size.height);
//添加动画
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(-50.0f, imageView.bounds.size.height/2.0)];
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(imageView.bounds.size.width, imageView.bounds.size.height/2.0)];
animation.duration = 3.0f;
animation.repeatCount = HUGE_VALF;
[mask addAnimation:animation forKey:@"animation"];
return mask;
}
资源
图片资源在这里,因为很简单就不用上GIT了
spark.png
title.png
titleBack.png
总结
通过这个实现原理就可以做很多好玩的东西了,比如像这种注水的加载效果,赶紧用起来吧!
注水动态图
