CALayer扩展属性自定义CAAnimation动画

最新推荐文章于 2021-07-05 18:44:09 发布
最新推荐文章于 2021-07-05 18:44:09 发布
阅读量2.5k 收藏 1
点赞数 1
分类专栏： iOS 文章标签： CALayer CAAnimation 自定义动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GrowingGiant/article/details/42493329
版权

使用CA动画也有段时间了，相对都是比较基本的一些动画。使用的范围基本都是layer自己的animateble的属性。那对于CALayer子类扩展的属性该如何实现动画呢？

我想做一个圆形的进度条，通过CABasicAnimation动画更新progress，效果如下：


首先了解下layer自己的属性如果实现动画的。layer加载时会通过+ (BOOL)needsDisplayForKey:(NSString *)key 方法来判断当前属性改变是否需要重新绘制。如果想实现自定义动画就需要重载这个方法，当key等于扩展属性时return yes即可；


上一步实现扩展属性改变便会自动调用 setNeedsDisplay这样就会触发重绘，达到我们想要的效果。

来看下 setNeedsDisplay之后layer及其delegate的相关方法调用。

layer方法响应链有两种:

① [layer setNeedDisplay] -> [layer displayIfNeed] -> [layer display] -> [layerDelegate displayLayer:]

② [layer setNeedDisplay] -> [layer displayIfNeed] -> [layer display] -> [layer drawInContext:] -> [layerDelegate drawLayer: inContext:]

说明一下，如果layerDelegate实现了displayeLayer:协议，之后layer就不会再调用自身的重绘代码。

我们使用第二种方式来实现我们的圆形进度条，将代码集成到layer中，降低耦合。

我们先来创建一个CircleLayer类：

#import <QuartzCore/QuartzCore.h>

#import <CoreGraphics/CoreGraphics.h>

#import <UIKit/UIKit.h>

@interface CircleLayer :CALayer

@property(nonatomic ,assign)CGFloat progress;

@end


在.m中重载一下这两个方法：

- (void)drawInContext:(CGContextRef)ctx

{

    NSLog(@"%s",__FUNCTION__);

    

    CGContextSetLineWidth(ctx,5.f);

    CGContextSetStrokeColorWithColor(ctx, [UIColorblackColor].CGColor);

    CGContextAddArc(ctx,CGRectGetWidth(self.bounds)/2.,CGRectGetHeight(self.bounds)/2.,CGRectGetWidth(self.bounds)/2. - 6, M_PI_2 * 3,M_PI_2*3+M_PI*2*self.progress,0);

    CGContextStrokePath(ctx);

    

}



+ (BOOL)needsDisplayForKey:(NSString *)key{

   NSLog(@"__%s__ %@",__FUNCTION__,key);

    return [keyisEqualToString:@"progress"]?YES:[superneedsDisplayForKey:key];

}


稍微说明下：drawInContext 绘制一个圆圈，根据progress绘制出实际的弧度。needsDisplayForKey 自然是让progress自动调用setNeedsDisplay。

 



好的，CircleLayer实现之后，在viewcontroller里边添加：

    layer  = [[CircleLayeralloc]init];

   layer.frame =CGRectMake(50,100,100, 100);

    layer.backgroundColor = [UIColorredColor].CGColor;

    [self.view.layeraddSublayer:layer];


然后给self.view添加一个单机手势，来更改progress查看动画

