小白学习ios动画效果
引言
最近公司的设计师很有空，时不时就来问一下某些动画效果好不好实现， 就学习了一下ios的动画实现方法。
发现其实很多漂亮的动画效果都是几种基础的动画效果组合而成，总结一下基本的动画实现方法。并做了一个UIView扩展类。共同对抗设计师
地址:[https://github.com/mozhenhau/D3View]
一、动画方式
UIView动画（Core Animation）
CALayer绘画 （Core Graphics）
二、UIView动画 animateWithDuration
我只用block=。=
参数说明
'' [UIView animateWithDuration:1 delay:0.5 options:UIViewAnimationOptionCurveEaseOut animations:^{
'' //要进行的动画区
'' _testView.alpha = 0;
'' } completion:^(BOOL finished) {
'' //动画完成后操作
'' }];
需要参数:
duration： 动画时长
delay： 决定了动画在延迟多久之后执行
options：用来决定动画的展示方式，接下来会进行讲解
animations：转化成动画表示的代码
completion：动画结束后执行的代码块
动画区有效的属性animations：
坐标尺寸（bounds，frame，center）、
视图显示（backgroundColor，alpha，hidden）
形态变化 （transform）
动画展示方式options:
看一下官方文档的展示方式有哪些：我看不懂的只能原文贴上了= 。 =
-
常规属性
'' enum {
'' //默认，跟父类作为一个整体
'' UIViewAnimationOptionLayoutSubviews = 1 << 0,
'' //设置了这个，主线程可以接收点击事件
'' UIViewAnimationOptionAllowUserInteraction = 1 << 1,
'' //从当前状态开始动画，父层动画运动期间，开始子层动画。
'' UIViewAnimationOptionBeginFromCurrentState = 1 << 2,
'' //重复执行动画，从开始到结束， 结束后直接跳到开始态
'' UIViewAnimationOptionRepeat = 1 << 3,
'' //反向执行动画，结束后会再从结束态->开始态
'' UIViewAnimationOptionAutoreverse = 1 << 4,
'' //忽略继承自父层持续时间，使用自己持续时间（如果存在）
'' UIViewAnimationOptionOverrideInheritedDuration = 1 << 5,
'' //忽略继承自父层的线性效果，使用自己的线性效果（如果存在）
'' UIViewAnimationOptionOverrideInheritedCurve = 1 << 6,
'' //允许同一个view的多个动画同时进行
'' UIViewAnimationOptionAllowAnimatedContent = 1 << 7,
'' UIViewAnimationOptionShowHideTransitionViews = 1 << 8,
'' UIViewAnimationOptionOverrideInheritedOptions = 1 << 9,
''
-
Curve速度变化方式
'' //开始慢，加速到中间，然后减慢到结束
'' UIViewAnimationOptionCurveEaseInOut = 0 << 16,
'' //开始慢，加速到结束
'' UIViewAnimationOptionCurveEaseIn = 1 << 16,
'' //开始快，减速到结束
'' UIViewAnimationOptionCurveEaseOut = 2 << 16,
'' //线性运动
'' UIViewAnimationOptionCurveLinear = 3 << 16,
''
-
transitionWithView，转场方式
'' UIViewAnimationOptionTransitionNone = 0 << 20,
'' //从左往右翻页
'' UIViewAnimationOptionTransitionFlipFromLeft = 1 << 20,
'' //从右往左翻页
'' UIViewAnimationOptionTransitionFlipFromRight = 2 << 20,
'' //从下往上卷曲翻页
'' UIViewAnimationOptionTransitionCurlUp = 3 << 20,
'' //从上往下卷曲翻页
'' UIViewAnimationOptionTransitionCurlDown = 4 << 20,
'' ////转场交叉消失,渐隐渐现
'' UIViewAnimationOptionTransitionCrossDissolve = 5 << 20,
'' //从上往下翻页
'' UIViewAnimationOptionTransitionFlipFromTop = 6 << 20,
'' //从下往上翻页
'' UIViewAnimationOptionTransitionFlipFromBottom = 7 << 20,
'' };
'' typedef NSUInteger UIViewAnimationOptions;
重点提一下这几个值，接下来使用下面的值做一下常用动画
UIViewAnimationOptionRepeat （从开始态到结束态重复执行）
UIViewAnimationOptionAutoreverse （结束后会反向再执行一次）
UIViewAnimationOptionCurveEaseInOut （慢开始加速->到中间后开始减速）
UIViewAnimationOptionCurveEaseIn （开始慢，加速到结束 ）
UIViewAnimationOptionCurveEaseOut （开始快，减速到结束）
UIViewAnimationOptionCurveLinear （线性速度）
例子
-
这里通过这些属性实现一个上下来回的动画: =。=
'' [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse | UIViewAnimationCurveEaseOut animations:^{
'' _testView.frame = CGRectMake(135, -100, 50, 200);
'' } completion:nil];
效果：
此处输入图片的描述
-
旋转动画:
'' [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionRepeat |UIViewAnimationOptionCurveLinear animations:^{
'' _testView.transform = CGAffineTransformMakeRotation(M_PI);
'' } completion:nil];
效果:
-
上下来回和旋转动画一起:
'' [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse | UIViewAnimationCurveEaseOut animations:^{
'' _testView.frame = CGRectMake(135, 200, 50, 50);
''
'' [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionRepeat |UIViewAnimationOptionCurveLinear animations:^{
'' _testView.transform = CGAffineTransformMakeRotation(M_PI);
'' } completion:nil];
''
'' } completion:nil];
效果:
复杂的动画效果都是通过集中简单的动画组合而成，可以尝试分解动画，然后一个个组合。
使用Spring Animation API （弹性动画）
Spring Animation 的 API 和一般动画相比多了两个参数，分别是usingSpringWithDamping和initialSpringVelocity。
- usingSpringWithDamping参数
usingSpringWithDamping的范围为0.0f到1.0f，数值越小「弹簧」的振动效果越明显. 下面引用别人家的图片
- initialSpringVelocity 参数
initialSpringVelocity则表示初始的速度，数值越大一开始移动越快。
使用Spring Animation能更好地实现自定义的动画效果，能自己定义开始速度，能方便地使用常用的弹性动画。
三、CALayer 通过绘图的方式实现自定义动画
Core Graphics Framework是一套基于C的API框架，使用了Quartz作为绘图引擎。它提供了低级别、轻量级、高保真度的2D渲染。该框架可以用于基于路径的绘图、变换、颜色管理、脱屏渲染，模板、渐变、遮蔽、图像数据管理、图像的创建、遮罩以及PDF文档的创建、显示和分析。
iOS支持两套图形API族：Core Graphics/QuartZ 2D 和OpenGL ES。OpenGL ES是跨平台的图形API，属于OpenGL的一个简化版本。QuartZ 2D是苹果公司开发的一套API，它是Core Graphics Framework的一部分。
绘图步骤：
获取上下文
创建路径并设置路径
将属性添加到上下文
设置上下文属性
绘制路径
释放路径
使用方法:
新建一个文件，继承UIView
重写-(void)drawRect:(CGRect)rect方法
在drawRect方法内执行上面的绘图步骤
CALayer各种绘图
1.画直线
''
'' -(void)drawRect:(CGRect)rect{
'' [self drawLine];
'' }
''
'' //画直线
'' -(void)drawLine{
'' CGContextRef ctx = UIGraphicsGetCurrentContext();
'' // CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor); //填充的颜色
'' // CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor); //描边的颜色
'' // CGContextSetLineWidth(ctx, 5); //描边的宽度
''
'' //画线方法1，使用CGContextAddLineToPoint画线，需要先设置一个起始点
'' //设置起始点
'' CGContextMoveToPoint(ctx, 50, 50);
'' //添加一个点
'' CGContextAddLineToPoint(ctx, 100,50);
''
'' //画线方法2
'' //利用路径去画一组点
'' // CGMutablePathRef path = CGPathCreateMutable();
'' // CGPathMoveToPoint(path, nil, 0, 200);
'' // CGPathAddLineToPoint(path, nil, 100, 250);
'' // CGContextAddPath(ctx, path);
''
'' // CGContextFillPath(ctx); //填充
'' // CGPathRelease(path);
'' CGContextStrokePath(ctx); //描边
'' }
2.画圆
'' //画圆
'' -(void)drawRound{
'' CGContextRef ctx = UIGraphicsGetCurrentContext();
'' CGContextMoveToPoint(ctx, 100, 100);//移动画笔到指定坐标点
'' CGContextAddArc (ctx, 100, 100, 50, 0, 2*M_PI , 0);
''
'' //画椭圆，如果长宽相等就是圆
'' // CGContextAddEllipseInRect(ctx, CGRectMake(0, 250, 50, 50));
'' CGContextFillPath(ctx);
'' }
3.画矩形
'' //画矩形
'' -(void)drawRect{
'' CGContextRef ctx = UIGraphicsGetCurrentContext();
'' CGContextAddRect(ctx, CGRectMake(0, 250, 50, 50));
'' CGContextFillPath(ctx);
'' }
4.画多边形
'' //画多边形
'' -(void)drawPolygen{
'' CGContextRef ctx = UIGraphicsGetCurrentContext();
''
'' CGMutablePathRef path = CGPathCreateMutable();
'' CGPathMoveToPoint(path, nil, 120, 250);
'' CGPathAddLineToPoint(path, nil, 200, 250);
'' CGPathAddLineToPoint(path, nil, 180, 300);
'' CGPathCloseSubpath(path); //关键点，封闭路径，首尾连接
'' CGContextAddPath(ctx, path);
'' CGContextFillPath(ctx);
'' }
5.画图片
'' //画图片
'' -(void)drawImage{
'' // CGContextRef ctx = UIGraphicsGetCurrentContext();
'' UIImage *image = [UIImage imageNamed:@"test"];
'' [image drawInRect:CGRectMake(0, 0, 100, 100)];
'' }
6.画文字
'' //画文字
'' -(void)drawText{
'' //文字样式
'' UIFont *font = [UIFont systemFontOfSize:18];
'' NSDictionary *dict = @{NSFontAttributeName:font,
'' NSForegroundColorAttributeName:[UIColor blueColor]};
'' [@"hello world" drawInRect:CGRectMake(120 , 350, 500, 50) withAttributes:dict];
'' }
7.画扇形
'' //画扇形
'' -(void)drawArc{
'' CGContextRef ctx = UIGraphicsGetCurrentContext();
'' CGContextMoveToPoint(ctx, 100, 100);//移动画笔到指定坐标点
'' CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);//填充颜色
'' CGContextAddArc(ctx, 100, 100, 50, 1.5*M_PI, 0, 0); //添加一个圆,设置角度. 最后一个值0为顺时针,1为逆时针
'' CGContextFillPath(ctx);
'' }
总结
=.=要做什么高度定制动画可以自己绘制去， 复杂动画逐步分解。
实在没想法， 出大招，甩锅让UI做gif或者svg。
一个轻量的基础动画库:
[https://github.com/mozhenhau/D3View]