Since my other answer (animating two levels of masks) has some graphics glitches, I decided to try redrawing the path on every frame of animation. So first let's write a CALayer subclass that's like CAShapeLayer, but just draws an arrow. I originally tried making it a subclass of CAShapeLayer, but I could not get Core Animation to properly animate it.

Anyway, here's the interface we're going to implement:

@interface ArrowLayer : CALayer

@property (nonatomic) CGFloat thickness;
@property (nonatomic) CGFloat startRadians;
@property (nonatomic) CGFloat lengthRadians;
@property (nonatomic) CGFloat headLengthRadians; @property (nonatomic, strong) UIColor *fillColor;
@property (nonatomic, strong) UIColor *strokeColor;
@property (nonatomic) CGFloat lineWidth;
@property (nonatomic) CGLineJoin lineJoin; @end

The startRadians property is the position (in radians) of the end of the tail. The lengthRadians is the length (in radians) from the end of the tail to the tip of the arrowhead. The headLengthRadians is the length (in radians) of the arrowhead.

We also reproduce some of the properties of CAShapeLayer. We don't need the lineCap property because we always draw a closed path.

So, how do we implement this crazy thing? As it happens, CALayer will take care of storing any old property you want to define on a subclass. So first, we just tell the compiler not to worry about synthesizing the properties:

@implementation ArrowLayer

@dynamic thickness;
@dynamic startRadians;
@dynamic lengthRadians;
@dynamic headLengthRadians;
@dynamic fillColor;
@dynamic strokeColor;
@dynamic lineWidth;
@dynamic lineJoin;

But we need to tell Core Animation that we need to redraw the layer if any of those properties change. To do that, we need a list of the property names. We'll use the Objective-C runtime to get a list so we don't have to retype the property names. We need to #import <objc/runtime.h> at the top of the file, and then we can get the list like this:

+ (NSSet *)customPropertyKeys {
static NSMutableSet *set;
static dispatch_once_t once;
dispatch_once(&once, ^{
unsigned int count;
objc_property_t *properties = class_copyPropertyList(self, &count);
set = [[NSMutableSet alloc] initWithCapacity:count];
for (int i = 0; i < count; ++i) {
[set addObject:@(property_getName(properties[i]))];
}
free(properties);
});
return set;
}

Now we can write the method that Core Animation uses to find out which properties need to cause a redraw:

+ (BOOL)needsDisplayForKey:(NSString *)key {
return [[self customPropertyKeys] containsObject:key] || [super needsDisplayForKey:key];
}

It also turns out that Core Animation will make a copy of our layer in every frame of animation. We need to make sure we copy over all of these properties when Core Animation makes the copy:

- (id)initWithLayer:(id)layer {
if (self = [super initWithLayer:layer]) {
for (NSString *key in [self.class customPropertyKeys]) {
[self setValue:[layer valueForKey:key] forKey:key];
}
}
return self;
}

We also need to tell Core Animation that we need to redraw if the layer's bounds change:

- (BOOL)needsDisplayOnBoundsChange {
return YES;
}

Finally, we can get to the nitty-gritty of drawing the arrow. First, we'll change the graphic context's origin to be at the center of the layer's bounds. Then we'll construct the path outlining the arrow (which is now centered at the origin). Finally, we'll fill and/or stroke the path as appropriate.

- (void)drawInContext:(CGContextRef)gc {
[self moveOriginToCenterInContext:gc];
[self addArrowToPathInContext:gc];
[self drawPathOfContext:gc];
}

Moving the origin to the center of our bounds is trivial:

- (void)moveOriginToCenterInContext:(CGContextRef)gc {
CGRect bounds = self.bounds;
CGContextTranslateCTM(gc, CGRectGetMidX(bounds), CGRectGetMidY(bounds));
}

Constructing the arrow path is not trivial. First, we need to get the radial position at which the tail starts, the radial position at which the tail ends and the arrowhead starts, and the radial position of the tip of the arrowhead. We'll use a helper method to compute those three radial positions:

