iOS：CALayer和CALayer动画

最新推荐文章于 2022-12-12 18:30:59 发布
最新推荐文章于 2022-12-12 18:30:59 发布
阅读量626 收藏
点赞数
分类专栏： iOS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a526001650a/article/details/89297725
版权

说明：

CALayer是层的概念，每个UIView有一个CALayer，可实现各种样式设置，CALayer还可单独加入某个UIiew上成为子视图(无触控事件)；

CALayer一些属性改变时自带动画，如要关闭需要开启事务，在事务中关闭；

CALayer常用动画：

CABasicAnimation(核心动画)、CAKeyframeAnimation(帧动画)、CATransition(过渡动画)。

 

一、CALayer使用：

1.在Main.storyboard中拖入一个UIView，拖线出一个引用变量：

@property (weak, nonatomic) IBOutlet UIView *v

2.CALayer样式设置：

/*
 CALayer样式设置
 */
- (void)setCALayerStyle{
    //设置边框宽度
    self.v.layer.borderWidth = 10;
    //设置边框颜色
    self.v.layer.borderColor = [UIColor blueColor].CGColor;
    //设置圆角
    self.v.layer.cornerRadius = 10;
    
    //设置阴影
    self.v.layer.shadowColor = [UIColor blackColor].CGColor;
    //设置阴影偏移量
    self.v.layer.shadowOffset = CGSizeMake(-10, 10);
    //设置阴影不透明
    self.v.layer.shadowOpacity = 0.5;
    //设置阴影裁剪：YES为裁剪  NO为不裁剪
    self.v.layer.masksToBounds = NO;
    
    //平移
//    self.v.layer.transform = CATransform3DMakeTranslation(50, 300, 0);
    
    //旋转
//    self.v.layer.transform = CATransform3DMakeRotation(M_PI_2, 10, 10, 10);
    
    //缩放
//    self.v.layer.transform = CATransform3DMakeScale(0.5, 0.5, 0.5);
    
    //用kvc调用，实现平移
//    NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeTranslation(50, 300, 0)];
//    [self.v.layer setValue:value forKey:@"transform"];

    //旋转
//    NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 10, 10, 10)];
//    [self.v.layer setValue:value forKey:@"transform"];
    
    //缩放
//    NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, 0.5)];
//    [self.v.layer setValue:value forKey:@"transform"];
    
    /*
     用kvc调用，缩放、旋转、缩放
     key名列表：
     rotation.x
     rotation.y
     rotation.z
     rotation
     scale.x
     scale.y
     scale.z
     scale
     translation.x
     translation.y
     translation.z
     translation
     */
    //用kvc调用
//    [self.v.layer setValue:值 forKey:@"key名"];
//    例：
//    [self.v.layer setValue:[NSValue valueWithCGPoint:CGPointMake(-100, -100)] forKey:@"transform.translation"];
}

3.创建CALayer实现类试UIView的显示功能：

/*
 创建CALayer实现类试UIView的显示功能
 */
- (void)createCALayer{
    //创建新图层
    CALayer *layer = [CALayer layer];
    //背景颜色，改变时有默认动画效果
    layer.backgroundColor = [UIColor blueColor].CGColor;
    //xy宽高，改变时有默认动画效果
    layer.bounds = CGRectMake(0, 0, 300, 300);
    
    //相对父View位置，会被anchorPoint影响，默认以当前View的中心点相对父View，改变时有默认动画效果
    layer.position = CGPointMake(200, 200);
    //anchorPoint默认值为：(0.5, 0.5)  取值范围：0.0-1.0，配合 position使用，决定相对于父View的位置
    layer.anchorPoint = CGPointMake(200, 200);
    
    //圆角
    layer.cornerRadius = 10;
    //裁剪超出部分
    layer.masksToBounds = YES;
    //显示内容
    layer.contents = (id) [UIImage imageNamed:@"img"].CGImage;
    
    //实现代理
    layer.delegate = self;
    
    //将图层加入当前View中
    [self.v.layer addSublayer:layer];
}
/*
 实现代理方法，画图形，必须调用setNeedsDisplay方法才会绘制
 */
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx{
    //绘制图形
}

4.开启事务：layer默认有动画，开启事务可以关闭动画：

/*
 开启事务：layer默认有动画，开启事务可以关闭动画
 */
- (void)openTransaction{
    //开启事务
    [CATransaction begin];
    
    //YES没有动画, NO为默认值，有动画
    [CATransaction setDisableActions:YES];
    
//    layer.opacity = 0.5;
    
    //提交事务
    [CATransaction commit];
}

二、CALayer动画：

1.CABasicAnimation(核心动画)：

说明：

形变动画，可平移、缩放、渐变等

属性：

fromValue

toValue

