核心动画

最新推荐文章于 2024-07-14 13:39:18 发布

weixin_30700977

最新推荐文章于 2024-07-14 13:39:18 发布

阅读量78

点赞数

文章标签：操作系统 wwdc 人工智能

原文链接：http://www.cnblogs.com/UncleX/p/6378795.html

版权

核心动画

CALayer

在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView
其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层
在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层
property(nonatomic,readonly,retain) CALayer *layer;
当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示
换句话说，UIView本身不具备显示的功能，是它内部的层才有显示功能
通过操作CALayer对象，可以很方便地调整UIView的一些外观属性，比如：
阴影
圆角大小
边框宽度和颜色
… …
还可以给图层添加动画，来实现一些比较炫酷的效果

基本使用

uiview

// 设置View的边框宽度
    self.purpleView.layer.borderWidth = 20.0;

    // 设置边框颜色 @property(nullable) CGColorRef borderColor;返回值是CGClor
    self.purpleView.layer.borderColor = [UIColor greenColor].CGColor;

    // 设置圆角(外边框的圆角)
    self.purpleView.layer.cornerRadius = 10;

    // 设置阴影
    self.purpleView.layer.shadowColor = [UIColor blackColor].CGColor;
    // 设置阴影偏差(不设置是在正后方,看不到)(10,10)向右,向下偏差
    self.purpleView.layer.shadowOffset = CGSizeMake(10, 10);
    // 设置阴影的不透明度
    self.purpleView.layer.shadowOpacity = 0.5;
    // 如果还出不来,设置这个属性(防止阴影被裁剪)
    //    self.purpleView.layer.masksToBounds = NO;

imageView

// 设置圆角
    self.iconView.layer.cornerRadius = 20.0;
    self.iconView.layer.masksToBounds = YES;

imageView的圆角设置要调用这两句,因为圆角设置的是CALayer的主层,而图片是显示在次层上的,所以要将超出圆角部分剪掉才能显示圆角
但是这样就不能设置阴影了,阴影也会被剪掉,所以图片的圆角和阴影不可同时用这种方式设置,解决办法—图片用Quze2D先画成圆角的图片,然后再再这里设置阴影即可

形变属性transform = (缩放+旋转+平移)
缩放

 // 缩放
    self.iconView.layer.transform = CATransform3DMakeScale(1.5, 0.5, 0);

缩放的KVC设置方式(可单个设置)

  [self.iconView.layer setValue:@(1.5) forKeyPath:@"transform.scale.x"];
    [self.iconView.layer setValue:@0.5 forKeyPath:@"transform.scale.y"];

旋转

 // 旋转(layer的旋转是3D效果的)
 // 三维旋转
    self.iconView.layer.transform = CATransform3DMakeRotation(M_PI_4, 1, 1, 0);
 // 二维旋转(z轴随便设置,平面看不出来)
    self.iconView.layer.transform = CATransform3DMakeRotation(M_PI_4, 0, 0, 100);

旋转的KVC设置方式

  NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 0, 0, 100)];
    [self.iconView.layer setValue:value forKeyPath:@"transform"];

平移

    // 向左向上平移
    [self.iconView.layer setValue:[NSValue valueWithCGPoint:CGPointMake(-100, -100)] forKeyPath:@"transform.translation"];
// 只平移x轴
    [self.iconView.layer setValue:[NSNumber numberWithFloat:-100] forKeyPath:@"transform.translation.x"];

API中搜索CATransform 3D key Paths 可以查看设置transform的哪些属性.

新建图层

  // 新建图层(两种方式)
    CALayer *layer = [[CALayer alloc]init];
    CALayer *layer2 = [CALayer layer];

    // 位置.大小
    layer2.position = CGPointMake(100, 100);
    layer2.bounds = CGRectMake(0, 0, 100, 100);
    // 颜色
    layer2.backgroundColor = [UIColor blueColor].CGColor;
    // 内容(图片)
    layer2.contents = (id)[UIImage imageNamed:@"lufy"].CGImage;

    // 圆角
    layer2.masksToBounds = YES;
    layer2.cornerRadius  = 10.0;
    [self.view.layer addSublayer:layer2];

UIView 比CALayer多了一个事件处理的功能,如果不用和用户交互,只是显示,用新建图层和UIview都是一样的.当然因为CALayer没有事件处理的功能,所以性能更高一些,更加轻量级

