ios开发 方形到圆的动画_iOS高级动画：圆形树展开&收起动画

转自:标哥的技术博客，作者：黄仪标(微博)

前段时间帮某某做了一个动画效果，今天分享给大家。关于动画的基础知识，这里不会细说，如果您还没有核心动画的基础知识，请先阅读相关文章，了解核心动画如何使用，然后再继续阅读本篇文章。

本篇文章，涉及到以下知识点：如何添加缩放动画

如何添加平移动画

如何添加旋转动画

如何添加关键帧动画

如何使用组合动画

如何实现渐变图层

如何实现圆形渐变进度条

温馨提示：新手不适合阅读本篇文章哦，不过可以初步阅读了解一下！

如果没有了解过动画的基础知识，可先看看笔者之前的一些文章：

本篇文章不深入讲基础知识，只讲如何实现及实现的要点，并放出关键代码。对于伸手党，请不要私聊我要完整的源代码。如果您正好在项目中有这样的需求，可以尝试根据本篇文章讲解动手做一个！

最终效果图

无缩放动画的效果图：

从动画效果可以看出来，有平移、旋转、关键帧动画，同时还有渐变进度条充满的动画。另外还要注意移动的距离。请忽略样式丑陋的问题~

有缩放动画的效果图：

从动画效果可以看出来，个人变成了6个，且是平分的，比上面的效果图多了缩放的动画！这个缩放动画，生成GIF图的效果真丑，跟手机运行起来看到的差别比较大！

设计思路

这里是封装里了通用的组件，如果是在项目中使用，可以轻松调用且可以复用。从动画效果可以看到，这个整体是由以下几个部分组成的：

1)中间带进度图的圆形控件(这里叫叶子吧)

2)从中心圆出来到四周的N个控件，其中每个都是拥有同样的特性的

所以，我们设计成三个类，分别是：HYBCurveItemView：代表散开的每个子项控件

HYBCurveMainView：代表中间的圆形控件

HYBCurveMenuView：由前两个控件组合而形成的整体控件

设计HYBCurveItemView

假设叫叶子。那么每个叶子就有相同的特性，需要知道自己的归属：自身的大小

展示的元素

可移动到最远的哪个位置

可移动到最近的哪个位置

起始位置

最终展开后停留的位置

可设置以下几个位置属性：@property (nonatomic, assign) CGPoint startPoint;

@property (nonatomic, assign) CGPoint endPoint;

@property (nonatomic, assign) CGPoint nearPoint;

@property (nonatomic, assign) CGPoint farPoint;

这个类只需要有相关属性即可！

设计HYBCurveMainView

假设中大圆。大圆主要需要属性以下特性：自身大小

展示的元素

带有渐变圆形进度条

可执行的操作：更新进度

展开、收起叶子

对于这个大圆类，细读如何添加圆形进度条。

设计渐变进度圆环

首先，添加白色固定圆形

底部是一个白色的圆环，当白色圆环填满时，表示0%。那么白色圆环可以用什么来实现呢？其实CAShapeLayer就是非常好的，它可以添加圆形路径来实现的，记得设置填充色为透明哦，不然连中间的内容也看不见了。代码如下：self.outLayer = [CAShapeLayer layer];

CGRect rect = {kLineWidth / 2, kLineWidth / 2, frame.size.width - kLineWidth, frame.size.height - kLineWidth};

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:rect];

self.outLayer.strokeColor = [UIColor whiteColor].CGColor;

self.outLayer.lineWidth = kLineWidth;

self.outLayer.fillColor =  [UIColor clearColor].CGColor;

self.outLayer.lineCap = kCALineCapRound;

self.outLayer.path = path.CGPath;

[self.layer addSublayer:self.outLayer];

因为要设置为白色圆环，所以画笔颜色设置为白色，线宽就设置为圆环的大小。这样就可以初步形成了带有白色圆环的底色了。此时就是0%。

其次，设置可调进度的进度圆环图层

下面所创建的图层，会用于设置渐变颜色图层的mask，这样才能显示中间的内容，而不是渐变的图层。它的大小与白底圆环一样大小：self.progressLayer = [CAShapeLayer layer];

self.progressLayer.frame