/*
 核心动画
 */
- (void)basicAnim{
    //1.创建动画
    CABasicAnimation *anim = [CABasicAnimation animation];
    
    //设置持续时间
    anim.duration = 3.0;
    
    //完成动画不回弹
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    
    //实现代理
    anim.delegate = self;
    
    //添加动画方式
    [self setBasicAnimConfig:anim];
    
    //3.添加到图层
    [self.v.layer addAnimation:anim forKey:nil];
}
/*
 配置核心动画属性
 */
- (CABasicAnimation *)setBasicAnimConfig:(CABasicAnimation *)anim{
    //设置位移
//    anim.keyPath = @"position";
//    anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 00)];
//    anim.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 300)];
    
    //设置旋转
//    anim.keyPath = @"transform";
//    anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, -1, 0)];
    //或
//    anim.keyPath = @"transform.rotation";
//    anim.toValue = @(M_PI_2);
    
    //缩放
    anim.keyPath = @"transform.scale";
    anim.toValue = @(0.5);

    return anim;
}

2.CAKeyframeAnimation(帧动画)：

说明：

一帧一帧播放的效果

属性：

Values

Path

keyTimes

/*
 帧动画
 */
- (void)frameAnim{
    //创建frame动画
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    
    //设置持续时间
    anim.duration = 3.0;
    
    //完成动画不回弹
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    
    //实现代理
    anim.delegate = self;
    
    //设置播放次数MAXFLOAT几乎为无限
    anim.repeatCount = MAXFLOAT;
    
    //添加动画方式
    [self setFrameAnimConfig:anim];
    
    //3.添加到图层
    [self.v.layer addAnimation:anim forKey:nil];
    
}
/*
 配置帧动画属性
 */
- (CAKeyframeAnimation *)setFrameAnimConfig:(CAKeyframeAnimation *)anim{
    //1.1 anim.values方式：设置位移
//    anim.keyPath = @"position";
//    NSValue *value1 = [NSValue valueWithCGPoint:CGPointZero];
//    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(50, 50)];
//    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
//    anim.values = @[value1, value2, value3];
    //1.2 anim.values方式：设置values中每个动画的时间
//    anim.keyTimes = @[@(1), @(0.4), @(0.6)];
    
    //2.1 anim.path方式：
    anim.keyPath = @"position";
    
    //2.2移动创建路径
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, NULL, CGRectMake(20, 20, 300, 300));  //画圆
    anim.path = path;
    CGPathRelease(path);  //释放
    
    //设置执行节奏
    /*
     默认：kCAMediaTimingFunctionDefault
     匀速：kCAMediaTimingFunctionLinear
     从慢到快：kCAMediaTimingFunctionEaseIn
     从快到慢：kCAMediaTimingFunctionEaseOut
     开始与结尾慢，中间快：kCAMediaTimingFunctionEaseInEaseOut
     */
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
 
    return anim;
}

3.CATransition(过渡动画)：

说明：

转场切换的动画效果，例翻页

属性：

filter

/*
 过渡动画
 */
- (void)transitionAnim{
    //1.创建过渡动画
    CATransition *anim = [CATransition animation];
    
    //设置持续时间
    anim.duration = 0.5;
    
    //完成动画不回弹
//    anim.removedOnCompletion = NO;
//    anim.fillMode = kCAFillModeForwards;
    
    //实现代理
//    anim.delegate = self;
    
    //设置播放次数MAXFLOAT几乎为无限
//    anim.repeatCount = 1;
    
    //2.添加动画方式
    [self setTransitionAnimConfig:anim];
    
    //3.添加到图层
    [self.v.layer addAnimation:anim forKey:nil];
}
/*
 配置过渡动画属性
 */
- (CATransition *)setTransitionAnimConfig:(CATransition *)anim{
    //过渡类别
    /*
     fade:交叉淡化
     push:新将旧推出去
     moveIn：新移到旧上面
     reveal：将旧移开，显示下面的新视图
     cube：立方体翻滚
     oglFlip：上下左右翻转
     suckEffect：收缩效果
     rippleEffect：滴水效果
     pageCurl：向上翻页
     pageUnCurl：向下翻页
     cameraIrisHollowOpen：相机镜头打开
     cameraIrisHollowClose：相机镜头关闭
     */
    anim.type = @"push";
    //过渡方向
    /*
     kCATransitionFromLeft
     kCATransitionFromRight
     kCATransitionFromTop
     kCATransitionFromButton
     */
    anim.subtype = kCATransitionFromTop;
    //起点百分比，取值：0.0-1.0
    anim.startProgress = 0.9;
    //终点百分比，取值：0.0-1.0
    anim.endProgress = 1;
    return anim;
}

4.CAAnimationGroup(动画组)：

