转载请标明出处:
http://blog.csdn.net/hanhailong726188/article/details/47375157
本文出自:海龙的博客
一、概述
昨天实现了一个Android版本的小清新动画,可以当成进度条来用,这里补上IOS版本的
二、效果图
三、实现原理
自定义UIView,然后添加两个CALayer,通过CAShapeLayer和UIBezierPath画出两个小圆球,动起来是通过CAAnimation动画,动画包括小球的位移动画、缩放动画、透明动画组合起来的,因为涉及的东西不是很难,下面就直接贴代码了
四、代码实现
- TwoBallRotationProgressBar.h
//
// TwoBallRotationProgressBar.h
// TwoBallRotationProgressBar
//
// Created by HailongHan on 15/8/8.
// Copyright (c) 2015年 hhl. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface TwoBallRotationProgressBar : UIView
/**
* 设置小球的半径
*
* @param radius 半径
*/
- (void)setBallRadius:(CGFloat)radius;
/**
* 设置俩小球颜色
*
* @param oneColor 第一个小球颜色
* @param twoColor 第二个小球颜色
*/
- (void)setOneBallColor:(UIColor *)oneColor twoBallColor:(UIColor *)twoColor;
/**
* 动画时间
*/
- (void)setAnimatorDuration:(CGFloat)duration;
/**
* 设置小球移动的轨迹半径距离
*/
- (void)setAnimatorDistance:(CGFloat)distance;
- (void)startAnimator;
- (void)stopAnimator;
@end
2 . TwoBallRotationProgressBar.m
//
// TwoBallRotationProgressBar.m
// TwoBallRotationProgressBar
//
// Created by HailongHan on 15/8/8.
// Copyright (c) 2015年 hhl. All rights reserved.
//
#define DEFAULT_RADIUS 10
#define DEFAULT_DISTANCE 15
#define DEFAULT_DURATION 1.2
#import "TwoBallRotationProgressBar.h"
@interface TwoBallRotationProgressBar ()
@property (nonatomic,assign) CGFloat radius;
@property (nonatomic,assign) CGFloat duration;
@property (nonatomic,assign) CGFloat distance;
@property (nonatomic,strong) CAShapeLayer *oneLayer;
@property (nonatomic,strong) CAShapeLayer *twoLayer;
@property (nonatomic,assign) CGPoint centerPoint;
@end
@implementation TwoBallRotationProgressBar
-(instancetype)initWithFrame:(CGRect)frame{
if (self == [super initWithFrame:frame]) {
//TODO 初始化
self.backgroundColor = [UIColor whiteColor];
[self initProgressBar];
}
return self;
}
- (CAShapeLayer *)oneLayer{
if (!_oneLayer) {
_oneLayer = [CAShapeLayer layer];
_oneLayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
_oneLayer.fillColor = [UIColor redColor].CGColor;
_oneLayer.path = [UIBezierPath bezierPathWithArcCenter:self.centerPoint radius:self.radius startAngle:0 endAngle:M_PI*2 clockwise:YES].CGPath;
}
return _oneLayer;
}
- (CAShapeLayer *)twoLayer{
if (!_twoLayer) {
_twoLayer = [CAShapeLayer layer];
_twoLayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
_twoLayer.anchorPoint = CGPointMake(0.5, 0.5);
_twoLayer.fillColor = [UIColor greenColor].CGColor;
_twoLayer.path = [UIBezierPath bezierPathWithArcCenter:self.centerPoint radius:self.radius startAngle:0 endAngle:M_PI*2 clockwise:YES].CGPath;
}
return _twoLayer;
}
/**
* 初始化进度条
*/
- (void)initProgressBar{
self.duration = DEFAULT_DURATION;
self.radius = DEFAULT_RADIUS;
self.distance = DEFAULT_DISTANCE;
self.centerPoint = CGPointMake(self.bounds.size.width*0.5, self.bounds.size.height*0.5);
//添加两个CAShapeLayer
[self.layer addSublayer:self.oneLayer];
[self.layer addSublayer:self.twoLayer];
}
#pragma mark - 实现接口
- (void)setBallRadius:(CGFloat)radius{
self.radius = radius;
self.oneLayer.path = [UIBezierPath bezierPathWithArcCenter:self.centerPoint radius:self.radius startAngle:0 endAngle:M_PI*2 clockwise:YES].CGPath;
self.twoLayer.path = [UIBezierPath bezierPathWithArcCenter:self.centerPoint radius:self.radius startAngle:0 endAngle:M_PI*2 clockwise:YES].CGPath;
}
- (void)setOneBallColor:(UIColor *)oneColor twoBallColor:(UIColor *)twoColor{
self.oneLayer.fillColor = oneColor.CGColor;
self.twoLayer.fillColor = twoColor.CGColor;
}
- (void)setAnimatorDuration:(CGFloat)duration{
self.duration = duration;
}
- (void)setAnimatorDistance:(CGFloat)distance{
self.distance = distance;
if (distance > self.bounds.size.width*0.5) {
self.distance = self.bounds.size.width*0.5;
}
}
- (void)startAnimator{
[self startOneBallAnimator];
[self startTwoBallAnimator];
}
- (void)startOneBallAnimator{
CAKeyframeAnimation *transformAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.z"];
transformAnimation.values = @[@1,@0,@0,@0,@1];
//第一个小球位移动画
CAKeyframeAnimation *oneFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, self.centerPoint.x, self.centerPoint.y);
CGPathAddLineToPoint(path, NULL, self.centerPoint.x+self.distance, self.centerPoint.y);
CGPathAddLineToPoint(path, NULL, self.centerPoint.x, self.centerPoint.y);
CGPathAddLineToPoint(path, NULL, self.centerPoint.x-self.distance, self.centerPoint.y);
CGPathAddLineToPoint(path, NULL, self.centerPoint.x, self.centerPoint.y);
[oneFrameAnimation setPath:path];
//第一个小球缩放动画
CAKeyframeAnimation *oneScaleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
oneScaleAnimation.values = @[@1,@0.5,@0.25,@0.5,@1];
//第一个小球透明动画
CAKeyframeAnimation *oneOpacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
oneOpacityAnimation.values = @[@1,@0.5,@0.25,@0.5,@1];
//组合动画
CAAnimationGroup *oneGroup = [CAAnimationGroup animation];
[oneGroup setAnimations:@[transformAnimation,oneFrameAnimation,oneScaleAnimation,oneOpacityAnimation]];
oneGroup.duration = self.duration;
oneGroup.repeatCount = HUGE;
[self.oneLayer addAnimation:oneGroup forKey:@"oneGroup"];
}
- (void)startTwoBallAnimator{
CAKeyframeAnimation *transformAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.z"];
transformAnimation.values = @[@0,@0,@1,@0,@0];
//第二个小球位移动画
CAKeyframeAnimation *twoFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, self.centerPoint.x, self.centerPoint.y);
CGPathAddLineToPoint(path, NULL, self.centerPoint.x-self.distance, self.centerPoint.y);
CGPathAddLineToPoint(path, NULL, self.centerPoint.x, self.centerPoint.y);
CGPathAddLineToPoint(path, NULL, self.centerPoint.x+self.distance, self.centerPoint.y);
CGPathAddLineToPoint(path, NULL, self.centerPoint.x, self.centerPoint.y);
[twoFrameAnimation setPath:path];
//第二个小球缩放动画
CAKeyframeAnimation *twoScaleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
twoScaleAnimation.values = @[@0.25,@0.5,@1,@0.5,@0.25];
//第二个小球透明动画
CAKeyframeAnimation *twoOpacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
twoOpacityAnimation.values = @[@0.25,@0.5,@1,@0.5,@0.25];
//组合动画
CAAnimationGroup *twoGroup = [CAAnimationGroup animation];
[twoGroup setAnimations:@[transformAnimation,twoFrameAnimation,twoScaleAnimation,twoOpacityAnimation]];
twoGroup.duration = self.duration;
twoGroup.repeatCount = HUGE;
[self.twoLayer addAnimation:twoGroup forKey:@"twoGroup"];
}
- (void)stopAnimator{
//TODO
}
@end
五、怎样使用
像正常的UIView控件一样使用,目前只支持代码
TwoBallRotationProgressBar *progressBar = [[TwoBallRotationProgressBar alloc] initWithFrame:CGRectMake(0, 0, screen_width, screen_height/5)];
[self.view addSubview:progressBar];
[progressBar setOneBallColor:[UIColor blueColor] twoBallColor:[UIColor blackColor]];
//设置俩小球的半径6
[progressBar setBallRadius:6];
//设置动画时间1.5秒
[progressBar setAnimatorDuration:1.5];
[progressBar startAnimator];
六、源代码下载地址
以后所有涉及到的代码都会放到我的github仓库上面,有需要的可以去下载,github下载地址