动画特效八:渐变动画
来源:互联网 发布:手机淘宝网触屏版官网 编辑:程序博客网 时间:2024/04/30 23:24
本节将为大家介绍的动画效果是渐变动画效果。其实这个例子,大家天天能够看到,就是手机屏幕锁定是,有一句“滑动来解锁”的文字,它上面有一种渐变的动画一直在其上面走过。先看看最终的效果图。
思路分析:
1. 普通UIView不可能有这样的渐变效果,所以我们应该自定义一个UIView来实现这样的效果。
2. 普通UIView没有这样的渐变动画,所以我们可以考虑使用图层动画,并且将渐变图层添加到自定义的UIView的layer上面。
3. 渐变效果只是颜色值的过度,并没有设计到文字。所以,我们可以再将文字封装到一个图层中,也添加到自定义的UIView的layer上面,而且这个图层的背景色应该是clearColor,因为它在渐变图层的上方,如果有背景色的话,会遮盖这渐变效果。
总的层级关系: UIView的layer --> 渐变layer --> 文本layer.
下面,我们就一步一步来实现这个效果。
1. 自定义UIView,命名为AnimatedMaskLabel,并且它又一个属性。
@property (nonatomic, copy) NSString *text;
2. 我们书写它的初始化工作
- (instancetype)initWithCoder:(NSCoder *)aDecoder { if (self = [super initWithCoder:aDecoder]) { [self initTask]; } return self;}- (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { [self initTask]; } return self;}
来分析initTask方法。
- (void)initTask { self.gradientLayer = [CAGradientLayer layer]; self.gradientLayer.startPoint = CGPointMake(0, 0.5); self.gradientLayer.endPoint = CGPointMake(1, 0.5); NSArray *colors = @[ (__bridge id)[UIColor blackColor].CGColor, (__bridge id)[UIColor whiteColor].CGColor, (__bridge id)[UIColor blackColor].CGColor ]; self.gradientLayer.colors = colors; NSArray *locations = @[ @(0.25), @(0.50), @(0.75) ]; self.gradientLayer.locations = locations; self.layer.frame = self.bounds; [self.layer addSublayer:self.gradientLayer];}
这里面的代码就是向layer图层上面添加 渐变图层。
CAGradientLayer的startPoint和endPoint的有效坐标范围是(0,0) 到 (1,1). 而代码中是(0,0.5) 到 (1, 0.5) 也就是沿着正中心进行渐变效果,如下图:
而colors和locations数组就是控制渐变图层的颜色和位置分布,就本例而言,分布效果图如下:
至此,我们在ViewController中的viewDidload方法中,添加如下代码
self.maskLabel.text = @">滑动来解锁";
并运行程序,可以看到如下效果:
接下来,我们将渐变图层“动起来”。
3. 渐变图层添加动画
- (void)didMoveToWindow { [super didMoveToWindow]; [self gradientAnimation];}- (void)gradientAnimation { CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"locations"]; anim.fromValue = @[@(0.0),@(0.0),@(0.25)]; anim.toValue = @[@(0.75),@(1.0),@(1.0)]; anim.duration = 3.0; anim.repeatCount = CGFLOAT_MAX; [self.gradientLayer addAnimation:anim forKey:nil];}
注意到fromValue和toValue的数组值,它表示的其实的0.0-0.75, 0.0-1.0,0.25-1.0 形成的渐变效果。
然后我们看看运行效果图:
这放佛不是我们要得效果。
因为渐变区域比较窄,并且不够均匀。我们可以将渐变区域拉长。试想一下,拉长到原来的3倍,并且左右侧留同样的宽度。设计图如下:
现在,我们将initTask方法中的
self.gradientLayer.frame = self.bounds;
更改为:
self.gradientLayer.frame = CGRectMake(- self.bounds.size.width, 0, 3 * self.bounds.size.width, self.bounds.size.height);
再运行看看结果。
4. 添加图层文字
由于自定义的AnimatedMaskLabel是UIView,所以它没有text属性,所以我自定义一个text属性,然后重绘图层,并作为gradientLayer的mask。代码如下:
- (void)setText:(NSString *)text { _text = [text copy]; [self setNeedsDisplay];}- (void)drawRect:(CGRect)rect { [super drawRect:rect]; UIGraphicsBeginImageContextWithOptions(self.frame.size, false, 0); NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init]; style.alignment = NSTextAlignmentCenter; NSDictionary *dict = @{ NSFontAttributeName : [UIFont fontWithName:@"HelveticaNeue-Thin" size:28.0], NSParagraphStyleAttributeName : style }; [self.text drawInRect:self.bounds withAttributes:dict]; UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); CALayer *maskLayer = [CALayer layer]; maskLayer.backgroundColor = [UIColor clearColor].CGColor; maskLayer.frame = CGRectOffset(self.bounds, self.bounds.size.width, 0); maskLayer.contents = (__bridge id)(image.CGImage); self.gradientLayer.mask = maskLayer;}
至此图层的动画就已完成了。
5. 滑动手势。由于此动画比较简单,我就不做解释了,viewController中的代码如下:
- (void)viewDidLoad { [super viewDidLoad]; self.maskLabel.text = @">滑动来解锁"; UISwipeGestureRecognizer *swipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(didSlide)]; [self.maskLabel addGestureRecognizer:swipe];}- (void)didSlide { UIImageView *memeImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"meme"]]; memeImageView.center = self.view.center; memeImageView.centerX += self.view.width; [self.view addSubview:memeImageView]; [UIView animateWithDuration:0.33 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{ memeImageView.centerX -= self.view.width; self.time.centerY -= 300; self.maskLabel.centerY += 300; } completion:nil]; [UIView animateWithDuration:0.33 delay:1.0 options:UIViewAnimationOptionCurveEaseIn animations:^{ memeImageView.centerX += self.view.width; self.time.centerY += 300; self.maskLabel.centerY -= 300; } completion:^(BOOL finished) { [memeImageView removeFromSuperview]; }];}
- 动画特效八:渐变动画
- 一个图片渐变动画特效demo
- 按钮实现鼠标悬停背景色渐变的动画特效
- Android 动画 - AlphaAnimation渐变动画
- 动画特效三:搜索动画
- 动画特效五:灌水动画
- 动画特效七:碰撞动画
- 动画特效之动画组
- 动画特效之转场动画
- 动画特效十七:粘性动画
- as3 文本渐变动画
- JS 颜色渐变动画
- jq渐变动画效果
- 动画的渐变效果
- 解锁滑动渐变动画
- TweenAnimation 渐变动画
- AlphaAnimation渐变动画Demo
- 折线动画、渐变色
- bzoj3992: [SDOI2015]序列统计
- android 目前遇到的程序崩溃常见原因
- 《TCP/IP入门经典》——网际层
- Java IO学习【7】BufferedReader的学习-readLine原理
- HDU5292魔方满足什么条件能够还原
- 动画特效八:渐变动画
- eclipse中配置maven
- linux mount (挂载命令)详解
- hdoj 1257最少拦截系统
- POJ 3122 Pie(简单二分)
- hdu 3422 数论 本原勾股数组
- linux fstab文件
- POJ_3126_PrimePath
- 看看Parallel中高度封装的三个方法,Invoke,For和ForEach