说明：

可以将多个动画效果组合播放

属性：

animations

/*
 动画组
 */
- (void)animGroup{
    //1.创建动画组
    CAAnimationGroup *group = [CAAnimationGroup animation];
    
    //设置持续时间
    group.duration = 1.0;
    //完成动画不回弹
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
    
    //2.添加动画方式
    [self setAnimGroupConfig:group];
    
    //3.添加到图层
    [self.v.layer addAnimation:group forKey:nil];
}
/*
 配置动画组属性
 */
- (CAAnimationGroup *)setAnimGroupConfig:(CAAnimationGroup *)group{
    //1.平移动画
    CABasicAnimation *translation = [CABasicAnimation animation];
    translation.keyPath = @"transform.translation";
    //平移到此处
    translation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 200)];
    
    //2.旋转动画
    CABasicAnimation *rotate = [CABasicAnimation animation];
    rotate.keyPath = @"transform.rotation";
    //旋转角度
    rotate.toValue = @(M_PI_2);
    
    //3.将2个动画加入组
    group.animations = @[translation, rotate];
    return group;
}

5.监听动画开始与结束：

/*
 动画开始
 */
- (void)animationDidStart:(CAAnimation *)anim{
    NSLog(@"动画开始");
}
/*
 动画结束
 */
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    NSLog(@"动画结束");
}

 