- (void)addArrowToPathInContext:(CGContextRef)gc {
CGFloat startRadians;
CGFloat headRadians;
CGFloat tipRadians;
[self getStartRadians:&startRadians headRadians:&headRadians tipRadians:&tipRadians];

Then we need to figure out the radius of the inside and outside arcs of the arrow, and the radius of the tip:

    CGFloat thickness = self.thickness;

    CGFloat outerRadius = self.bounds.size.width / 2;
CGFloat tipRadius = outerRadius - thickness / 2;
CGFloat innerRadius = outerRadius - thickness;

We also need to know whether we're drawing the outer arc in a clockwise or counterclockwise direction:

    BOOL outerArcIsClockwise = tipRadians > startRadians;

The inner arc will be drawn in the opposite direction.

Finally, we can construct the path. We move to the tip of the arrowhead, then add the two arcs. The CGPathAddArc call automatically adds a straight line from the path's current point to the starting point of the arc, so we don't need to add any straight lines ourselves:

    CGContextMoveToPoint(gc, tipRadius * cosf(tipRadians), tipRadius * sinf(tipRadians));
CGContextAddArc(gc, 0, 0, outerRadius, headRadians, startRadians, outerArcIsClockwise);
CGContextAddArc(gc, 0, 0, innerRadius, startRadians, headRadians, !outerArcIsClockwise);
CGContextClosePath(gc);
}

Now let's figure out how to compute those three radial positions. This would be trivial, except we want to be graceful when the head length is larger than the overall length, by clipping the head length to the overall length. We also want to let the overall length be negative to draw the arrow in the opposite direction. We'll start by picking up the start position, the overall length, and the head length. We'll use a helper that clips the head length to be no larger than the overall length:

- (void)getStartRadians:(CGFloat *)startRadiansOut headRadians:(CGFloat *)headRadiansOut tipRadians:(CGFloat *)tipRadiansOut {
*startRadiansOut = self.startRadians;
CGFloat lengthRadians = self.lengthRadians;
CGFloat headLengthRadians = [self clippedHeadLengthRadians];

Next we compute the radial position where the tail meets the arrowhead. We do so carefully, so that if we clipped the head length, we compute exactly the start position. This is important so that when we call CGPathAddArc with the two positions, it doesn't add an unexpected arc due to floating-point rounding.

    // Compute headRadians carefully so it is exactly equal to startRadians if the head length was clipped.
*headRadiansOut = *startRadiansOut + (lengthRadians - headLengthRadians);

Finally we compute the radial position of the tip of the arrowhead:

    *tipRadiansOut = *startRadiansOut + lengthRadians;
}

We need to write the helper that clips the head length. It also needs to ensure that the head length has the same sign as the overall length, so the computations above work correctly:

- (CGFloat)clippedHeadLengthRadians {
CGFloat lengthRadians = self.lengthRadians;
CGFloat headLengthRadians = copysignf(self.headLengthRadians, lengthRadians); if (fabsf(headLengthRadians) > fabsf(lengthRadians)) {
headLengthRadians = lengthRadians;
}
return headLengthRadians;
}

To draw the path in the graphics context, we need to set the filling and stroking parameters of the context based on our properties, and then call CGContextDrawPath:

- (void)drawPathOfContext:(CGContextRef)gc {
CGPathDrawingMode mode = 0;
[self setFillPropertiesOfContext:gc andUpdateMode:&mode];
[self setStrokePropertiesOfContext:gc andUpdateMode:&mode]; CGContextDrawPath(gc, mode);
}

We fill the path if we were given a fill color:

- (void)setFillPropertiesOfContext:(CGContextRef)gc andUpdateMode:(CGPathDrawingMode *)modeInOut {
UIColor *fillColor = self.fillColor;
if (fillColor) {
*modeInOut |= kCGPathFill;
CGContextSetFillColorWithColor(gc, fillColor.CGColor);
}
}

We stroke the path if we were given a stroke color and a line width:

