最近无意看到某网站上举办的App设计比赛，发现几个动效感觉还不错，遂打算自己实现一番练练手。OK话不多说，上效果图：
UI加载动画
————————————
完整Demo点这里。
————————————
怎么搞？
咱们分三步走： 步子太大容易扯着蛋
1.画U
2.画I
3.将U变回一个点，作为循环动画的结束点和起始点
还记得CAShapeLayer、UIBezierPath、CAAnimation吗？这几个小玩艺要组合起来，，哼哼那还不上天？
首先我们得用UIBezierPath把U给描出来。
拆分U，根据UIBezierPath提供的几个方法，发现可以通过左右两边各一条竖线再加上底部一个半圆组成。
既然有圆，就有半径，先给一个半径r，方便后续计算用到。
继续假设整体高度h，宽度w，同样方便后续计算。上代码：
//创建贝塞尔曲线
UIBezierPath *path = [UIBezierPath bezierPath];
//左上角开始画，由于下一个动画是从U的中间向上翻出去的，所以顶部需要空出一个圆弧的高度r
[path moveToPoint:CGPointMake(0, r)];
//画左边的竖线
[path addLineToPoint:CGPointMake(0, h-r)];
/**
画底部半圆。这里说下几个参数的意思：
center:圆中心点的坐标
radius:半径
startAngle:圆弧起始角度
endAngle:圆弧结束角度（详见下方的startAngle、endAngle示意图）
clockwise:是否以顺时针方向画线
我们这里需要一个从左到右的半圆弧，所以起始角为PI，结束角为0，沿逆时针方向画。
*/
[path addArcWithCenter:CGPointMake(r, h-r) radius:r startAngle:M_PI endAngle:0 clockwise:NO];
//画右侧的竖线
[path addLineToPoint:CGPointMake(r*2, r)];
startAngle、endAngle示意图
到此，U的路径就描好了，接着把它给显示出来。
我们知道CAShapeLayer有一个path属性，可以根据这个path来显示你想要的任意图形。来看看怎么用：
//创建
CAShapeLayer *layer = [[CAShapeLayer alloc] init];
//设置位置大小
layer.bounds = self.bounds;
layer.position = CGPointMake(w * 0.5, h * 0.5);
//不需要填充色
layer.fillColor = [UIColor clearColor].CGColor;
//线条的颜色
layer.strokeColor = [UIColor colorWithRed:55/255.0 green:115/255.0 blue:252/255.0 alpha:1].CGColor;
//线宽
layer.lineWidth = 5;
//线条两头圆角
layer.lineCap = kCALineCapRound;
//线条拐弯处圆角
layer.lineJoin = kCALineJoinRound;
//将刚才描好的path赋值给它!!!
layer.path = path.CGPath;
//最后同UIView一样addSublayer:就可以了
[self.layer addSublayer:layer];
看看你显示的效果是这样吗？
第1步静态效果图
怎么让它动起来呢？？是时候祭出我们的大杀器了！我的大刀已饥渴难奈~
//创建animation对象，这里keyPath使用strokeEnd，从0到1开始动画
//对应的取值也有strokeStart，这个显示效果同它相对应，后边马上就会用到，呆会一块说。
CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
strokeEndAnimation.fromValue = @0;
strokeEndAnimation.toValue = @1;
//动画持续时间
strokeEndAnimation.duration = 1.f;
//动画显示速度由慢到快最后慢（相当于起步，给油，刹车）
strokeEndAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//最后将animation对象放到layer中就可以看到效果了
[layer addAnimation:strokeEndAnimation forKey:@"strokeEndAnimation"];
第1步动效
继续第二步，画“I”
观察Demo动效，这个I不是直接显示出来的，而是从U的中间往右侧翻一个圆弧，最后显示成I的。由此可见，没那么简单 就能找到聊得来的 那一半 嗯？
不卖关子了，直接说说我是怎么做的吧：
看I的运动轨迹，分明就是一个倒过来的U啊，只是最后只显示了一侧的竖线而已！！先把倒过来的U画出来吧，上代码：
//创建
UIBezierPath *path = [UIBezierPath bezierPath];
//起始点移动到U的底部中间（底部圆弧的中心点）
[path moveToPoint:CGPointMake(r, h-r)];
//向上画线
[path addLineToPoint:CGPointMake(r, r)];
//上半边圆弧
[path addArcWithCenter:CGPointMake(r * 2, r) radius:r startAngle:M_PI endAngle:0 clockwise:YES];
//向下画线
[path addLineToPoint:CGPointMake(r * 3, h)];
//设置layer的path（同上一步一样，再创建一个layer用于I的动画）
I_layer.path = path.CGPath;
如果一切正常，你会看到如下这张图：
第2步静态效果图
激动人心的时候来了，，怎么让它动起来呢？
还记得上边的strokeEnd吗？刚才说过对应的还有一个strokeStart。这俩简直一对活宝！
哈哈怎么说呢？就好比你右手拿着铅笔，左手拿着橡皮擦。一个在画，一个在擦。这样你就会看到有一条线在往前跑！！不明觉厉有木有？好了，说得再多也不如上代码来得直接：
//我在前边画
CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
strokeEndAnimation.fromValue = @0;
strokeEndAnimation.toValue = @1;
//你在后边擦
CABasicAnimation *strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
strokeStartAnimation.fromValue = @0;
strokeStartAnimation.toValue = @(1 - ((h-r) / ((h-r) + (M_PI * r) + (h - (r * 2)))));
//也许你想问这个toValue取值是什么鬼？为什么不直接给1？？
//你忘了我们还得留下右边的一条竖线了吗？这里计算的是右边这条竖线占整个图形长度的百分比。
//将两个animation对象合并成一个
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.animations = @[strokeEndAnimation, strokeStartAnimation];
animationGroup.duration = 0.5;
//这两行保证动画结束后，保持现状。不然又会看到那个倒过来的U啦~
animationGroup.fillMode = kCAFillModeForwards;
animationGroup.removedOnCompletion = NO;
//加到layer中去，动起来！
[I_layer addAnimation:animationGroup forKey:@"animation"];
看效果图：
第2步动效
最后，第三步我想就不用再一一说来了吧？无非就是在U这个layer现有path基础上加上一个圆弧，然后用一边画一边擦的方式将它变成一个点。（这时候toValue的取值就是1了）
同时所有图层往左移，将I所在layer的透明度变0就好了。这样就可以继续下一轮动画，形成循环播放的效果。
最后再次附上完整demo地址：HHAnimationLoadingView
网友评论