为什么要用 .CGImage
首先
CALayer是定义在QuartzCore框架中的
CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
UIColor、UIImage是定义在UIKit框架中的
其次
QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用
但是UIKit只能在iOS中使用
为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

重要属性

CALayer有2个非常重要的属性：position和anchorPoint

@property CGPoint position;
用来设置CALayer在父层中的位置
以父层的左上角为原点(0, 0)

@property CGPoint anchorPoint;
称为“定位点”、“锚点”
决定着CALayer身上的哪个点会在position属性所指的位置
以自己的左上角为原点(0, 0)
它的x、y取值范围都是0~1，默认值为（0.5, 0.5）

隐式动画

每一个UIView内部都默认关联着一个CALayer，我们可用称这个Layer为Root Layer（根层）
所有的非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画
什么是隐式动画？
当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果
而这些属性称为Animatable Properties(可动画属性)
列举几个常见的Animatable Properties：
bounds：用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
position：用于设置CALayer的位置。修改这个属性会产生平移动画

可以通过动画事务(CATransaction)关闭默认的隐式动画效果
[CATransaction begin];
[CATransaction setDisableActions:YES];
self.myview.layer.position = CGPointMake(10, 10);
[CATransaction commit];

    //更改图层背景颜色
     self.layer.backgroundColor = [UIColor blueColor].CGColor;

    [CATransaction begin]; // 开启事务
    [CATransaction setDisableActions:YES];
    // 更改位置
    self.layer.position = CGPointMake(100, 100);
    // 更改不透明度
    self.layer.opacity = 0.5;

    [CATransaction commit]; // 提交事务

自定义图层

方式一

#import "WXLayer.h"

 WXLayer *layer = [WXLayer layer];
    layer.position = CGPointMake(100, 100);
    layer.bounds = CGRectMake(0, 0, 100, 100);
    layer.backgroundColor = [UIColor blueColor].CGColor;
    layer.anchorPoint = CGPointZero;
    [layer setNeedsDisplay];
    [self.view.layer addSublayer:layer];

方式二

- (void)diyLayer2
{
    CALayer *layer = [CALayer layer];
    layer.bounds = CGRectMake(0, 0, 100, 100);
    layer.backgroundColor = [UIColor blackColor].CGColor;
    layer.anchorPoint = CGPointZero;
    layer.position = CGPointMake(100, 100);
    // 设置代理为自身的view
    layer.delegate = self;
    [layer setNeedsDisplay];
    [self.view.layer addSublayer:layer];
}

#pragma mark - 图层的代理方法
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
    CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
    CGContextAddRect(ctx, CGRectMake(0, 0, 20, 20));
    CGContextFillPath(ctx);
}

view的完整显示过程

view.layer会准备一个Layer Graphics Contex(图层类型的上下文)
调用图层代理的view.layer.delegate(view)的drawLayer:inContext:,并传入刚才准备好的上下文
view的drawLayer:inContext:方法内部又会调用view的drawRect:方法
view就可以在drawRect:方法中实现绘图代码, 所有东西最终都绘制到view.layer上面
系统再将view.layer的内容拷贝到屏幕, 于是完成了view的显示
一个View图层的代理就是这个View本身.这个view不能充当其他view的代理.

核心动画Core Anamation

简介

Core Animation，中文翻译为核心动画，它是一组非常强大的动画处理API，使用它能做出非常炫丽的动画效果，而且往往是事半功倍。也就是说，使用少量的代码就可以实现非常强大的功能。
Core Animation可以用在Mac OS X和iOS平台。
乔帮主在2007年的WWDC大会上亲自为你演示Core Animation的强大：点击查看视频
Core Animation的动画执行过程都是在后台操作的，不会阻塞主线程。
要注意的是，Core Animation是直接作用在CALayer上的，并非UIView。

使用步骤

1.使用它需要先添加QuartzCore.framework框架和引入主头文件<QuartzCore/QuartzCore.h>

2.初始化一个CAAnimation对象，并设置一些动画相关属性

3.通过调用CALayer的addAnimation:forKey:方法增加CAAnimation对象到CALayer中，这样就能开始执行动画了

4.通过调用CALayer的removeAnimationForKey:方法可以停止CALayer中的动画

CAAnimation

从前面的叙述可以看出，要想执行动画，就必须初始化一个CAAnimation对象。
其实，一般情况下，我们使用的比较多的是CAAnimation的子类，因此，先大致看看CAAnimation的继承结构