UITapGestureRecognizer* tap = [[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(move:)];

    [self.viewaddGestureRecognizer:tap];

实单move ： 

- (void)move:(UIGestureRecognizer*)tap{

    

    layer.progress =1.f;

    [CATransactionbegin];

    [CATransactionsetDisableActions:YES];

    CABasicAnimation* animat = [CABasicAnimationanimationWithKeyPath:@"progress"];

    animat.duration =6.f;

    animat.fromValue = [NSNumbernumberWithFloat:[(CircleLayer*)[layerpresentationLayer]progress]];

    animat.toValue = [NSNumbernumberWithFloat:1.0f];

    animat.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    [layeraddAnimation:animatforKey:@"gogogo"];

    [CATransactioncommit];

}


好的，看下效果：

恩，不错，layer的效果实现了，现在再来创建CircleView。

#import <UIKit/UIKit.h>

#import "CircleLayer.h"

@interface CircleView :UIView

@property(nonatomic ,assign)CGFloat progress;

@end

CircleView.m中：

+(Class)layerClass{

    return [CircleLayerclass];

}


- (void)setProgress:(CGFloat)progress{

   _progress = progress;

    [self.layersetValue:@(progress)forKey:@"progress"];

    CABasicAnimation* animat = [CABasicAnimationanimationWithKeyPath:@"progress"];

    animat.duration =6.f;

    animat.fromValue = [NSNumbernumberWithFloat:[(CircleLayer*)[self.layerpresentationLayer]progress]];

    animat.toValue = [NSNumbernumberWithFloat:1.0f];

    animat.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    [self.layeraddAnimation:animatforKey:@"gogogo"];


}
说明下，layerClass一定要实现，这个关系到CircleView的layer是CircleLayer。

viewController中添加view：

    view = [[CircleViewalloc]init];

   view.frame =CGRectMake(200,100,100, 100);

    view.backgroundColor = [UIColorblueColor];

    [self.viewaddSubview:view];

    



修改move方法：

- (void)move:(UIGestureRecognizer*)tap{

    view.progress =1.f;

    layer.progress =1.f;

    [CATransactionbegin];

    [CATransactionsetDisableActions:YES];

    CABasicAnimation* animat = [CABasicAnimationanimationWithKeyPath:@"progress"];

    animat.duration =6.f;

    animat.fromValue = [NSNumbernumberWithFloat:[(CircleLayer*)[layerpresentationLayer]progress]];

    animat.toValue = [NSNumbernumberWithFloat:1.0f];

    animat.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    [layeraddAnimation:animatforKey:@"gogogo"];

    [CATransactioncommit];

}


跑起来看下效果：




好了，效果基本都实现了，但是代码有点臃肿，CABasicAnimation那块代码粘过来粘过去，实在是难看，那如果实现直接setProgress直接进行动画，而不是需要显示添加呢？
看下layer本身的属性都有个隐士动画，如果我们也能添加那不是很爽？
先看下layer的隐士动画：

修改move方法：

- (void)move:(UIGestureRecognizer*)tap{

   layer.position =CGPointMake(250,250);

}


效果：


没有给layer添加任何动画，但是改变中心点实际效果有动画效果时常0.25.

为了确认这一点，更改下animation的duration：


在viewDidLoad中加入以下代码（初始化layer的地方）：

//修改事务默认的action,延长时间观察隐士动画效果

    CABasicAnimation* animation = [CABasicAnimationanimationWithKeyPath:@"position"];

    animation.duration =5.f;

    

    NSMutableDictionary* action = [NSMutableDictionarydictionaryWithDictionary:layer.actions];

   NSLog(@"action = %@",action);

    action[@"position"] = animation;

   layer.actions = action;


效果图：





看到了action的效果，现在可以重载

- (id<CAAction>)actionForKey:(NSString *)event;

实现我们想要的效果。

    在Circlelayer中添加以下代码：

- (id<CAAction>)actionForKey:(NSString *)event{

   NSLog(@"event = %@",event);

    if (self.presentationLayer !=nil && [eventisEqualToString:@"progress"]) {

        NSLog(@"pre = %lf , lay = %lf",[[self.presentationLayervalueForKey:@"progress"]floatValue],self.progress);


        CABasicAnimation* animat = [CABasicAnimationanimationWithKeyPath:@"progress"];

        animat.duration =6.f;

        animat.fromValue = [NSNumbernumberWithFloat:[(CircleLayer*)[selfpresentationLayer]progress]];

        animat.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];

       return animat;

    }

   return [superactionForKey:event];

}


