动画特效八:渐变动画

本节将为大家介绍的动画效果是渐变动画效果。其实这个例子,大家天天能够看到,就是手机屏幕锁定是,有一句“滑动来解锁”的文字,它上面有一种渐变的动画一直在其上面走过。先看看最终的效果图。

思路分析:

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。代码如下:

积极的人在每一次忧患中都看到一个机会,

动画特效八:渐变动画

相关文章:

你感兴趣的文章:

标签云: