CALayer 自定义属性绘制动画

创建CircleLayer继承CALayer,添加新属性angle。

@interfaceCircleLayer :CALayer
@property(nonatomic,assign)CGFloatangle;

@end

覆盖父类方法,添加新的属性动画键值,返回YES表示给定的属性发生变化时导致layer的内容重绘

+ (BOOL)needsDisplayForKey:(NSString*)key
{
   if([keyisEqualToString:@"angle"]) {
       returnYES;
    }
   return[superneedsDisplayForKey:key];

}

代码绘制部分

- (void)drawInContext:(CGContextRef)ctx
{
    CGFloat lineWidth = 3.0f;
    CGPoint centerPoint = CGPointMake(CGRectGetWidth(self.bounds)/2, CGRectGetHeight(self.bounds)/2);
   
    CGContextBeginPath(ctx);
    CGContextAddArc(ctx, centerPoint.x, centerPoint.y, CGRectGetWidth(self.bounds)/2 -lineWidth/2, 0.0f, self.angle, 0);
    CGContextEndPage(ctx);
   
    CGContextSetStrokeColorWithColor(ctx, [UIColorredColor].CGColor);
    CGContextSetLineWidth(ctx, lineWidth);
    CGContextStrokePath(ctx);

}

创建CABasicAnimation动画

CircleLayer *layer = [CircleLayer layer];

layer.frame = CGRectMake(10, 100, 40, 40);

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"angle"];

animation.fromValue = @(0.0f);

animation.toValue = @(2*M_PI);

animation.repeatCount = MAXFLOAT;

animation.duration = 3.0f;

[layer addAnimation:animation forKey:@"angle_key"];

时间: 2024-11-12 10:55:24

CALayer 自定义属性绘制动画的相关文章

CAKeyframeAnimation path 绘制动画 和 《CALayer 自定义属性绘制动画》 的比较

在<CALayer 自定义属性绘制动画>中讲解通过CALayer 自定义动画属性绘制圆,使用CABasicAnimation添加绘制动画,下面通过CGPath绘制圆使用CAKeyframeAnimation添加绘制动画 UIBezierPath *path = [UIBezierPathbezierPathWithArcCenter:CGPointMake(20, 20) radius:20 startAngle:0 endAngle:2*M_PIclockwise:0]; CAKeyfram

IOS开发——UI进阶篇(十七)CALayer,核心动画基本使用

一.CALayer简介 1.CALayer在iOS中,文本输入框.一个图标等等,这些都是UIView你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层 在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层 @property(nonatomic,readonly,retain) CALayer *layer; 当UIView需

Android中使用SurfaceView和Canvas来绘制动画

其实每个View中都有Canvas可以用来绘制动画,只需要在这个View中重载onDraw()方法就可以,但是SurfaceView类是一个专门用来制动动画的类. Canvas(中文叫做"画布")就和HTML5中的canvas标签一样可以在一定区域内自由绘制图形.Canvas+SurfaceView制作的动画与View Animation和Property Animation这类动画比起来更加适合大量的集中播放的动画,比如游戏画面.相机的图像显示等. 因为SurfaceView通常会在

iOS开发——图形编程OC篇&amp;(三)CALayer隐式动画

CALayer隐式动画 在前面几讲中已经提到,每一个UIView内部都默认关联着一个CALayer,我们可用称这个Layer为Root Layer(根层).所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画. * 当对非Root Layer的部分属性进行相应的修改时,默认会自动产生一些动画效果,这些属性称为Animatable Properties(可动画属性). * 列举几个常见的Animatable Properties: ? bounds:用于设置CALay

h5+canvas绘制动画时钟

h5+canvas绘制动画时钟 效果图,这个是截图,可以动的, 代码如下: <!DOCTYPE html><html><head><title>动画效果</title></head> <body> <canvas id="anm" width="600" height="600" style="border:1px solid gray"

SVG Drawing Animation - SVG 绘制动画

一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇文章给大家想分享一组实验 SVG 绘制动画的例子. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码

18个超有趣的SVG绘制动画赏析

SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非常新奇有趣的SVG绘制动画,这些动画大部分都是使用SVG结合一定的CSS3特性实现而成,效果让人大为震撼,一起来看看吧. 1.HTML5 SVG实现会跳舞的花朵 4种跳舞心情 这又是一款很有趣的HTML5 SVG动画,它是一朵会跳舞的花.首先,花朵和花盆均采用SVG进行绘制,虽然是简单的线条以及单纯

Layer 中自定义属性的动画

原文:http://objccn.io/issue-12-2/ 默认情况下,CALayer 及其子类的绝大部分标准属性都可以执行动画,无论是添加一个 CAAnimation 到 Layer(显式动画),亦或是为属性指定一个动作然后修改它(隐式动画). 但有时候我们希望能同时为好几个属性添加动画,使它们看起来像是一个动画一样:或者,我们需要执行的动画不能通过使用标准 Layer 属性动画来实现. 在本文中,我们将讨论如何子类化 CALayer 并添加我们自己的属性,以便比较容易地创建那些如果以其他

[iOS Animation]-CALayer 隐式动画

隐式动画 按照我的意思去做,而不是我说的. -- 埃德娜,辛普森 我们在第一部分讨论了Core Animation除了动画之外可以做到的任何事情.但是动画是Core Animation库一个非常显著的特性.这一章我们来看看它是怎么做到的.具体来说,我们先来讨论框架自动完成的隐式动画(除非你明确禁用了这个功能). 事务 Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画.动画并不需要你在Core Animation中手动打开,相反需要明确地关闭,否则他会一直存在.