html5绘制动画思路,一款Loading动画的实现思路（一）

�前几天，朋友推荐了一款Loading动画，感觉挺有意思，动画是这样的

正好这段时间在学习动画，就试着实现了一版，

为了降低难度，我对动画做了一些简化，做完后是这样的

考虑到抛砖引玉是最好的学习方式之一，我就分几篇把自己的实现思路写出来，请大家把更好的想法砸过来吧！

这个动画乍一看很复杂，但我们相信一点：

一个复杂任务可以拆分成一组简单任务。

因此，我把这段复杂动画按时间拆分成了几个阶段，又把每个阶段拆分成了几个并行的简单动画。

怎么拆分呢，如果我们有动画的gif，我们可以用系统自带的Preview看一下，像这样

在gif中一帧一帧的看一下，心里大约就有拆分的思路了。

每个人拆分的可能都不一样，答案本来就不只一种，每个阶段我会写一篇文字�，这一篇我们一起看看第一阶段。

�第一阶段是这样的，为了方便大家观看，我放慢了动画速度

�看上去，它就是一段起点和终点不停变化的弧，于是我决定用重绘弧的方式实现。

关于绘制，我决定使用UIBezierPath，初次实现，我总是选择自己熟悉的方式。

要画弧，我们用到UIBezierPath的这个方法

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center

radius:(CGFloat)radius

startAngle:(CGFloat)startAngle

endAngle:(CGFloat)endAngle

clockwise:(BOOL)clockwise

为了后文的叙述方便，我要祭出UIBezierPath的官方文档中的这张图了，大家在后文看我手绘的丑图时，可能需要参考此图

开始了，

假设弧的起点为O(origin)，终点为D(dest)，动画中弧是逆时针转动的，那我们画弧时也采用逆时针，也就是说，我们的弧是从O点逆时针画到D点。

先看下这张图，动画开始和结束时的弧的样子(注意：结束时的弧其实是个圆，为了方便说明，我故意留了个缺口)

再回头观察动画可知，结束时，O点和D点在0(或2π)处重合，

因此，结束时可以认为弧是从2π逆时针画到0(虽然0和2π在一个点，但从0到0、从0到2π、从2π到0画弧是不一样的，推荐大家大家动手画一下)

结束时O、D我们确定了，那么开始的时候呢，我们要看下动画中O、D的运行轨迹了。

观察动画，我们可以得出O、D的运行轨迹是这样的

可以看出，O点逆时针(逆时针可以认为角度在减小，可以再参考上文中UIBezierPath的官方文档中的那张图)绕了3/4圈到2π，D点逆时针绕了1.5圈到0；

因此我们可以得出O、D的角度变化，是这样的

即O点从7/2的π减小到2π，D点从3π减小到0。

现在我们知道了O、D的起点，可以将前面图上的文字补全了

由此我们可以得出，O、D在动画阶段中的角度(图中的progress取值范围0~1)

只要我们的progress从0逐渐变到1，我们O、D就逐渐从起点运动到终点了，每次变化的时候绘制从O到D逆时针的弧，我们动画就实现了。

到了这一步，我们的动画思路已经有了，重要节点的值也知道了，剩下的就是写代码了。

写代码

我们的思路可以认为是，属性变化触发重绘，

自定义CALayer的子类，重写它的这两个方法可以实现这个思路

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

- (void)drawInContext:(CGContextRef)ctx;

Discussion

Subclasses can override this method and return YES

if the layer should be redisplayed when the value of the specified attribute changes. Animations changing the value of the attribute also trigger redisplay.

我们定义progress属性

@interface ArcToCircleLayer : CALayer

@property (nonatomic) CGFloat �progress;

@end

重写CALayer的这个方法

(下面代码中的@dynamic progress;我们在本文最后解释)

@implementation ArcToCircleLayer

@dynamic progress;

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

if ([key isEqualToString:@"progress"]) {

return YES;

}

return [super needsDisplayForKey:key];

}

这样当progress的值改变的时候，CALayer会标记自己为需要重绘，

如果我们重写了drawInContext:方法，

系统就会在适当的时候调用drawInContext:重绘Layer；

注意到我们上文引用的文档中有这句

Animations changing the value of the attribute also trigger redisplay.

因此我们可以使用CA动画来修改progress的值，就像下面这样

self.arcToCircleLayer.progress = 1; // end status

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

animation.duration = 5;

animation.fromValue = @0.0;

animation.toValue = @1.0;

[self.arcToCircleLayer addAnimation:animation forKey:nil];

这样当CA动画执行时，progress值会不断变化，从而触发drawInContext:重绘，实现动画。

(第一句代码是为了让动画结束时，停留在�动画结束时的状态。

简单的说，动画执行时改变的是presentation Layer的值，model Layer的值�不会变化，

动画结束后会显示model Layer的值，因为model Layer的值没有变化，看上去就是直接跳回了动画开始时的值，上面第一句代码的作用就是将model Layer的值修改为动画结束时的值。

这部分内容可以参考Core Animation Programming Guided的这一节)

看到CABasicAnimation，大家可能觉得有很多属性可以设置，比如，将代码修改为这样

self.arcToCircleLayer.progress = 0; // end status

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

animation.duration = 5;

animation.fromValue = @0.0;

animation.toValue = @1.0;

animation.autoreverses = YES;

[self.arcToCircleLayer addAnimation:animation forKey:nil];

如你所料，动画变成了这样

我们发现了，这种方式可以充分利用CA动画系统。

动画流程�已经明确了，接下来只要重写drawInContext: 的绘制代码就可以了。

前文已经得出了绘制思路和各节点的值，直接上代码，为表达清晰，我声明了多个局部变量，大家可以和这张图对照一下

- (void)drawInContext:(CGContextRef)ctx {

UIBezierPath *path = [UIBezierPath bezierPath];

CGFloat radius = MIN(CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds)) / 2 - kLineWidth / 2;

CGPoint center = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));

// O

CGFloat originStart = M_PI * 7 / 2;

CGFloat originEnd = M_PI * 2;

CGFloat currentOrigin = originStart - (originStart - originEnd) * self.progress;

// D

CGFloat destStart = M_PI * 3;

CGFloat destEnd = 0;

CGFloat currentDest = destStart - (destStart - destEnd) * self.progress;

[path addArcWithCenter:center radius:radius startAngle: currentOrigin endAngle:currentDest clockwise:NO];

CGContextAddPath(ctx, path.CGPath);

CGContextSetLineWidth(ctx, kLineWidth);

CGContextSetStrokeColorWithColor(ctx, [UIColor blueColor].CGColor);

CGContextStrokePath(ctx);

}

至此，第一阶段代码的主要部分就完成了，

第一阶段的完整代码大家可以参考GitHub上这个项目的OneLoadingAnimationStep1目录。

上文中的@dynamic progress;的解释

由于我对property的了解还不深，对此的解释之后会补上，

目前可参考CALayer.h的这段注释

/** Property methods. **/

/* CALayer implements the standard NSKeyValueCoding protocol for all

* Objective C properties defined by the class and its subclasses. It

* dynamically implements missing accessor methods for properties

* declared by subclasses.

*

完整代码

请参考GitHub上这个项目的OneLoadingAnimationStep1目录。

本系列的�传送门

鸣谢及推荐

相关链接