- (void)setStrokePropertiesOfContext:(CGContextRef)gc andUpdateMode:(CGPathDrawingMode *)modeInOut {
UIColor *strokeColor = self.strokeColor;
CGFloat lineWidth = self.lineWidth;
if (strokeColor && lineWidth > 0) {
*modeInOut |= kCGPathStroke;
CGContextSetStrokeColorWithColor(gc, strokeColor.CGColor);
CGContextSetLineWidth(gc, lineWidth);
CGContextSetLineJoin(gc, self.lineJoin);
}
}

The end!

@end

So now we can go back to the view controller and use an ArrowLayer as the image view's mask:

- (void)setUpMask {
arrowLayer = [ArrowLayer layer];
arrowLayer.frame = imageView.bounds;
arrowLayer.thickness = 60;
arrowLayer.startRadians = -M_PI_2;
arrowLayer.lengthRadians = 0;
arrowLayer.headLengthRadians = M_PI_2 / 8;
arrowLayer.fillColor = [UIColor whiteColor];
imageView.layer.mask = arrowLayer;
}

And we can just animate the lengthRadians property from 0 to 2 π:

- (IBAction)goButtonWasTapped:(UIButton *)goButton {
goButton.hidden = YES;
[CATransaction begin]; {
[CATransaction setAnimationDuration:2];
[CATransaction setCompletionBlock:^{
goButton.hidden = NO;
}]; CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"lengthRadians"];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animation.autoreverses = YES;
animation.fromValue = @0.0f;
animation.toValue = @((CGFloat)(2.0f * M_PI));
[arrowLayer addAnimation:animation forKey:animation.keyPath];
} [CATransaction commit];
}

and we get a glitch-free animation:

I profiled this on my iPhone 4S running iOS 6.0.1 using the Core Animation instrument. It seems to get 40-50 frames per second. Your mileage may vary. I tried turning on the drawsAsynchronously property (new in iOS 6) but it didn't make a difference.

I've uploaded the code in this answer as a gist for easy copying.


A CALayer subclass that draws a very simple arrow

 #import <QuartzCore/QuartzCore.h>

 @interface ArrowLayer : CALayer

 @property (nonatomic) CGFloat thickness;
@property (nonatomic) CGFloat startRadians;
@property (nonatomic) CGFloat lengthRadians;
@property (nonatomic) CGFloat headLengthRadians; @property (nonatomic, strong) UIColor *fillColor;
@property (nonatomic, strong) UIColor *strokeColor;
@property (nonatomic) CGFloat lineWidth;
@property (nonatomic) CGLineJoin lineJoin; @end

ArrowLayer.m

