CAGradientLayer(颜色渐变) -- 实现iphone手机屏幕“滑动来解锁”动画效果
来源:互联网 发布:网上兼职淘宝客服招聘 编辑:程序博客网 时间:2024/05/09 14:19
每次打开iphone手机前,我们都能见到一个动画效果 – “滑动来解锁”!本篇文章来介绍怎么实现颜色渐变的效果!
1、CAGradientLayer
//gradientLayer的大小和位置self.gradientLayer.bounds = CGRectMake(0, 0, BackView_Width, BackView_Height);self.gradientLayer.position = CGPointMake(BackView_Width/2, BackView_Height/2);//由它们两个决定动画的方向self.gradientLayer.startPoint = CGPointMake(0, 1); //起始位置 默认是(0.5, 0)self.gradientLayer.endPoint = CGPointMake(1, 0); //结束位置 默认是(0.5, 1) 若用默认值则动画是从上水平向下
这张图片能够很好地说明起始位置,结束位置,动画方向!(有上边的值决定动画方向为从左下角往右上角)
//动画效果的颜色//这里要注意 因为layer上的颜色是CGColorRef类型,但是CGColorRef不是一个OC对象所以直接放在数组里有报错self.gradientLayer.colors = @[(id)[UIColor blackColor].CGColor, (id)[UIColor redColor].CGColor, (id)[UIColor blackColor].CGColor];//locations的值是NSNumber类型,且取值在[0, 1]之间, 最重要的是他的长度要和上边colors的长度一样 对应:第一个黑色的位置、红色的位置、第二个黑色的位置self.gradientLayer.locations = @[@(0.2), @(0.5), @(0.8)];[self.backgroundView.layer addSublayer:self.gradientLayer];
代码写到这运行的效果如下:
2、添加动画效果
//2、添加动画效果CABasicAnimation *locationAnimation = [CABasicAnimation animationWithKeyPath:@"locations"]; //这两句话表示第一个黑色从0跑到了0.75的位置,红色从0跑到了1的位置, 第二个黑色从0.25跑到了1的位置locationAnimation.fromValue = @[@(0),@(0),@(0.25)]; //动画的起始位置locationAnimation.toValue = @[@(0.75),@(1),@(1)]; //动画的结束位置//一次动画的用时locationAnimation.duration = 2.5;//动画重复的次数locationAnimation.repeatCount = HUGE;//在gradientLayer上添加动画[self.gradientLayer addAnimation:locationAnimation forKey:nil];
3、将动画添加到Label的字上
- (void)viewDidAppear:(BOOL)animated{ [super viewDidAppear:animated]; //3、将动画添加到Label的字上 self.animationLabel.text = @"SlideUnlockAnimation"; //不能写在viewDidLoad self.gradientLayer.mask = self.animationLabel.layer;}
运行效果自己下Demo看吧(请原谅我不会制作Git图)!
本文参考资料:http://www.csdn.net/article/2015-09-22/2825765 (swift语言)
https://github.com/facebook/Shimmer
1 0
- CAGradientLayer(颜色渐变) -- 实现iphone手机屏幕“滑动来解锁”动画效果
- CAGradientLayer实现"滑动来解锁"动画效果
- CAGradientLayer实现向右滑动解锁的动画效果
- CAGradientLayer 实现颜色渐变效果简介
- CAGradientLayer 实现颜色渐变效果简介
- CAGradientLayer实现颜色渐变
- CAGradientLayer处理颜色渐变效果
- 解锁滑动渐变动画
- CATextLayer与CAGradientLayer实现文字渐变的动画效果
- 利用CADisplayLink 和 CAGradientLayer来实现文字渐变效果
- 利用CAGradientLayer绘制颜色渐变动画
- iOS解锁界面的"滑动来解锁"闪烁动画效果
- CAGradientLayer 实现背景颜色的渐变
- CAGradientLayer颜色渐变
- CAGradientLayer 处理颜色渐变
- CAGradientLayer颜色的渐变(单色、多色、动画)
- iOS之iPhone解锁界面的"滑动来解锁"闪烁动画效果,好奇的赶紧进来取走,别看了,说的就是你0.0
- jQuery 颜色渐变动画效果
- Java进阶(三十二) HttpClient使用详解
- Spring线程池
- 华为机试---搬圆桌
- zookeeper原理讲解(讲的很深奥不易懂 原理可以看上一篇 应用场景可以看看)
- Content-disposition中Attachment和inline的区别
- CAGradientLayer(颜色渐变) -- 实现iphone手机屏幕“滑动来解锁”动画效果
- android中Webview与javascript的交互(互相调用)
- 第十六周项目一(2)-小玩文件
- android 获取第三方应用程序包名并启动
- 客户端更新流程图
- 图片手指缩放
- 二叉搜索树的后序遍历序列(剑指offer)
- Shell入门
- CircleImageView(圆形图片布局)