转自:标哥的技术博客,作者:黄仪标(微博)
前段时间帮某某做了一个动画效果,今天分享给大家。关于动画的基础知识,这里不会细说,如果您还没有核心动画的基础知识,请先阅读相关文章,了解核心动画如何使用,然后再继续阅读本篇文章。
本篇文章,涉及到以下知识点:如何添加缩放动画
如何添加平移动画
如何添加旋转动画
如何添加关键帧动画
如何使用组合动画
如何实现渐变图层
如何实现圆形渐变进度条
温馨提示:新手不适合阅读本篇文章哦,不过可以初步阅读了解一下!
如果没有了解过动画的基础知识,可先看看笔者之前的一些文章:
本篇文章不深入讲基础知识,只讲如何实现及实现的要点,并放出关键代码。对于伸手党,请不要私聊我要完整的源代码。如果您正好在项目中有这样的需求,可以尝试根据本篇文章讲解动手做一个!
最终效果图
无缩放动画的效果图:
从动画效果可以看出来,有平移、旋转、关键帧动画,同时还有渐变进度条充满的动画。另外还要注意移动的距离。请忽略样式丑陋的问题~
有缩放动画的效果图:
从动画效果可以看出来,个人变成了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