無_爲
关注
专栏目录
iOS-CALayer动画之CAKeyframeAnimation动画视图的添加点击事件和气泡随机飘动上升动画
chen472765484的博客
01-29 580
iOS-CALayer动画之CAKeyframeAnimation动画视图的添加点击事件和气泡随机飘动上升动画 @property (strong, nonatomic) UIView *bgView;//气泡所在的view (void)viewDidLoad { self.bgView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen]
IOS CALayer 详解
weixin_30572613的博客
10-30 91
CALayer 是一个很经常使用的到的 Object，很常用，也很重要，同时又有比较多的属性，嗯，一定要详细了解下。 CALayer 的原理很难懂，由于我目前只注重运用，所以就说那些在实际开发中能用到的一些地方。 如果要更改 UIView 的 CALayer，要引用：#import <QuartzCore/QuartzCore.h>. 下面先推荐两篇文章: 文章 1:原理介绍的比...
iOS CALayer使用
a26579424的博客
05-24 206
CALayer使用 iOS的设备中，我们之所以能看到各种各样的控件、文字、图片，都是Core Animation框架的功劳。它通过图层的合成，最终显示在屏幕上。而今天这篇文章讲的就是Core Animation使用的图层—CALayer。每一个UIView都有一个对应的一个CALayer，这个CALayer可能是一个图层，也可能是多个图层的叠加。事实上，在很多复杂的页面中，...
iOS动画-CALayer隐式动画原理与特性
gcs的博客
10-22 636
Core Animation的一个非常显著的特性是就是实现动画，而且它支持隐式动画和显式动画两种形式，本篇我们主要从隐式动画说起； 本篇主要内容： 1.何为隐式动画 2.隐式动画原理-事务与图层行为 3.隐式动画的关闭与显示 4.隐式动画自定义图层行为 一、何为隐式动画？ Core Animation是基于这样的一个假设：屏幕上的任何东西都可以(或者可能)做动画，它并不需要手动打开，反而是需要我们明确的关闭，否则动画会一直存在。所谓隐式动画，其实是指我们可以在不设定任何动画类型的情况下，仅仅改变CAL
iOS利用CALayer实现动画加载的效果
09-01
在iOS开发中，为了创建各种视觉效果，开发者经常使用CALayer来替代UIView，因为CALayer提供了更底层的图形渲染和动画支持。本文将探讨如何利用CALayer实现一个加载动画的效果，特别关注圆圈翻转动画的实现过程。 ...
IOS 中CALayer绘制图片的实例详解
08-29
在iOS开发中，CALayer是UI视图的基础组件，它负责绘制内容并处理动画效果。在某些场景下，我们可能需要直接使用CALayer来绘制图片，而不是依赖于UIImageView。这篇文章将详细讲解如何在CALayer中绘制图片，并通过...
Animation
张梦磊
12-09 1909
一、iOS动画 iOS中实现一个动画十分简单，在view层面上通过调用 [UIView animateWithDuration:duration animations:^{ //执行动画 }] 但是它不能控制动画的暂停和组合，所以就需要用到CoreAnimation了。 iOS中的动画主要分为：基础动画（CABasicAnimation）、关键帧动画（CA
iPhone/iOS Core Animation开发总结(CALayer)
热门推荐
05-02 2万+
一.重要参数 bounds,frame,position属于基本的几何定位，相互之间数值变化会相互影响 anchorPoint:单位参数(0-1)表示，变形(transform)时候的变换源点 zPosition:相当于css中z-index的概念，Apple建议不要用这个来替代CALayer层次设置。 cornerRadius:圆角 二.几何变形(Transforming a
CALayer动画
qiangshuting的博客
08-01 126
CGAffineTransform UIView 的 transform 属性是一 个 CGAffineTransform 类型，用于在二维空间做旋转，缩放和平移。 CGAffineTransform 是一个可以和二维空间向量（例如 的3X2的矩阵 创建一个 CGAffineTransform 实例： CGAffineTransformMakeRotation(CGFloat angle) CG...
iOS-CALayer
mingC0758的博客
07-10 370
iOS-CALayer CALayer是图层的意思。 每个View都有一个根图层。 图层可以添加子图层，子图层覆盖在父图层之上 - (void)viewDidLoad { self.view.backgroundColor =[UIColor whiteColor]; UIView *view = [[UIView alloc] initWithFrame:self.view....
iOS中的CALayer
W
10-30 413
找工作过程中，iOS动画貌似问的有点多。恰巧过去并没有好好学过iOS中的动画，因此想在这里记录一下，也方便以后查看。这篇先来记录与动画有关系的CALayer。关于CALayer的文章，网上已经有很多了。因此也是拾人牙慧了。iOS中的视图，我们一般用UIView来绘制。而UIView之所以能够显示到屏幕上供我们看见，就是因为UIView里面包含了一层CALayer，它才是真正进行绘制的图层。当UIVi
【动画2】CALayer动画
dolacmeng的专栏
08-15 630
一）UIView动画  二）CALayer 一、CoreAnimation动画之CALayer的使用     Layer动画和view动画十分相似。只要设置属性的开始值和结束值、动画时间，CoreAnimation会帮我们完成动画过程。     但是layer有更多的属性，而且CALayer的很多子类额外添加了更多属性，因此可以更多的动画效果。     1.位置和大小
iOS开发之让你的应用“动”起来(动画)
树上的男爵
10-22 1229
在iOS中随处都可以看到绚丽的动画效果，实现这些动画的过程并不复杂，今天将带大家一窥iOS动画全貌。在这里你可以看到iOS中如何使用图层精简非交互式绘图，如何通过核心动画创建基础动画、关键帧动画、动画组、转场动画，如何通过UIView的装饰方法对这些动画操作进行简化等。在今天的文章里您可以看到动画操作在iOS中是如何简单和高效，很多原来想做但是苦于没有思路的动画在iOS中将变得越发简单： C
CALayer的隐式动画
最新发布
weixin_46926959的博客
12-12 528
CALayer隐式动画
CALayer及动画
DC_Even的博客
02-06 516
转自http://www.cnblogs.com/kenshincui/p/3972100.html1.CALayerCALayer简介在介绍动画操作之前我们必须先来了解一个动画中常用的对象CALayer。CALayer包含在QuartzCore框架中，这是一个跨平台的框架，既可以用在iOS中又可以用在Mac OS X中。在使用Core Animation开发动画的本质就是将CALayer中的内容转
iOS——CALayer(图层类)
weixin_33850890的博客
01-15 168
2019独角兽企业重金招聘Python工程师标准>>> ...
iOS基础 UIWindow
乐事派的专栏
12-21 491
本文是从Objective-C过渡到Swift的文章，主要记录一些与oc时代开发相区别、和一些自己平时不大留意的知识点，但对面试都有很大的帮助。 写在前面的一些学习备忘 除了基础的iOS学习外，随着每个版本的发布，越来越多的新功能新特性加入其中，其中有： 可调用siri 机器学习Core ML AR 增强现实 Core NFC 同一局域网下的无线真机调试 等等 iOS应用程序的状态 5种状态： 未运行 Not Running 未激活 Inactive 有在运行，但没法接收事件，如锁屏、响应来电等。 已
iOS CALayer介绍
LOLITA0164的博客
11-20 8546
声明 该篇文章的内容参考自 iOS核心动画高级技巧 一文，非常感谢其作者和中文版的作者，让我能够相对系统的学习 CoreAnimation 的知识，我受益匪浅，再次感谢。 如果有兴趣的小伙伴可以访问其网站，详细的，完整的学习 CoreAnimation。 Core Animation 介绍 Core Animation ，核心动画，似乎第一次看到这个名字的人都会认为这是一个和动画相关的库，但是实际...
iOS开发：CAlayer层关键属性——position与anchorPoint详解
在iOS开发中，CAlayer是Core Animation的核心组件，它提供了强大的图形渲染和动画功能。本文将详细介绍CAlayer层的两个关键属性：position和anchorPoint，以及如何通过自定义这些属性来实现更精确的布局和动画效果。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值