iOS 动画篇 （二） CAShapeLayer与CoreAnimation结合使用
接上一篇博客 iOS 动画篇（一） Core Animation
CAShapeLayer是CALayer的一个子类，使用这个类能够很轻易实现曲线的动画。
先来一个折线动画效果：
示例代码：
//1.生成path
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(, )];
[path addLineToPoint:CGPointMake(, )];
[path addLineToPoint:CGPointMake(, )];
[path addLineToPoint:CGPointMake(, )];
[path addLineToPoint:CGPointMake(, )];
[path addLineToPoint:CGPointMake(, )]; self.shapeLayer.path = path.CGPath; //设置animation
CABasicAnimation *strokeAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
strokeAnimation.fromValue = @;
strokeAnimation.toValue = @;
strokeAnimation.duration = .f; CABasicAnimation *lineWidthAnimation = [CABasicAnimation animationWithKeyPath:@"lineWidth"];
lineWidthAnimation.fromValue = @;
lineWidthAnimation.toValue = @;
lineWidthAnimation.duration = .f; CABasicAnimation *strokeColorAnimation = [CABasicAnimation animationWithKeyPath:@"strokeColor"];
strokeColorAnimation.fromValue = (id)([UIColor redColor].CGColor);
strokeColorAnimation.toValue = (id)([UIColor magentaColor].CGColor);
strokeColorAnimation.duration = .f; CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[strokeAnimation, lineWidthAnimation, strokeColorAnimation];
group.duration = .f;
group.fillMode = kCAFillModeForwards;
group.removedOnCompletion = NO;
[self.shapeLayer addAnimation:group forKey:@"groupAnimation"];
现在介绍CAShapeLayer，CAShapeLayer几乎所有的属性都可以用来做动画，比如说path、strokeEnd、strokeStart、lineWidth等等，利用这些属性可以实现多种曲线动画。
接下来，介绍一个CAShapeLayer与贝塞尔曲线结合的曲线动画，效果图：
代码：
//二次贝塞尔曲线
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(, self.shapeLayer.bounds.size.height / )];
[path addCurveToPoint:CGPointMake(self.shapeLayer.bounds.size.width, ) controlPoint1:CGPointMake(, ) controlPoint2:CGPointMake(, )];
self.shapeLayer.path = path.CGPath; //绘制动画
CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
strokeEndAnimation.fromValue = @0.5;
strokeEndAnimation.toValue = @;
strokeEndAnimation.duration = .f; [self.shapeLayer addAnimation:strokeEndAnimation forKey:@"strokeAnimation"]; CABasicAnimation *strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
strokeStartAnimation.fromValue = @0.5;
strokeStartAnimation.toValue = @;
strokeStartAnimation.duration = .f; [self.shapeLayer addAnimation:strokeStartAnimation forKey:@"strokeStartAnimation"];
再来一个看着酷一点的loading动画，效果：
代码如下：
self.shapeLayer.backgroundColor = [UIColor clearColor].CGColor;
self.shapeLayer.strokeColor = [UIColor redColor].CGColor;
self.shapeLayer.fillColor = [UIColor clearColor].CGColor;
self.shapeLayer.lineWidth = .f;
UIBezierPath *storkePath = [UIBezierPath bezierPathWithOvalInRect:self.shapeLayer.bounds];
self.shapeLayer.path = storkePath.CGPath;
self.shapeLayer.strokeStart = ;
self.shapeLayer.strokeEnd = 0.1; //旋转动画
CABasicAnimation *rotateAnimaiton = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotateAnimaiton.duration = .f;
rotateAnimaiton.repeatCount = CGFLOAT_MAX;
rotateAnimaiton.removedOnCompletion = NO;
rotateAnimaiton.fillMode = kCAFillModeForwards;
rotateAnimaiton.toValue = @(M_PI * ); //stroke动画
CABasicAnimation *storkeAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
storkeAnimation.duration = .f;
storkeAnimation.repeatCount = CGFLOAT_MAX;
storkeAnimation.fillMode = kCAFillModeForwards;
storkeAnimation.removedOnCompletion = NO;
storkeAnimation.toValue = @(); CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = .f;
animationGroup.repeatCount =CGFLOAT_MAX;
animationGroup.fillMode = kCAFillModeForwards;
animationGroup.removedOnCompletion = NO;
animationGroup.animations = @[rotateAnimaiton, storkeAnimation];
animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault]; [self.shapeLayer addAnimation:animationGroup forKey:@"indicatorAnimation"];
现在我们来看一个CAShapeLayer与mask结合的动画
代码：
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
self.shapeLayer.mask = shapeLayer; UIBezierPath *fromPath = [UIBezierPath bezierPathWithRect:CGRectMake(, , , )];
UIBezierPath *toPath = [UIBezierPath bezierPathWithRect:CGRectMake(, , , )];
shapeLayer.path = fromPath.CGPath; CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.fromValue = (id)fromPath.CGPath;
animation.toValue = (id)toPath.CGPath;
animation.duration = .f;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards; [shapeLayer addAnimation:animation forKey:@"animation"];
最后再介绍一个登录动画：
分析：这个登录动画一共分为三步
1. 在button上添加一个shapeLayer，用path属性实现layer的展开动画
2. 在展开动画结束后，为button设置一个shapeLayer的mask，利用layer的path和opacity属性实现收起按钮动画
3. 添加一个loading动画到view上
详情见代码：
- (void)viewDidLoad {
[super viewDidLoad];
NSLog(@"一个复杂一点的登录动画");
[self.shapeLayer removeFromSuperlayer];
UIButton *startButton = ({
UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
btn.backgroundColor = [UIColor purpleColor];
[btn setTitle:@"start" forState:UIControlStateNormal];
btn.frame = (CGRect){{, }, {, }};
btn.center = self.view.center;
[btn addTarget:self action:@selector(startAction:) forControlEvents:UIControlEventTouchUpInside];
btn;
});
[self.view addSubview:startButton];
self.startButton = startButton;
}
- (IBAction)startAction:(UIButton *)sender {
[self addMaskAnimation];
}
- (void)addMaskAnimation
{
CAShapeLayer *shapeLayer = [CAShapeLayer new];
shapeLayer.frame = self.startButton.bounds;
shapeLayer.fillColor = [UIColor whiteColor].CGColor;
shapeLayer.strokeColor = [UIColor whiteColor].CGColor;
shapeLayer.opacity = .3f;
shapeLayer.path = [UIBezierPath bezierPathWithRect:CGRectMake(self.startButton.bounds.size.width / , , , self.startButton.bounds.size.height)].CGPath;//不初始化则无动画效果
[self.startButton.layer addSublayer:shapeLayer];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration = 0.5f;
animation.toValue = (__bridge id)[UIBezierPath bezierPathWithRect:self.startButton.bounds].CGPath;
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
[shapeLayer addAnimation:animation forKey:@"shapeAnimation"];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5f * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self addPackupAnimation];
});
}
- (void)addPackupAnimation
{
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = self.startButton.bounds;
self.startButton.layer.mask = maskLayer;
//path动画
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
pathAnimation.duration = 0.3f;
pathAnimation.removedOnCompletion = NO;
pathAnimation.toValue = (__bridge id)[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.startButton.bounds.size.width / , self.startButton.bounds.size.height / ) radius: startAngle: endAngle:M_PI * clockwise:YES].CGPath;
pathAnimation.fromValue = (__bridge id)[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.startButton.bounds.size.width / , self.startButton.bounds.size.height / ) radius:self.startButton.bounds.size.width / startAngle: endAngle:M_PI * clockwise:YES].CGPath;
pathAnimation.fillMode = kCAFillModeForwards;
//透明度动画
CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
opacityAnimation.duration = 0.3f;
opacityAnimation.toValue = @();
opacityAnimation.fromValue = @();
opacityAnimation.removedOnCompletion = YES;
opacityAnimation.fillMode = kCAFillModeForwards;
CAAnimationGroup *group = [CAAnimationGroup new];
group.animations = @[pathAnimation];
group.removedOnCompletion = NO;
group.fillMode = kCAFillModeForwards;
group.duration = pathAnimation.duration;
[maskLayer addAnimation:group forKey:@"packupAnimation"];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
self.startButton.hidden = YES;
[self addLoadingAnimation];
});
}
- (void)addLoadingAnimation
{
CAShapeLayer *shapeLayer = ({
CAShapeLayer *layer = [CAShapeLayer layer];
layer.position = self.view.center;
layer.bounds = CGRectMake(, , , );
layer.backgroundColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor redColor].CGColor;
layer.fillColor = [UIColor clearColor].CGColor;
layer.lineWidth = .f;
UIBezierPath *storkePath = [UIBezierPath bezierPathWithOvalInRect:layer.bounds];
layer.path = storkePath.CGPath;
layer.strokeStart = ;
layer.strokeEnd = 0.1;
layer;
});
[self.view.layer addSublayer:shapeLayer];
//旋转动画
CABasicAnimation *rotateAnimaiton = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotateAnimaiton.duration = .f;
rotateAnimaiton.repeatCount = CGFLOAT_MAX;
rotateAnimaiton.removedOnCompletion = NO;
rotateAnimaiton.fillMode = kCAFillModeForwards;
rotateAnimaiton.toValue = @(M_PI * );
//stroke动画
CABasicAnimation *storkeAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
storkeAnimation.duration = .f;
storkeAnimation.repeatCount = CGFLOAT_MAX;
storkeAnimation.fillMode = kCAFillModeForwards;
storkeAnimation.removedOnCompletion = NO;
storkeAnimation.toValue = @();
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = .f;
animationGroup.repeatCount =CGFLOAT_MAX;
animationGroup.fillMode = kCAFillModeForwards;
animationGroup.removedOnCompletion = NO;
animationGroup.animations = @[rotateAnimaiton, storkeAnimation];
animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
[shapeLayer addAnimation:animationGroup forKey:@"indicatorAnimation"];
}
核心动画就介绍到这，你可以在这里查看demo。
个人原创，转载请注明出处 http://www.cnblogs.com/pretty-guy/p/8268745.html
下一篇博客打算介绍利用CADisplayLink与CoreGraphics结合实现动画
iOS 动画篇 （二） CAShapeLayer与CoreAnimation结合使用的更多相关文章
- iOS 动画笔记 (二）
有它们俩你就够了! 说明:下面有些概念我说的不怎么详细,网上实在是太多了,说了我觉得也意义不大了!但链接都给大家了,可以自己去看,重点梳理学习写动画的一个过程和一些好的博客! 一:说说这两个三方库,C ...
- iOS动画篇：UIView动画
iOS的动画效果一直都很棒很,给人的感觉就是很炫酷很流畅,起到增强用户体验的作用.在APP开发中实现动画效果有很多种方式,对于简单的应用场景,我们可以使用UIKit提供的动画来实现. UIView动画 ...
- iOS 动画篇 之 Core Animation （一）
iOS中实现动画有两种方式,一种是自己不断的通过drawRect:方法来绘制,另外一种就是使用核心动画(Core Animation). 导语: 核心动画提供高帧速率和流畅的动画,而不会增加CPU的负 ...
- iOS 动画篇 （三） CADisplayLink与CoreGraphics实现动画
本文主要介绍利用CoreGraphics和CADisplayLink来实现一个注水动画.来一个效果图先: 在介绍注水动画前,先介绍利用CoreGraphics实现进度条的绘制. 一.扇形进度绘制 效果 ...
- iOS动画篇：核心动画
转:http://www.cocoachina.com/ios/20160517/16290.html 基本概念 1.什么是核心动画 Core Animation(核心动画)是一组功能强大.效果华丽的 ...
- iOS 动画笔记 (一)
你也肯定喜欢炫酷的动画! 在APP中,动画就是一个点睛之笔!可以给用户增加一些独特的体验感,估计也有许多的和我一样的,看着那些觉得不错的动画,也就只能流口水的孩子,毕竟可能不知道从哪里下手去写!动画学 ...
- iOS动画学习
学习一下动画,感谢以下大神的文章: UIView:基础动画.关键帧动画.转场动画 Core Animation :基础动画,关键帧动画,动画组,转场动画,逐帧动画 CALayer :CALaye ...
- ios 动画学习的套路 (二）
有它们俩你就够了! 说明:下面有些概念我说的不怎么详细,网上实在是太多了,说了我觉得也意义不大了!但链接都给大家了,可以自己去看,重点梳理学习写动画的一个过程和一些好的博客! (一) 说说这两个三方库 ...
- iOS 动画基础总结篇
iOS 动画基础总结篇 动画的大体分类(个人总结可能有误) 分类.png UIView 动画 属性动画 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
随机推荐
- less新手入门（二） Mixin 混合、带参数的Mixin
四.mixin 混合 "mix - in"属性来自现有的样式!! 你可以在类选择器和id选择器中使用mixin, .a,#b{ color: rebeccapurple; } . ...
- Backtrack无线攻防(很任性的一篇)
首先你得有一个backtrack操作系统 然后还得花钱买一个无线网卡,最好是Intel的,还有要是USB接口的,可能是因为其他接口我不会接.
- 在Intellij里使用Erlang依赖库
这里以protobuffs为例,记录一下环境的配置,发现这种东西中文的资料真的不多,无论是分享还是记录都是很好的 1.创建一个文件夹名use_proto, 配置rebar.config文件如下: {d ...
- class的二般用法
一般来说,class就是给一堆元素添加样式的,但是还有二般的用法,就是用来作为一个开关,来切换他的子孙元素的样式.举个例子: <ul> <li><span>1< ...
- 如何导入外部的源码到eclipse中
用struts,spring等框架开发也有两年的时间了,一直很少去阅读其源码,每次在eclipse编码的过程中想要看某一个类的源码,ctrl点击总是出现source not found的提示,也没有去 ...
- angularf封装echarts
前言:angular中快速使用echarts 在html使用ehart很简单,你只需要引入文件和按照官方例子按照对应参数配置和数据填充就Ok了,那么在angular中怎么使用eharts(可以使用ec ...
- Spark Streaming VS Flink Streaming
引自:https://www.slideshare.net/datamantra/introduction-to-flink-streaming
- 原生JS的Ajax
转自:https://www.cnblogs.com/yufann/p/JS-Ajax.html 1.创建一个Ajax对象 非IE6浏览器:var obj = new XMLHttpReuqest() ...
- 微信小程序教学第二章（含视频）：小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据
§ 封装网络请求及 mock 数据 本文配套视频地址: https://v.qq.com/x/page/i05544fogcm.html 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发 ...
- 数据库的SQL优化
1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. (因为在条件查询条件添加索引,会直接被检索到列,会非常的快速) 2.应尽量避免在 wher ...