#import "ArrowLayer.h"
#import <objc/runtime.h> @implementation ArrowLayer @dynamic thickness;
@dynamic startRadians;
@dynamic lengthRadians;
@dynamic headLengthRadians;
@dynamic fillColor;
@dynamic strokeColor;
@dynamic lineWidth;
@dynamic lineJoin; + (NSSet *)customPropertyKeys {
static NSMutableSet *set;
static dispatch_once_t once;
dispatch_once(&once, ^{
unsigned int count;
objc_property_t *properties = class_copyPropertyList(self, &count);
set = [[NSMutableSet alloc] initWithCapacity:count];
for (int i = ; i < count; ++i) {
[set addObject:@(property_getName(properties[i]))];
}
free(properties);
});
return set;
} + (BOOL)needsDisplayForKey:(NSString *)key {
return [[self customPropertyKeys] containsObject:key] || [super needsDisplayForKey:key];
} - (id)initWithLayer:(id)layer {
if (self = [super initWithLayer:layer]) {
for (NSString *key in [self.class customPropertyKeys]) {
[self setValue:[layer valueForKey:key] forKey:key];
}
}
return self;
} - (BOOL)needsDisplayOnBoundsChange {
return YES;
} - (void)drawInContext:(CGContextRef)gc {
[self moveOriginToCenterInContext:gc];
[self addArrowToPathInContext:gc];
[self drawPathOfContext:gc];
} - (void)moveOriginToCenterInContext:(CGContextRef)gc {
CGRect bounds = self.bounds;
CGContextTranslateCTM(gc, CGRectGetMidX(bounds), CGRectGetMidY(bounds));
} - (void)addArrowToPathInContext:(CGContextRef)gc {
CGFloat startRadians;
CGFloat headRadians;
CGFloat tipRadians;
[self getStartRadians:&startRadians headRadians:&headRadians tipRadians:&tipRadians]; CGFloat thickness = self.thickness; CGFloat outerRadius = self.bounds.size.width / ;
CGFloat tipRadius = outerRadius - thickness / ;
CGFloat innerRadius = outerRadius - thickness; BOOL outerArcIsClockwise = tipRadians > startRadians; CGContextMoveToPoint(gc, tipRadius * cosf(tipRadians), tipRadius * sinf(tipRadians));
CGContextAddArc(gc, , , outerRadius, headRadians, startRadians, outerArcIsClockwise);
CGContextAddArc(gc, , , innerRadius, startRadians, headRadians, !outerArcIsClockwise);
CGContextClosePath(gc);
} - (void)getStartRadians:(CGFloat *)startRadiansOut headRadians:(CGFloat *)headRadiansOut tipRadians:(CGFloat *)tipRadiansOut {
*startRadiansOut = self.startRadians;
CGFloat lengthRadians = self.lengthRadians;
CGFloat headLengthRadians = [self clippedHeadLengthRadians]; // Compute headRadians carefully so it is exactly equal to startRadians if the head length was clipped.
*headRadiansOut = *startRadiansOut + (lengthRadians - headLengthRadians); *tipRadiansOut = *startRadiansOut + lengthRadians;
} - (CGFloat)clippedHeadLengthRadians {
CGFloat lengthRadians = self.lengthRadians;
CGFloat headLengthRadians = copysignf(self.headLengthRadians, lengthRadians); if (fabsf(headLengthRadians) > fabsf(lengthRadians)) {
headLengthRadians = lengthRadians;
}
return headLengthRadians;
} - (void)drawPathOfContext:(CGContextRef)gc {
CGPathDrawingMode mode = ;
[self setFillPropertiesOfContext:gc andUpdateMode:&mode];
[self setStrokePropertiesOfContext:gc andUpdateMode:&mode]; CGContextDrawPath(gc, mode);
} - (void)setFillPropertiesOfContext:(CGContextRef)gc andUpdateMode:(CGPathDrawingMode *)modeInOut {
UIColor *fillColor = self.fillColor;
if (fillColor) {
*modeInOut |= kCGPathFill;
CGContextSetFillColorWithColor(gc, fillColor.CGColor);
}
} - (void)setStrokePropertiesOfContext:(CGContextRef)gc andUpdateMode:(CGPathDrawingMode *)modeInOut {
UIColor *strokeColor = self.strokeColor;
CGFloat lineWidth = self.lineWidth;
if (strokeColor && lineWidth > ) {
*modeInOut |= kCGPathStroke;
CGContextSetStrokeColorWithColor(gc, strokeColor.CGColor);
CGContextSetLineWidth(gc, lineWidth);
CGContextSetLineJoin(gc, self.lineJoin);
}
} @end

See http://stackoverflow.com/a/13578767/77567 for an explanation of this code.