然后删除CircleView中的CABasicAnimation,viewcontroller中的CABasicAnimation


CircleView.m中

- (void)setProgress:(CGFloat)progress{

   _progress = progress;

    [self.layersetValue:@(progress)forKey:@"progress"];


}

viewcontroller.m中

- (void)viewDidLoad {

    [superviewDidLoad];

    self.view.backgroundColor = [UIColorwhiteColor];

    

     layer  = [[CircleLayeralloc]init];

   layer.frame =CGRectMake(50,100,100, 100);

    layer.backgroundColor = [UIColorredColor].CGColor;

    [self.view.layeraddSublayer:layer];

    

    

    UILabel* lb1 = [[UILabelalloc]initWithFrame:CGRectMake(CGRectGetMinX(layer.frame),CGRectGetMaxY(layer.frame) +10, CGRectGetWidth(layer.frame),30)];

    lb1.text =@"layer";

    lb1.textAlignment =NSTextAlignmentCenter;

    lb1.textColor = [UIColorblackColor];

    lb1.font = [UIFontpreferredFontForTextStyle:UIFontTextStyleBody];

    [self.viewaddSubview:lb1];

    

    view = [[CircleViewalloc]init];

   view.frame =CGRectMake(200,100,100, 100);

    view.backgroundColor = [UIColorblueColor];

    [self.viewaddSubview:view];

    

    UILabel* lb2 = [[UILabelalloc]initWithFrame:CGRectMake(CGRectGetMinX(view.frame),CGRectGetMaxY(view.frame) +10, CGRectGetWidth(view.frame),30)];

    lb2.text =@"view";

    lb2.textAlignment =NSTextAlignmentCenter;

    lb2.textColor = [UIColorblackColor];

    lb2.font = [UIFontpreferredFontForTextStyle:UIFontTextStyleBody];

    [self.viewaddSubview:lb2];

    


    UITapGestureRecognizer* tap = [[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(move:)];

    [self.viewaddGestureRecognizer:tap];

    

}



- (void)move:(UIGestureRecognizer*)tap{


    layer.progress =1.f;

    view.progress  =1.f;

}


效果图：




到这里效果代码都有了，如果想要在CircleView中自定义Circlelayer的progress动画，可以关闭隐士动画，修改如下；

- (void)setProgress:(CGFloat)progress{

   _progress = progress;

    [CATransactionbegin];

    [CATransactionsetDisableActions:YES];

    [self.layersetValue:@(progress)forKey:@"progress"];

    [CATransactioncommit];

}



效果图：

核心代码都贴出来，有疑问的可以留言，共同探讨！




花花猪
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
如何做一个CALayer-自定义属性CAAnimation动画
时光地下铁
01-18 419
如何做一个CALayer 自定义属性CAAnimation动画 最近在做CALayer自定义属性(@property修饰)动画。之前没有深究过，现在有很多有意思的发现，写出来分享给大家。 首先把Demo LNLoadingLayer分享给大家，这是一个loading动画。 在做CALayer自定义属性动画之前，要先了解一个概念，即CALayer是一个符合键值编码的容器类（Key-Value Cod...
CALayer与iOS动画 讲解及使用
zmmzxxx的博客
07-03 8431
iOS CALayer与iOS动画 讲解及使用 关于CoreAnimation 初识CALayer CALayer CAAnimation CAMediaTiming UIView与CALayer动画原理 UIView动画实现原理 展示层presentationLayer和模型层modelLayer 初探CALayer属性 CALayer的探究应用进度条 常规做法 自定义layer 扩展 1stro
Layer中自定义属性的动画
Bmmboo的专栏
02-05 966
默认情况下，CALayer 及其子类的绝大部分标准属性都可以执行动画，无论是添加一个CAAnimation 到 Layer（显式动画），亦或是为属性指定一个动作然后修改它（隐式动画）。 但有时候我们希望能同时为好几个属性添加动画，使它们看起来像是一个动画一样；或者，我们需要执行的动画不能通过使用标准 Layer 属性动画来实现。 在本文中，我们将讨论如何子类化 CALayer 并添
CALayer，动画
04-13 7703
1.CALayer是低级组件，像是铺在一个内容固定对象上的一个片，非常灵活的支持在一个对象上显示内容，可在屏幕上弯曲或扭曲内容。     在MVC设计模式中，视图是V对象，层是M对象。层封装了布局，时序，可视的属性并且提供用于显示的内容，但是显示却不是层的职责。    每个UIView都有一个根层，它控制着内容最终被显示在屏幕上的方式。    单个层可以有很多子层。子层可以在最终屏幕
为什么Lottie动画无法使用AVVideoCompositionCoreAnimationTool导出
Just a coder
07-05 905
概述 这篇文章主要想尝试解释一下“为什么Lottie动画无法使用AVVideoCompositionCoreAnimationTool导出“。有些说法是自己的理解，可能不会十分准确。如果有不正确的地方，可以一起讨论。 首先，为什么想要知道“Lottie动画无法使用AVVideoCompositionCoreAnimationTool导出”的原因呢？因为如果知道无法导出的原因，我们就可能可以通过“修改Lottie”，或者“调整AVVideoCompositionCoreAnimationTool或相关类的使用
CALayer的needsDisplayForKey方法使用说明
秋恨雪
11-09 3361
本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。今天为大家介绍的是如何在执行动画的时候，完成Core Graphics 图形的绘制工作。 主要把重心放在needsDisplayForKey 方法上面。先看看实现绘制的动画效果图。一、理论基础首先了解下layer自己的属性如何实现动画。1. layer首次加载时会调用 +(BOOL)needsDi...
自定义 Layer 属性的动画
Wally1985的专栏
05-21 559
layer属性 转自@nixzhu的GitHub主页（译者：@nixzhu），原文《Animating Custom Layer Properties》   默认情况下，CALayer 及其子类的绝大部分标准属性都可以执行动画，无论是添加一个 CAAnimation 到 Layer（显式动画），亦或是为属性指定一个动作然后修改它（隐式动画）。   但有
iOS开发中CAlayer层的属性以及自定义层的方法
01-05
CAlayer层的属性 一、position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性：position和anchorPoint @property CGPoint position; 用来设置CALayer在父层中的位置 以父层的左上角为原点(0, 0) @property ...
iOS利用CALayer实现动画加载的效果
01-20
首先来看看效果图 实现过程如下 控制器调用就一句代码: [self showLoadingInView:self....//显示动画 - (void)showLoadingInView:(UIView*)view; //隐藏动画 - (void)hideLoad; @property (nonatomic,strong) GQCirc
CALayer动画
09-08
iOS CALayer动画实现
CAlayer层的隐式动画属性
11-20
CAlayer层的隐式动画属性
CALayer Animation实践（一）：让应用灵动起来！
zhuweideng的博客
09-09 418
http://www.csdn.net/article/2015-09-07/2825633 CALayer Animation实践（一）：让应用灵动起来！ 发表于2015-09-07 14:02| 1751次阅读| 来源CSDN| 0 条评论| 作者付宇轩 移动开发iOSSwift开发经验动画CALayerUIView用户体验 摘要：CALayer动画可以
iOS 为CALayer添加可动画的属性（以二维码切换扫描区域为例）
Leo的专栏
01-15 3375
原创Blog，转载请注明出处 http://blog.csdn.net/hello_hwc?viewmode=list 我的stackoverflow我的Github https://github.com/LeoMobileDeveloper 前言：当我们去修改一个CALayer的属性的时候，通常是会自动创建渐变的动画。但是，很多时候，默认的属性并不能满足我们的要求，我们希望自定义的属
CALayer层和CAAnimation动画
jianwei_li2012的专栏
08-20 1706
每一个ViewController默认有一个UIView，可以自定义UIView加入到ViewController默认的的视图中。也可以有子视图加入到视图中。 每一个UIView视图中又有一个默认的CALayer对象，就是层的概念。当然，也可以定义自己的CALayer，加入到UIView的默认的层中 @interface GraphicsView : UIView { CALaye
iPhone/iOS Core Animation开发总结(CALayer)
热门推荐
05-02 2万+
一.重要参数 bounds,frame,position属于基本的几何定位，相互之间数值变化会相互影响 anchorPoint:单位参数(0-1)表示，变形(transform)时候的变换源点 zPosition:相当于css中z-index的概念，Apple建议不要用这个来替代CALayer层次设置。 cornerRadius:圆角 二.几何变形(Transforming a
iOS开发之让你的应用“动”起来(动画)
树上的男爵
10-22 1158
在iOS中随处都可以看到绚丽的动画效果，实现这些动画的过程并不复杂，今天将带大家一窥iOS动画全貌。在这里你可以看到iOS中如何使用图层精简非交互式绘图，如何通过核心动画创建基础动画、关键帧动画、动画组、转场动画，如何通过UIView的装饰方法对这些动画操作进行简化等。在今天的文章里您可以看到动画操作在iOS中是如何简单和高效，很多原来想做但是苦于没有思路的动画在iOS中将变得越发简单： C
CALayer绘制图片
番薯大佬的专栏
02-21 3021
CALayer渲染内容图层。与UIImageView相比，不具有事件响应功能，且UIImageView是管理内容。 注意事项：如何使用delegate对象执行代理方法进行绘制，切记需要将delegate设置为nil，否则会导致异常crash。   CALayer绘制图片与线条效果图： 代码示例：   CGPoint position = CGPointMake(160.0, 20...
核心动画——Core Animation
诠释完美
10-31 2691
一. CALayer (一). CALayer简介 在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView，其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层，在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个
CABasicAnimation - 上下滑动动画
weixin_34189116的博客
06-12 167
#import <UIKit/UIKit.h> @interface TJProgressView : UIView @property(nonatomic,assign)CGFloat progressValue; - (void)showInView:(UIView *)baseView; @end // // TJProgressView.m // Cu...
ios anchorpoint 动画
最新发布
04-29
AnchorPoint是iOS中常用的一个属性，用来指定CALayer或UIView的固定参考点，默认值为{0.5,0.5}即图层或视图的中心点。AnchorPoint的改变可以对图层或视图的位置、旋转、缩放等产生影响，是实现动画效果的重要因素之一。 在iOS动画中，AnchorPoint可以用来实现旋转、缩放、移动、路径等动画效果。例如，当我们改变图层或视图的AnchorPoint时，可以将其元素的位置改变到该点，以实现缩放效果；当我们将其AnchorPoint从中心点移动到底部时，可以实现旋转效果。我们可以通过改变AnchorPoint的位置来实现各种不同方向的动画效果，例如沿着X轴、Y轴、Z轴的旋转效果，以及图层或视图的斜着旋转等。此外，我们还可以通过制定运动路径来实现图层或视图沿特定路径移动的动画效果，这也需要借助AnchorPoint来实现。 需要注意的是，在实现使用AnchorPoint的动画效果时，我们需要考虑AnchorPoint对位置、大小以及其他样式属性的影响，并结合其他动画属性一起使用，才能实现理想的动画效果。同时，在AnchorPoint改变的过程中，我们还需要考虑到与其他样式属性相互影响的问题，以确保动画效果的准确性和美观性。总之，AnchorPoint是实现iOS动画效果的重要因素之一，需要在使用动画效果时加以考虑和运用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值