(总) . CAAnimation的常用属性

CAAnimation是所有动画类的父类，但是它不能直接使用，应该使用它的子类
常见属性有：
- 1> duration：动画的持续时间
- 2> repeatCount：动画的重复次数
- 3> timingFunction：控制动画运行的节奏
- - timingFunction可选的值有：
    kCAMediaTimingFunctionLinear（线性）：匀速，给你一个相对静态的感觉
    kCAMediaTimingFunctionEaseIn（渐进）：动画缓慢进入，然后加速离开
    kCAMediaTimingFunctionEaseOut（渐出）：动画全速进入，然后减速的到达目的地
  - kCAMediaTimingFunctionEaseInEaseOut（渐进渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。这个是默认的动画行为。
- 4> delegate：动画代理，用来监听动画的执行过程,代理对象需要实现的方法有：（这几个方法被定义在某个分类中）

// 动画开始执行的时候触发这个方法
 - (void)animationDidStart:(CAAnimation *)anim;

  // 动画执行完毕的时候触发这个方法
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

上面介绍的所有属性都是属于CAAnimation的，因此，CAAnimation的所有子类都能使用它们。
CAPropertyAnimation也是不能直接使用的，也要使用它的子类
所以，能用的动画类只剩下4个：CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup

一. CAPropertyAnimation

CAPropertyAnimation是CAAnimation的子类，但是不能直接使用，要想创建动画对象，应该使用它的两个子类：CABasicAnimation和CAKeyframeAnimation
它有个NSString类型的keyPath属性，你可以指定CALayer的某个属性名为keyPath，并且对CALayer的这个属性的值进行修改，达到相应的动画效果。比如，指定@”position”为keyPath，就会修改CALayer的position属性的值，以达到平移的动画效果
因此，初始化好CAPropertyAnimation的子类对象后，必须先设置keyPath，搞清楚要修改的是CALayer的哪个属性，执行的是怎样的动画

(一). CABasicAnimation

让图层动画的本质就是更改它的属性

缩放

// 1.创建动画
    CABasicAnimation *anim = [CABasicAnimation animation];

    // 2.设置动画对象
    // kepath 就是要给layer的那个属性做动画
    anim.keyPath = @"bounds";
    // 动画从哪开始,到哪结束,不设置开始,默认就是当前位置
//    anim.fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
    anim.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];

    // 设置一下动画持续时间
    anim.duration = 2.0;

    // 动画后保持动画后的效果,就要设置下面两句
    // >1. 动画完成后不要删除动画
    anim.removedOnCompletion = NO;
    // >2. 动画后保持最新状态
    anim.fillMode = kCAFillModeForwards;


    // 3.添加动画
    [self.layer addAnimation:anim forKey:nil];

平移

 anim.keyPath = @"position";
    // 动画从哪开始,到哪结束,不设置开始,默认就是当前位置
    //    anim.fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
    anim.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 200)];

单个设置

anim.keyPath = @"transform.translation.x";
    anim.toValue = @(100);

anim.keyPath = @"position";
    // toValue : 最终变成什么值
    // byValue : 增加多少值
    anim.byValue = [NSValue valueWithCGPoint:CGPointMake(200, 300)];

旋转

anima.keyPath = @"transform";
    anima.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 1, -1, 0)];

(二) . CAKeyframeAnimation

关键帧动画,上面的基础动画,只能从一个值变到另一个值,fromeValue–toVlue,但是关键帧动画可以在任意值之间切换.

平移

添加多个点,在多个点之间移动

CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];

    anim.keyPath = @"position";
    // 设置四个位置点
    NSValue *value = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(150, 200)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(200, 100)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(100, 200)];

    // 将位置点添加到数组中,就会按照数组的顺序执行
    anim.values = @[value,value2,value3,value4];
    anim.duration = 2.0 ;
    anim.fillMode = kCAFillModeForwards ;
    anim.removedOnCompletion = NO;
    [self.testView.layer addAnimation:anim forKey:nil];

指定路径移动

CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    anim.duration = 2.0;
    anim.keyPath = @"position";
    // 创建一条路径
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 150, 50, 50));
    // 设置路径
    anim.path = path;
    // 释放
    CGPathRelease(path);
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards ;
    [self.testView.layer addAnimation:anim forKey:nil];

动画的代理方法