ArrowLayer : A coustom layer animation的更多相关文章

  1. arcmap Command

    The information in this document is useful if you are trying to programmatically find a built-in com ...

  2. 【原】iOS学习44之动画

    1. 简单动画 1> UIImageView GIF 动画 GIF图的原理是:获取图片,存储在图片数组中,按照图片数组的顺序将图片以一定的速度播放 UIImageView *showGifima ...

  3. Animated progress view with CAGradientLayer(带翻译)<待更新>

    原文网址:使用CAGradientLayer的动画精度条View Modern software design is getting flatter and thinner all the time. ...

  4. Unity3D脚本中文系列教程(四)

    http://dong2008hong.blog.163.com/blog/static/4696882720140302451146/ Unity3D脚本中文系列教程(三) 送到动画事件. ◆ va ...

  5. UI进阶 动画

    前言:所谓动画,即应用界面上展示的各种过渡效果,不过其实没有动画并不影响我们产品的功能实现 一.动画 1.动画可以达到的效果 传达状态 提高用户对直接操作的感知 帮助用户可视化操作的结果 2.使用动画 ...

  6. CAShapeLayer和CAGradientLayer

    两个动画效果来了解一下CALayer的两个重要的subClass,CAGradientLayer和CAShapeLayer. 微视录制视频的时候那个进度效果和Spark相机类似,但是个人还是比较喜欢S ...

  7. Cocos2d-X使用CCAnimation创建动画

    动画在游戏中是很常见的 程序1:创建一个简单的动画 首先须要在project文件夹下的Resource文件夹中放一张有各种不同动作的图片 在程序中加入以下的代码 #include "Anim ...

  8. 关于Unity中旧版动画系统的使用

    Unity在5.X以后,有一个旧版的动画系统和新版的动画系统. 新版的动画系统是使用Unity动画编辑器来调的,调动画和控制动画 旧版的动画系统是用其他的第三方软件调好后导出到一个FBX文件里面,就是 ...

  9. [翻译] LLSimpleCamera

    LLSimpleCamera https://github.com/omergul123/LLSimpleCamera LLSimpleCamera is a library for creating ...

随机推荐

  1. spring beans

    所 有 使 用 XML 文 件 进 行 配 置 信 息 加 载 的 Spring IoC 容 器 , 包 括 BeanFactory 和ApplicationContext的所有XML相应实现,都使用 ...

  2. Spring AOP基本概念

    Spring AOP基本概念 目录 Spring AOP定义 AOP基本术语 通知类型 AOP定义 AOP基本术语 切面( Aspect ):一个能横切多个对象的模块化的关注点.对Spring AOP ...

  3. 使用VC6.0创建和运行C程序的方法

    使用VC6.0可以有快捷的方式创建C程序,对于初学者,建议按照如下方式创建.先创建一个工作区,然后创建工程,最后在工程中创建源文件文件.理解工作区.工程与文件之间的关系.

  4. Angular js 之动态传数据到下一个页面和动态通过ng-click进入不同的页面

    +关于Angular js中一些千篇一律的后台获取数据 首先在services.js里面把服务写好 然后在controller里面把数据给打印出来 (首先需要把数据注入) +关于Angular js中 ...

  5. P53 T2

    为方便储户,某银行拟开发计算机储蓄系统.储户填写的存款单或取款单由业务员输入系统,如果是存款,系统记录存款人姓名.住址.存款类型.存款日期.利率等信息,并印出存款单给储户:如果是取款,系统计算利息并印 ...

  6. EntityFrame Work:No Entity Framework provider found for the ADO.NET provider with invariant name 'System.Data.SqlClient'

    今天试着学习了Entity Frame Work遇到的问题是 The Entity Framework provider type 'System.Data.Entity.SqlServer.SqlP ...

  7. iOS开启隐藏文件以及显示文件方法

    显示:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏:defaults write com.apple.finder A ...

  8. Request和response的用法总结

    Request 个我总结:只要记住 只要是有关于客户端请求的信息,都可以藉由它来取得,例如请求标头.请求方法.请求参数.使用者IP等等信息. 3.什么情况下为响应?什么情况下为请求? 简单一句话,请求 ...

  9. Haskell Platform (windows)

    一.下载地址:https://www.haskell.org/platform/windows.html Haskell Platform 整合了 Glasgow Haskell Compiler,W ...

  10. Redis概述

    1.       Redis是使用内存存储(in-momory)的非关系型数据. 2.       Redis的数据存储选项共有5种:字符串.列表.集合.散列表.有序集合. 3.       Redi ...