#pragma mark - 动画的代理方法
#pragma mark 动画开始的时候调用
- (void)animationDidStart:(CAAnimation *)anim
{
    NSLog(@"animationDidStart");
}
#pragma mark 动画结束的时候调用
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    NSLog(@"animationDidStop");
}

图片抖动实例

这里用到了key这个属性
角度制转弧度制
#define Angle2Radian(angle) ((angle) / 180.0 * M_PI)

- (IBAction)start {
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    anim.keyPath = @"transform.rotation";
    // 放三个值可以完成一个小循环,避免突然切换到开始
    anim.values = @[@(Angle2Radian(-5)),  @(Angle2Radian(5)), @(Angle2Radian(-5))];
    anim.duration = 0.25;
    // 动画的重复执行次数(无数次)
    anim.repeatCount = MAXFLOAT;

    // 保持动画执行完毕后的状态
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    // 这里设置一个key,就可以在关闭的时候通过这个key找到这个动画
    [self.iconView.layer addAnimation:anim forKey:@"shake"];
}

- (IBAction)stop {
    // 通过key可以找到要关闭哪个动画
    [self.iconView.layer removeAnimationForKey:@"shake"];
}

CApropertyAnimation的子类，跟CABasicAnimation的区别是：CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值

属性解析：

values：就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧
path：可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略
keyTimes：可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的
CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation

二 . CATrasition过度动画(转场动画)

  // 转场动画
    CATransition *anim = [CATransition animation];
    // 动画模式
    anim.type = @"pageCurl";
    // 动画方向
    anim.subtype = kCATransitionFromRight;
    anim.duration = 0.5;

// 动画进度,从哪开始动画,到哪结束动画,可以设置
//    anim.startProgress = 0.0;
//    anim.endProgress = 0.5;

    [self.view.layer addAnimation:anim forKey:nil];

CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点
UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果
属性解析:
type：动画过渡类型
subtype：动画过渡方向
startProgress：动画起点(在整体动画的百分比)
endProgress：动画终点(在整体动画的百分比)

三 . CAAnimationGroup

CAAnimation的子类，可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行
属性解析：
animations：用来保存一组动画对象的NSArray
默认情况下，一组动画对象是同时运行的，也可以通过设置动画对象的beginTime属性来更改动画的开始时间

 // 1.创建旋转动画对象
    CABasicAnimation *rotate = [CABasicAnimation animation];
    rotate.keyPath = @"transform.rotation";
    rotate.toValue = @(M_PI);

    // 2.创建缩放动画对象
    CABasicAnimation *scale = [CABasicAnimation animation];
    scale.keyPath = @"transform.scale";
    scale.toValue = @(0.0);

    // 3.平移动画
    CABasicAnimation *move = [CABasicAnimation animation];
    move.keyPath = @"transform.translation";
    move.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];

    // 4.将所有的动画添加到动画组中(动画时常等在grop上统一设置)
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[rotate, scale, move];
    group.duration = 2.0;
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;

    [self.myvie.layer addAnimation:group forKey:nil];

UIView封装的动画

核心动画有个缺点,所有的图层动画都是假象,在动画执行过程中,图层的属性值自始至终一直都没有变过.
基于view的动画的属性值是真是改变的,所以以后能用基于view的动画就用基于view的动画,


    [UIView beginAnimations:nil context:nil];

    self.myview.center = CGPointMake(200, 300);

    [UIView commitAnimations];

// 监听:动画执行完毕后, 会自动调用self的animateStop方法
        [UIView setAnimationDelegate:self];
        [UIView setAnimationDidStopSelector:@selector(animateStop)];

或者用block

[UIView animateWithDuration:1.0 animations:^{
        self.myview.center = CGPointMake(200, 300);
    } completion:^(BOOL finished) {

    }];

    [UIView transitionWithView:self.iconView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromTop animations:nil completion:nil];

 UIViewAnimationOptionTransitionNone            = 0 << 20, // default
UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,
UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,
UIViewAnimationOptionTransitionCurlUp          = 3 << 20,
UIViewAnimationOptionTransitionCurlDown        = 4 << 20,
UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20,
UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20,
UIViewAnimationOptionTransitionFlipFromBottom  = 7 << 20,

转载于:https://www.cnblogs.com/UncleX/p/6378795.html

weixin_30700977

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
核心动画

核心动画CALayer在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的lay...
复制链接

扫一扫