1、简单使用示例
1.1 时钟
-
QClockView.h
@interface QClockView : UIView /// 创建时钟界面
+ (instancetype)q_clockViewWithFrame:(CGRect)frame; @end -
QClockView.m
#define CLOCK_WIDTH self.bounds.size.width @interface QClockView () // 表盘
@property (nonatomic, strong) UIImageView *clockView; // 指针
@property (nonatomic, strong) CALayer *secondLayer;
@property (nonatomic, strong) CALayer *minuteLayer;
@property (nonatomic, strong) CALayer *hourLayer; @end @implementation QClockView /// 创建时钟界面
+ (instancetype)q_clockViewWithFrame:(CGRect)frame { QClockView *clockView = [[self alloc] initWithFrame:frame];
return clockView;
} /// 初始化
- (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { // 添加表盘
self.clockView = [[UIImageView alloc] init];
self.clockView.image = [UIImage imageNamed:@"clock"];
[self addSubview:self.clockView]; // 添加定时器
[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES]; [self timeChange];
}
return self;
} /// 布局子控件
- (void)layoutSubviews {
[super layoutSubviews]; self.clockView.frame = self.bounds;
} // 定时器响应事件处理
- (void)timeChange { // 获取当前的系统的时间 // 获取当前日历对象
NSCalendar *calendar = [NSCalendar currentCalendar]; // 获取日期的组件：年月日小时分秒
NSDateComponents *cmp = [calendar components:NSCalendarUnitSecond |
NSCalendarUnitMinute |
NSCalendarUnitHour
fromDate:[NSDate date]]; // 获取秒
NSInteger second = cmp.second + 1; // 获取分
NSInteger minute = cmp.minute; // 获取小时
NSInteger hour = cmp.hour; // 计算秒针转多少度，一秒钟秒针转 6°
CGFloat secondA = second * 6; // 计算分针转多少度，一分钟分针转 6°
CGFloat minuteA = minute * 6; // 计算时针转多少度，一小时时针转 30°，每分钟时针转 0.5°
CGFloat hourA = hour * 30 + minute * 0.5; // 旋转秒针，使用 layer 的隐式动画属性产生动画效果
self.secondLayer.transform = CATransform3DMakeRotation(secondA / 180 * M_PI, 0, 0, 1); // 旋转分针
self.minuteLayer.transform = CATransform3DMakeRotation(minuteA / 180 * M_PI, 0, 0, 1); // 旋转小时
self.hourLayer.transform = CATransform3DMakeRotation(hourA / 180 * M_PI, 0, 0, 1);
} // 添加秒针
- (CALayer *)secondLayer { if (_secondLayer == nil) { _secondLayer = [CALayer layer];
_secondLayer.backgroundColor = [UIColor redColor].CGColor; _secondLayer.anchorPoint = CGPointMake(0.5, 1);
_secondLayer.position = CGPointMake(CLOCK_WIDTH * 0.5, CLOCK_WIDTH * 0.5);
_secondLayer.bounds = CGRectMake(0, 0, 1, CLOCK_WIDTH * 0.5 - 20); [self.clockView.layer addSublayer:_secondLayer];
}
return _secondLayer;
} // 添加分针
- (CALayer *)minuteLayer { if (_minuteLayer == nil) { _minuteLayer = [CALayer layer];
_minuteLayer.backgroundColor = [UIColor blackColor].CGColor; _minuteLayer.anchorPoint = CGPointMake(0.5, 1);
_minuteLayer.position = CGPointMake(CLOCK_WIDTH * 0.5, CLOCK_WIDTH * 0.5);
_minuteLayer.bounds = CGRectMake(0, 0, 4, CLOCK_WIDTH * 0.5 - 20);
_minuteLayer.cornerRadius = 2; [self.clockView.layer addSublayer:_minuteLayer];
}
return _minuteLayer;
} // 添加时针
- (CALayer *)hourLayer { if (_hourLayer == nil) { _hourLayer = [CALayer layer];
_hourLayer.backgroundColor = [UIColor blackColor].CGColor; _hourLayer.anchorPoint = CGPointMake(0.5, 1);
_hourLayer.position = CGPointMake(CLOCK_WIDTH * 0.5, CLOCK_WIDTH * 0.5);
_hourLayer.bounds = CGRectMake(0, 0, 4, CLOCK_WIDTH * 0.5 - 40);
_hourLayer.cornerRadius = 2; [self.clockView.layer addSublayer:_hourLayer];
}
return _hourLayer;
} @end -
ViewController.m
// 创建时钟界面
QClockView *clockView = [QClockView q_clockViewWithFrame:CGRectMake(100, 100, 200, 200)];
[self.view addSubview:clockView]; -
效果
1.2 转盘
-
QWheelButton.h
@interface QWheelButton : UIButton @end -
QWheelButton.m
@implementation QWheelButton /// 设置按钮中 imageView 的尺寸
- (CGRect)imageRectForContentRect:(CGRect)contentRect { // 计算 imageView 控件尺寸，contentRect 为按钮的尺寸
CGFloat W = 40;
CGFloat H = 46;
CGFloat X = (contentRect.size.width - W) * 0.5;
CGFloat Y = 20; return CGRectMake(X, Y, W, H);
} /// 设置按钮接收点击事件的区域
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event { CGFloat btnW = self.bounds.size.width;
CGFloat btnH = self.bounds.size.height; // 计算不接收点击事件的区域
CGFloat X = 0;
CGFloat Y = btnH / 2;
CGFloat W = btnW;
CGFloat H = Y;
CGRect rect = CGRectMake(X, Y, W, H); if (CGRectContainsPoint(rect, point)) {
return nil;
} else {
return [super hitTest:point withEvent:event];
}
} @end -
QWheelView.h
@interface QWheelView : UIView /// 创建转盘界面
+ (instancetype)q_wheelViewWithFrame:(CGRect)frame; /// 开始转动
- (void)q_startAnimating; /// 停止转动
- (void)q_stopAnimating; @end -
QWheelView.m
#import "QWheelButton.h" #define WHEEL_WIDTH self.bounds.size.width @interface QWheelView () <CAAnimationDelegate> /// 转盘控件
@property (nonatomic, strong) UIImageView *backImageView;
@property (nonatomic, strong) UIImageView *centerImagerView;
@property (nonatomic, strong) UIButton *startButton; /// 当前选中的按钮
@property (nonatomic, weak) UIButton *selectedButton; /// 显示定时器
@property (nonatomic, strong) CADisplayLink *link; @end @implementation QWheelView /// 创建转盘界面
+ (instancetype)q_wheelViewWithFrame:(CGRect)frame { QWheelView *wheelView = [[self alloc] initWithFrame:frame];
return wheelView;
} /// 开始转动
- (void)q_startAnimating { self.link.paused = NO;
} /// 停止转动
- (void)q_stopAnimating { self.link.paused = YES;
} /// 初始化转盘控件
- (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { // 添加转盘界面 self.backImageView = [[UIImageView alloc] init];
self.backImageView.image = [UIImage imageNamed:@"LuckyBaseBackground"];
[self addSubview:self.backImageView]; self.centerImagerView = [[UIImageView alloc] init];
self.centerImagerView.image = [UIImage imageNamed:@"LuckyRotateWheel"];
self.centerImagerView.userInteractionEnabled = YES;
[self addSubview:self.centerImagerView]; // 添加开始选号按钮 self.startButton = [[UIButton alloc] init];
[self.startButton setBackgroundImage:[UIImage imageNamed:@"LuckyCenterButton"] forState:UIControlStateNormal];
[self.startButton setBackgroundImage:[UIImage imageNamed:@"LuckyCenterButtonPressed"] forState:UIControlStateHighlighted];
[self.startButton addTarget:self action:@selector(startPicker:) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:self.startButton]; // 添加号码按钮 // 加载大图片
UIImage *bigImage = [UIImage imageNamed:@"LuckyAstrology"];
UIImage *selBigImage = [UIImage imageNamed:@"LuckyAstrologyPressed"]; // 获取当前使用的图片像素和点的比例
CGFloat scale = [UIScreen mainScreen].scale;
CGFloat imageW = bigImage.size.width / 12 * scale;
CGFloat imageH = bigImage.size.height * scale; for (int i = 0; i < 12; i++) { QWheelButton *button = [QWheelButton buttonWithType:UIButtonTypeCustom];
[self.centerImagerView addSubview:button]; // 设置按钮图片
CGRect clipR = CGRectMake(i * imageW, 0, imageW, imageH);
[button setImage:[self getImageWithClipRect:clipR fromImage:bigImage] forState:UIControlStateNormal];
[button setImage:[self getImageWithClipRect:clipR fromImage:selBigImage] forState:UIControlStateSelected];
[button setBackgroundImage:[UIImage imageNamed:@"LuckyRototeSelected"] forState:UIControlStateSelected]; // 监听按钮的点击
[button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside]; // 默认选中第一个
if (i == 0) {
[self buttonClick:button]; // button.backgroundColor = [UIColor blueColor];
}
}
}
return self;
} /// 布局子控件
- (void)layoutSubviews {
[super layoutSubviews]; // 转盘界面 self.backImageView.frame = CGRectMake(0, 0, WHEEL_WIDTH, WHEEL_WIDTH); self.centerImagerView.layer.position = CGPointMake(WHEEL_WIDTH * 0.5, WHEEL_WIDTH * 0.5);
self.centerImagerView.bounds = CGRectMake(0, 0, WHEEL_WIDTH, WHEEL_WIDTH); // 开始选号按钮 self.startButton.frame = CGRectMake((WHEEL_WIDTH - WHEEL_WIDTH / 3.5) / 2,
(WHEEL_WIDTH - WHEEL_WIDTH / 3.5) / 2,
WHEEL_WIDTH / 3.5,
WHEEL_WIDTH / 3.5); // 号码按钮 CGFloat btnW = 68;
CGFloat btnH = 143; for (int i = 0; i < 12; i++) { QWheelButton *button = self.centerImagerView.subviews[i]; // 按钮尺寸位置
button.bounds = CGRectMake(0, 0, btnW, btnH);
button.layer.position = CGPointMake(WHEEL_WIDTH * 0.5, WHEEL_WIDTH * 0.5);
button.layer.anchorPoint = CGPointMake(0.5, 1); // 按钮的旋转角度
CGFloat radion = (30 * i) / 180.0 * M_PI;
button.transform = CGAffineTransformMakeRotation(radion);
}
} /// 定时器触发事件处理
- (void)angleChange { // 每一次调用旋转多少 90 / 60.0
CGFloat angle = (90 / 60.0) * M_PI / 180.0; // 持续旋转，需要设置 centerImagerView 的 layer.position 值
self.centerImagerView.transform = CGAffineTransformRotate(self.centerImagerView.transform, angle);
} /// 按钮选中点击事件处理
- (void)buttonClick:(UIButton *)button { // 取消之前的按钮选择状态
self.selectedButton.selected = NO; // 设置当前点击的按钮选择状态
button.selected = YES;
self.selectedButton = button;
} /// 点击开始选号的时候
- (void)startPicker:(UIButton *)button { // 不需要定时器旋转
self.link.paused = YES; // 中间的转盘快速的旋转，并且不需要与用户交互
CABasicAnimation *anim = [CABasicAnimation animation];
anim.keyPath = @"transform.rotation";
anim.toValue = @(M_PI * 2 * 3);
anim.duration = 0.5;
anim.delegate = self;
[self.centerImagerView.layer addAnimation:anim forKey:nil]; // 根据选中的按钮获取旋转的度数，通过 transform 获取角度
CGFloat angle = atan2(self.selectedButton.transform.b, self.selectedButton.transform.a); // 点击哪个星座，就把当前星座指向中心点上面
self.centerImagerView.transform = CGAffineTransformMakeRotation(-angle);
} /// 动画协议方法
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag { dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ self.link.paused = NO;
});
} /// 懒加载定时器
- (CADisplayLink *)link { if (_link == nil) { _link = [CADisplayLink displayLinkWithTarget:self selector:@selector(angleChange)];
[_link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
}
return _link;
} /// 裁剪图片
- (UIImage *)getImageWithClipRect:(CGRect)clipR fromImage:(UIImage *)image { // 裁剪图片，裁剪区域是以像素为基准
CGImageRef cgImage = CGImageCreateWithImageInRect(image.CGImage, clipR); return [UIImage imageWithCGImage:cgImage];
} @end -
ViewController.m
// 创建转盘界面
QWheelView *wheelView = [QWheelView q_wheelViewWithFrame:CGRectMake(40, 150, 300, 300)];
[self.view addSubview:wheelView];
self.wheelView = wheelView; // 开始转动
[self.wheelView q_startAnimating]; // 停止转动
[self.wheelView q_stopAnimating]; -
效果
1.3 折叠图片
-
一张图片必须要通过两个控件展示，旋转的时候，只旋转一部分控件，通过 layer 控制图片的显示内容，可以让一张完整的图片通过两个控件显示。
@interface ViewController () // 上下两部分图片绘制控件
@property (nonatomic, strong) UIImageView *topImageView;
@property (nonatomic, strong) UIImageView *bottomImageView; // 触控控件
@property (nonatomic, strong) UIView *dragView; // 渐变图层
@property (nonatomic, strong) CAGradientLayer *gradientL; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; self.view.backgroundColor = [UIColor cyanColor]; // 添加上下两部分图片绘制控件，两个控件叠加在一起，且在位于 drawView 中间 self.bottomImageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 250, 200, 100)];
self.bottomImageView.image = [UIImage imageNamed:@"demo"];
[self.view addSubview:self.bottomImageView]; self.topImageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 250, 200, 100)];
self.topImageView.image = [UIImage imageNamed:@"demo"];
[self.view addSubview:self.topImageView]; // 设置图片显示的尺寸 self.topImageView.layer.contentsRect = CGRectMake(0, 0, 1, 0.5); // 范围 0 ~ 1
self.topImageView.layer.anchorPoint = CGPointMake(0.5, 1); self.bottomImageView.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
self.bottomImageView.layer.anchorPoint = CGPointMake(0.5, 0); // 添加渐变图层 self.gradientL = [CAGradientLayer layer];
self.gradientL.frame = self.bottomImageView.bounds;
self.gradientL.opacity = 0; // 设置透明度
self.gradientL.colors = @[(id)[UIColor clearColor].CGColor,
(id)[UIColor blackColor].CGColor]; // 设置渐变颜色
// self.gradientL.colors = @[(id)[UIColor redColor].CGColor,
// (id)[UIColor greenColor].CGColor,
// (id)[UIColor yellowColor].CGColor];
// self.gradientL.locations = @[@0.1, @0.4, @0.5]; // 设置渐变定位点
// gradientL.startPoint = CGPointMake(0, 1); // 设置渐变开始点，取值 0~1
[self.bottomImageView.layer addSublayer:self.gradientL]; // 添加触控控件 self.dragView = [[UIView alloc] initWithFrame:CGRectMake(100, 200, 200, 200)];
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[self.dragView addGestureRecognizer:pan]; // 添加手势
[self.view addSubview:self.dragView];
} // 拖动的时候旋转上部分内容
- (void)pan:(UIPanGestureRecognizer *)pan { // 获取偏移量
CGPoint transP = [pan translationInView:self.dragView]; // 旋转角度，往下逆时针旋转
CGFloat angle = -transP.y / 200.0 * M_PI; CATransform3D transfrom = CATransform3DIdentity;
transfrom.m34 = -1 / 500.0; // 增加旋转的立体感，近大远小，d：距离图层的距离
transfrom = CATransform3DRotate(transfrom, angle, 1, 0, 0);
self.topImageView.layer.transform = transfrom; // 设置阴影效果
self.gradientL.opacity = transP.y * 1 / 200.0; if (pan.state == UIGestureRecognizerStateEnded) { // 反弹 // 弹簧效果的动画，SpringWithDamping:弹性系数，越小弹簧效果越明显
[UIView animateWithDuration:0.6 delay:0 usingSpringWithDamping:0.2
initialSpringVelocity:10
options:UIViewAnimationOptionCurveEaseInOut
animations:^{ self.topImageView.layer.transform = CATransform3DIdentity; } completion:nil];
}
} @end -
效果
1.4 图片倒影
-
QRepView.h
@interface QRepView : UIView @end -
QRepView.m
@implementation QRepView // 设置控件主层的类型
+ (Class)layerClass { return [CAReplicatorLayer class];
} @end -
ViewController.m
#import "QRepView.h" @interface ViewController () @property (nonatomic, strong) QRepView *repView; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; self.view.backgroundColor = [UIColor cyanColor]; self.repView = [[QRepView alloc] initWithFrame:CGRectMake(100, 100, 150, 150)];
[self.view addSubview:self.repView]; UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.repView.bounds];
imageView.image = [UIImage imageNamed:@"demo.jpg"];
[self.repView addSubview:imageView]; // 创建复制图层
CAReplicatorLayer *repLayer = (CAReplicatorLayer *)self.repView.layer; // 设置子层数量
repLayer.instanceCount = 2; // 往下面平移旋转控件
CATransform3D translation = CATransform3DMakeTranslation(0, self.repView.bounds.size.height, 0);
CATransform3D rotateTranslation = CATransform3DRotate(translation, M_PI, 1, 0, 0);
repLayer.instanceTransform = rotateTranslation; // 设置阴影
repLayer.instanceAlphaOffset = -0.1;
repLayer.instanceRedOffset = -0.1;
repLayer.instanceGreenOffset = -0.1;
repLayer.instanceBlueOffset = -0.1;
} @end -
效果
1.5 音量振动条
-
创建音量振动条
@property (nonatomic, strong) UIView *vibrationBarView; self.vibrationBarView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
self.vibrationBarView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:self.vibrationBarView]; // 创建复制图层
CAReplicatorLayer *repLayer = [CAReplicatorLayer layer]; // 可以把图层里面所有子层复制
repLayer.frame = self.vibrationBarView.bounds;
[self.vibrationBarView.layer addSublayer:repLayer]; // 创建震动条图层
CALayer *layer = [CALayer layer];
layer.anchorPoint = CGPointMake(0.5, 1);
layer.position = CGPointMake(30, self.vibrationBarView.bounds.size.height);
layer.bounds = CGRectMake(0, 0, 30, 150);
layer.backgroundColor = [UIColor whiteColor].CGColor;
[repLayer addSublayer:layer]; // 设置缩放动画
CABasicAnimation *anim = [CABasicAnimation animation];
anim.keyPath = @"transform.scale.y";
anim.toValue = @0.1;
anim.duration = 0.5;
anim.repeatCount = MAXFLOAT;
anim.autoreverses = YES; // 设置动画反转
[layer addAnimation:anim forKey:nil]; // 设置复制层中子层
repLayer.instanceCount = 4; // 设置复制层里面有多少个子层，包括原始层
repLayer.instanceTransform = CATransform3DMakeTranslation(45, 0, 0); // 设置复制子层偏移量，不包括原始层，相对于原始层 x 偏移
repLayer.instanceDelay = 0.1; // 设置复制层动画延迟时间
repLayer.instanceColor = [UIColor greenColor].CGColor; // 设置复制子层背景色
repLayer.instanceGreenOffset = -0.3; -
效果
1.6 活动指示器
-
创建活动指示器
@property (nonatomic, strong) UIView *activityIndicatorView; self.activityIndicatorView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
self.activityIndicatorView.backgroundColor = [UIColor redColor];
[self.view addSubview:self.activityIndicatorView]; // 创建复制图层
CAReplicatorLayer *repLayer = [CAReplicatorLayer layer]; // 可以把图层里面所有子层复制
repLayer.frame = self.activityIndicatorView.bounds;
[self.activityIndicatorView.layer addSublayer:repLayer]; // 创建指示器图层
CALayer *layer = [CALayer layer];
layer.transform = CATransform3DMakeScale(0, 0, 0);
layer.position = CGPointMake(self.activityIndicatorView.bounds.size.width / 2, 20);
layer.bounds = CGRectMake(0, 0, 10, 10);
layer.backgroundColor = [UIColor greenColor].CGColor;
[repLayer addSublayer:layer]; // 设置缩放动画
CGFloat duration = 1.0;
CABasicAnimation *anim = [CABasicAnimation animation];
anim.keyPath = @"transform.scale";
anim.fromValue = @1;
anim.toValue = @0;
anim.duration = duration;
anim.repeatCount = MAXFLOAT;
[layer addAnimation:anim forKey:nil]; // 设置复制层中子层
CGFloat count = 20;
CGFloat angle = M_PI * 2 / count;
repLayer.instanceCount = count; // 设置复制层里面有多少个子层，包括原始层
repLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1); // 设置复制子层偏移量，不包括原始层，相对于原始层 x 偏移
repLayer.instanceDelay = duration / count; // 设置复制层动画延迟时间 -
效果
1.7 粒子运动效果
-
QParticleMotionView.h
@interface QParticleMotionView : UIView /// 创建粒子运动效果界面
+ (instancetype)q_particleMotionViewWithFrame:(CGRect)frame; /// 开始运动
- (void)q_startAnimating; /// 清除运动
- (void)q_clearAnimating; @end -
QParticleMotionView.m
@interface QParticleMotionView () /// 贝塞尔路径
@property (nonatomic, strong) UIBezierPath *path; /// 复制图层
@property (nonatomic, strong) CAReplicatorLayer *repLayer; /// 圆点图层
@property (nonatomic, strong) CALayer *dotLayer; /// 圆点个数
@property (nonatomic, assign) NSInteger dotCount; @end @implementation QParticleMotionView /// 创建粒子运动效果界面
+ (instancetype)q_particleMotionViewWithFrame:(CGRect)frame { QParticleMotionView *particleMotionView = [[self alloc] initWithFrame:frame];
particleMotionView.backgroundColor = [UIColor whiteColor];
return particleMotionView;
} /// 开始运动
- (void)q_startAnimating { // 创建关键帧动画
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
anim.keyPath = @"position";
anim.path = self.path.CGPath;
anim.duration = 3;
anim.repeatCount = MAXFLOAT;
[self.dotLayer addAnimation:anim forKey:@"dotAnimation"]; // 复制子层
self.repLayer.instanceCount = self.dotCount;
self.repLayer.instanceDelay = 0.2;
} /// 清除运动
- (void)q_clearAnimating { // 移除动画
[self.dotLayer removeAnimationForKey:@"dotAnimation"]; // 清空路径
self.path = nil; // 清空子层总数
self.dotCount = 0; [self setNeedsDisplay];
} /// 初始化
- (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { self.dotCount = 0; // 创建复制图层
self.repLayer = [CAReplicatorLayer layer];
self.repLayer.frame = self.bounds;
[self.layer addSublayer:self.repLayer]; // 创建圆点图层
CGFloat wh = 10;
self.dotLayer = [CALayer layer];
self.dotLayer.frame = CGRectMake(0, -1000, wh, wh);
self.dotLayer.cornerRadius = wh / 2;
self.dotLayer.backgroundColor = [UIColor blueColor].CGColor;
[self.repLayer addSublayer:self.dotLayer];
}
return self;
} /// 触摸开始
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event { // 获取触摸起始点位置
CGPoint startPoint = [touches.anyObject locationInView:self]; // 设置起点
[self.path moveToPoint:startPoint];
} /// 触摸移动
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event { // 获取触摸点位置
CGPoint touchPoint = [touches.anyObject locationInView:self]; // 添加线到某个点
[self.path addLineToPoint:touchPoint]; // 重绘
[self setNeedsDisplay]; self.dotCount ++;
} /// 绘制贝塞尔路径
- (void)drawRect:(CGRect)rect { [self.path stroke];
} /// 懒加载路径
- (UIBezierPath *)path { if (_path == nil) {
_path = [UIBezierPath bezierPath];
}
return _path;
} @end -
ViewController.m
@property (nonatomic, strong) QParticleMotionView *particleMotionView; // 创建粒子运动效果界面
CGRect frame = CGRectMake(0, 100, self.view.bounds.size.width, self.view.bounds.size.height - 100);
self.particleMotionView = [QParticleMotionView q_particleMotionViewWithFrame:frame];
[self.view addSubview:self.particleMotionView]; // 开始运动
[self.particleMotionView q_startAnimating]; // 清除运动
[self.particleMotionView q_clearAnimating]; -
效果
1.8 划定路径移动
-
DrawView.m
@interface DrawView () @property (nonatomic, strong) UIBezierPath *path; @end @implementation DrawView /// 触摸开始
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event { // 移除上一个动画
[self.subviews.firstObject.layer removeAnimationForKey:@"drawAnimation"]; // 获取触摸起始点位置
CGPoint startPoint = [touches.anyObject locationInView:self]; // 创建路径
self.path = [UIBezierPath bezierPath]; // 设置起点
[self.path moveToPoint:startPoint];
} /// 触摸移动
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event { // 获取触摸点位置
CGPoint touchPoint = [touches.anyObject locationInView:self]; [self.path addLineToPoint:touchPoint]; [self setNeedsDisplay];
} /// 触摸结束
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event { // 添加关键帧动画 CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
anim.keyPath = @"position"; // 添加动画路径
anim.path = self.path.CGPath; anim.duration = 3;
anim.repeatCount = MAXFLOAT;
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; // 给子视图添加核心动画
[self.subviews.firstObject.layer addAnimation:anim forKey:@"drawAnimation"];
} /// 触摸取消
- (void)touchesCancelled:(NSSet *)touches withEvent:(nullable UIEvent *)event {
[self touchesEnded:touches withEvent:event];
} /// 绘图
- (void)drawRect:(CGRect)rect { [self.path stroke];
} @end -
ViewController.m
DrawView *myDrawView = [[DrawView alloc] initWithFrame:self.view.bounds];
myDrawView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:myDrawView]; UIImageView *imv = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 50, 50)];
imv.image = [UIImage imageNamed:@"heart2"];
[myDrawView addSubview:imv]; -
效果
1.9 粘性效果按钮
-
QGooButton.h
@interface QGooButton : UIButton @end -
QGooButton.m
/// 最大圆心距离
#define MAX_DISTANCE 80 #define WIDTH self.bounds.size.width @interface QGooButton () /// 小圆视图
@property (nonatomic, strong) UIView *smallCircleView; /// 不规则矩形
@property (nonatomic, strong) CAShapeLayer *shapeLayer; /// 小圆原始半径
@property (nonatomic, assign) CGFloat oriSmallRadius; /// 小圆原始中心
@property (nonatomic, assign) CGPoint oriSmallCenter; @end @implementation QGooButton /// 懒加载 - (CAShapeLayer *)shapeLayer { if (_shapeLayer == nil) { // 展示不规则矩形，通过不规则矩形路径生成一个图层
_shapeLayer = [CAShapeLayer layer];
_shapeLayer.fillColor = self.backgroundColor.CGColor; [self.superview.layer insertSublayer:_shapeLayer below:self.layer];
}
return _shapeLayer;
} - (UIView *)smallCircleView { if (_smallCircleView == nil) { _smallCircleView = [[UIView alloc] init];
_smallCircleView.backgroundColor = self.backgroundColor; // 小圆添加按钮的父控件上
[self.superview insertSubview:_smallCircleView belowSubview:self];
}
return _smallCircleView;
} /// 初始化
- (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { // 记录小圆最初始半径和中心
self.oriSmallRadius = WIDTH / 2; // 设置按钮圆角
self.layer.cornerRadius = WIDTH / 2; // 设置按钮文字颜色和字体大小
[self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
self.titleLabel.font = [UIFont systemFontOfSize:18]; // 添加手势
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[self addGestureRecognizer:pan];
}
return self;
} - (void)layoutSubviews { [super layoutSubviews]; static int flag = 1; if (flag) { flag = 0; // 设置小圆位置和尺寸
self.smallCircleView.center = self.center;
self.smallCircleView.bounds = self.bounds;
self.smallCircleView.layer.cornerRadius = WIDTH / 2;
}
} /// 拖动手势事件处理
- (void)pan:(UIPanGestureRecognizer *)pan { // 获取手指偏移量
CGPoint transP = [pan translationInView:self]; // 移动控件位置
CGPoint center = self.center;
center.x += transP.x;
center.y += transP.y;
self.center = center; // 复位
[pan setTranslation:CGPointZero inView:self]; // 显示后面圆，后面圆的半径，随着两个圆心的距离不断增加而减小 // 计算圆心距离
CGFloat d = [self circleCenterDistanceWithBigCircleCenter:self.center smallCircleCenter:self.smallCircleView.center]; // 计算小圆的半径
CGFloat smallRadius = self.oriSmallRadius - d / 10; // 设置小圆的尺寸
self.smallCircleView.bounds = CGRectMake(0, 0, smallRadius * 2, smallRadius * 2);
self.smallCircleView.layer.cornerRadius = smallRadius; // 当圆心距离大于最大圆心距离
if (d > MAX_DISTANCE) { // 可以拖出来 // 隐藏小圆
self.smallCircleView.hidden = YES; // 移除不规则的矩形
[self.shapeLayer removeFromSuperlayer];
self.shapeLayer = nil; } else if (d > 0 && self.smallCircleView.hidden == NO) { // 有圆心距离，并且圆心距离不大，才需要展示 // 展示不规则矩形，通过不规则矩形路径生成一个图层 self.shapeLayer.path = [self pathWithBigCirCleView:self smallCirCleView:self.smallCircleView].CGPath;
} // 手指抬起的时候
if (pan.state == UIGestureRecognizerStateEnded) { // 当圆心距离大于最大圆心距离
if (d > MAX_DISTANCE) { // 展示 gif 动画 UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.bounds];
NSMutableArray *arrM = [NSMutableArray array];
for (int i = 1; i < 9; i++) {
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%d",i]];
[arrM addObject:image];
}
imageView.animationImages = arrM;
imageView.animationRepeatCount = 1;
imageView.animationDuration = 0.5;
[imageView startAnimating];
[self addSubview:imageView];
self.backgroundColor = [UIColor clearColor]; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.4 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self removeFromSuperview];
}); } else { // 移除不规则矩形，还原 [self.shapeLayer removeFromSuperlayer];
self.shapeLayer = nil; // 还原位置
[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.2
initialSpringVelocity:0
options:UIViewAnimationOptionCurveLinear
animations:^{ // 设置大圆中心点位置
self.center = self.smallCircleView.center; } completion:^(BOOL finished) { // 显示小圆
self.smallCircleView.hidden = NO;
}];
}
}
} /// 计算两个圆心之间的距离
- (CGFloat)circleCenterDistanceWithBigCircleCenter:(CGPoint)bigCircleCenter smallCircleCenter:(CGPoint)smallCircleCenter { CGFloat offsetX = bigCircleCenter.x - smallCircleCenter.x;
CGFloat offsetY = bigCircleCenter.y - smallCircleCenter.y; return sqrt(offsetX * offsetX + offsetY * offsetY);
} /// 描述两圆之间一条矩形路径
- (UIBezierPath *)pathWithBigCirCleView:(UIView *)bigCirCleView smallCirCleView:(UIView *)smallCirCleView { CGPoint bigCenter = bigCirCleView.center;
CGFloat x2 = bigCenter.x;
CGFloat y2 = bigCenter.y;
CGFloat r2 = bigCirCleView.bounds.size.width / 2; CGPoint smallCenter = smallCirCleView.center;
CGFloat x1 = smallCenter.x;
CGFloat y1 = smallCenter.y;
CGFloat r1 = smallCirCleView.bounds.size.width / 2; // 获取圆心距离
CGFloat d = [self circleCenterDistanceWithBigCircleCenter:bigCenter smallCircleCenter:smallCenter]; CGFloat sinθ = (x2 - x1) / d; CGFloat cosθ = (y2 - y1) / d; // 坐标系基于父控件
CGPoint pointA = CGPointMake(x1 - r1 * cosθ , y1 + r1 * sinθ);
CGPoint pointB = CGPointMake(x1 + r1 * cosθ , y1 - r1 * sinθ);
CGPoint pointC = CGPointMake(x2 + r2 * cosθ , y2 - r2 * sinθ);
CGPoint pointD = CGPointMake(x2 - r2 * cosθ , y2 + r2 * sinθ);
CGPoint pointO = CGPointMake(pointA.x + d / 2 * sinθ , pointA.y + d / 2 * cosθ);
CGPoint pointP = CGPointMake(pointB.x + d / 2 * sinθ , pointB.y + d / 2 * cosθ); UIBezierPath *path = [UIBezierPath bezierPath]; // A
[path moveToPoint:pointA]; // AB
[path addLineToPoint:pointB]; // 绘制 BC 曲线
[path addQuadCurveToPoint:pointC controlPoint:pointP]; // CD
[path addLineToPoint:pointD]; // 绘制 DA 曲线
[path addQuadCurveToPoint:pointA controlPoint:pointO]; return path;
} @end
-
ViewController.m
// 创建粘性按钮
QGooButton *gooButton = [[QGooButton alloc] initWithFrame:CGRectMake(200, 200, 50, 50)]; [gooButton setBackgroundColor:[UIColor redColor]];
[gooButton setTitle:@"10" forState:UIControlStateNormal]; [self.view addSubview:gooButton]; -
效果
1.10 启动动画
-
QWelcomeView.h
@interface QWelcomeView : UIView /// 创建欢迎视图
+ (instancetype)q_weicomeView; @end -
QWelcomeView.m
@interface QWelcomeView () @property (weak, nonatomic) IBOutlet UIImageView *backView; @property (weak, nonatomic) IBOutlet UIImageView *sloganView; @property (weak, nonatomic) IBOutlet UIImageView *iconView; @property (weak, nonatomic) IBOutlet UILabel *textView; @end @implementation QWelcomeView /// 创建欢迎视图
+ (instancetype)q_weicomeView{
return [[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self)
owner:nil
options:nil].firstObject;
} /// 初始化
- (void)awakeFromNib {
[super awakeFromNib]; self.backView.image = [UIImage imageNamed:@"ad_background"]; self.sloganView.image = [UIImage imageNamed:@"compose_slogan"];
self.iconView.image = [UIImage imageNamed:@"QianChia0123"]; self.textView.text = @"欢迎回来";
} /// 已经添加到父视图上
- (void)didMoveToSuperview { [super didMoveToSuperview]; // 设置头像圆角
self.iconView.layer.cornerRadius = 50;
self.iconView.layer.masksToBounds = YES; // 头像下移
self.iconView.transform = CGAffineTransformMakeTranslation(0, 50); dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ [UIView animateWithDuration:1.0 animations:^{ // 文字图片慢慢消失
self.sloganView.alpha = 0; } completion:^(BOOL finished) { // 显示头像
self.iconView.hidden = NO; [UIView animateWithDuration:1.0 delay:0 usingSpringWithDamping:0.3
initialSpringVelocity:0
options:UIViewAnimationOptionCurveLinear
animations:^{
// 头像往上移动的动画，弹簧效果
self.iconView.transform = CGAffineTransformIdentity; } completion:^(BOOL finished) { self.textView.alpha = 0;
self.textView.hidden = NO; // 文字慢慢显示 [UIView animateWithDuration:0.5 animations:^{ // 欢迎回来 的文字慢慢显示
self.textView.alpha = 1; } completion:^(BOOL finished) { dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)),
dispatch_get_main_queue(), ^{ // 移除
[self removeFromSuperview];
});
}];
}];
}];
});
} @end -
AppDelegate.m
#import "QWelcomeView.h" - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // 创建窗口
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIStoryboard *stroyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil];
UIViewController *vc = [stroyboard instantiateInitialViewController];
self.window.rootViewController = vc;
[self.window makeKeyAndVisible]; // 显示欢迎界面
QWelcomeView *welcomeV = [QWelcomeView q_weicomeView];
welcomeV.frame = self.window.bounds; // 注意：一定要给界面设置 Frame
[self.window addSubview:welcomeV]; return YES;
} -
效果
1.11 菜单按钮动画
-
QMenuItemModel.h
@interface QMenuItemModel : NSObject @property (nonatomic, strong) NSString *title;
@property (nonatomic, strong) UIImage *image; + (instancetype)q_menuItemWithTitle:(NSString *)title image:(UIImage *)image; @end -
QMenuItemModel.m
@implementation QMenuItemModel + (instancetype)q_menuItemWithTitle:(NSString *)title image:(UIImage *)image { QMenuItemModel *itme = [[self alloc] init]; itme.title = title;
itme.image = image; return itme;
} @end -
QMenuItemButton.h
@interface QMenuItemButton : UIButton @end -
QMenuItemButton.m
#define kImageRatio 0.8 @implementation QMenuItemButton - (void)awakeFromNib {
[super awakeFromNib]; [self setUp];
} - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) {
[self setUp];
}
return self;
} - (void)setUp { self.imageView.contentMode = UIViewContentModeCenter;
self.titleLabel.textAlignment = NSTextAlignmentCenter; [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
} /// 布局子控件
- (void)layoutSubviews {
[super layoutSubviews]; // UIImageView
CGFloat imageX = 0;
CGFloat imageY = 0;
CGFloat imageW = self.bounds.size.width;
CGFloat imageH = self.bounds.size.height * kImageRatio;
self.imageView.frame = CGRectMake(imageX, imageY, imageW, imageH); // UILabel
CGFloat labelY = imageH;
CGFloat labelH = self.bounds.size.height - labelY;
self.titleLabel.frame = CGRectMake(imageX, labelY, imageW, labelH);
} @end -
QComposeItemViewController.h
@interface QComposeItemViewController : UIViewController @end -
QComposeItemViewController.m
#import "QMenuItemModel.h"
#import "QMenuItemButton.h" @interface QComposeItemViewController () @property (nonatomic, strong) NSArray *items; @property (nonatomic, strong) NSTimer *timer; @property (nonatomic, assign) int btnIndex; @property (nonatomic, strong) NSMutableArray *itemButtons; @end @implementation QComposeItemViewController ///
- (void)viewDidLoad {
[super viewDidLoad]; // 添加所有 item 按钮
[self setUpAllBtns]; // 按钮按顺序的从下往上偏移
self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1
target:self
selector:@selector(timeChange)
userInfo:nil
repeats:YES];
} /// 添加所有 item 按钮
- (void)setUpAllBtns { int cols = 3;
int col = 0;
int row = 0;
CGFloat x = 0;
CGFloat y = 0;
CGFloat wh = 100;
CGFloat margin = ([UIScreen mainScreen].bounds.size.width - cols * wh) / (cols + 1);
CGFloat oriY = 300; for (int i = 0; i < self.items.count; i++) { UIButton *btn = [QMenuItemButton buttonWithType:UIButtonTypeCustom]; col = i % cols;
row = i / cols; x = margin + col * (margin + wh);
y = row * (margin + wh) + oriY; btn.frame = CGRectMake(x, y, wh, wh); // 设置按钮的图片和文字
QMenuItemModel *item = self.items[i]; [btn setImage:item.image forState:UIControlStateNormal];
[btn setTitle:item.title forState:UIControlStateNormal]; // 偏移到底部
btn.transform = CGAffineTransformMakeTranslation(0, self.view.bounds.size.height); [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchDown];
[btn addTarget:self action:@selector(btnClick1:) forControlEvents:UIControlEventTouchUpInside]; [self.itemButtons addObject:btn]; [self.view addSubview:btn];
}
} /// 给所有的按钮做动画
- (void)setUpAllBtnAnim { for (UIButton *btn in self.itemButtons) {
[self setUpOneBtnAnim:btn];
}
} /// 给一个按钮做动画
- (void)setUpOneBtnAnim:(UIButton *)btn { [UIView animateWithDuration:0.8 delay:0 usingSpringWithDamping:0.7
initialSpringVelocity:0
options:UIViewAnimationOptionCurveEaseIn
animations:^{
btn.transform = CGAffineTransformIdentity; } completion:nil];
} /// 定时器响应事件处理
- (void)timeChange { // 让一个按钮做动画 if (self.btnIndex == self.itemButtons.count) { // 定时器停止
[self.timer invalidate]; return;
} // 获取按钮
UIButton *btn = self.itemButtons[self.btnIndex]; [self setUpOneBtnAnim:btn]; self.btnIndex++;
} /// 按钮按下响应事件处理
- (void)btnClick:(UIButton *)btn { [UIView animateWithDuration:0.5 animations:^{ btn.transform = CGAffineTransformMakeScale(1.2, 1.2);
}];
} /// 按钮点击响应事件处理
- (void)btnClick1:(UIButton *)btn { [UIView animateWithDuration:0.5 animations:^{ btn.transform = CGAffineTransformMakeScale(2.0, 2.0);
btn.alpha = 0;
}]; NSLog(@"%s", __func__);
} /// 懒加载 - (NSArray *)items { if (_items == nil) { // 创建模型对象
QMenuItemModel *item1 = [QMenuItemModel q_menuItemWithTitle:@"点评"
image:[UIImage imageNamed:@"tabbar_compose_review"]];
QMenuItemModel *item2 = [QMenuItemModel q_menuItemWithTitle:@"更多"
image:[UIImage imageNamed:@"tabbar_compose_more"]];
QMenuItemModel *item3 = [QMenuItemModel q_menuItemWithTitle:@"拍摄"
image:[UIImage imageNamed:@"tabbar_compose_camera"]];
QMenuItemModel *item4 = [QMenuItemModel q_menuItemWithTitle:@"相册"
image:[UIImage imageNamed:@"tabbar_compose_photo"]];
QMenuItemModel *item5 = [QMenuItemModel q_menuItemWithTitle:@"文字"
image:[UIImage imageNamed:@"tabbar_compose_idea"]];
QMenuItemModel *item6 = [QMenuItemModel q_menuItemWithTitle:@"签到"
image:[UIImage imageNamed:@"tabbar_compose_review"]]; _items = @[item1, item2, item3, item4, item5, item6];
}
return _items;
} - (NSMutableArray *)itemButtons { if (_itemButtons == nil) {
_itemButtons = [NSMutableArray array];
}
return _itemButtons;
} @end -
ViewController.m
// 点击加号按钮
- (IBAction)btnClick:(id)sender { QComposeItemViewController *vc = [[QComposeItemViewController alloc] init]; [self presentViewController:vc animated:YES completion:nil];
} -
效果
1.12 引导页动画
-
ViewController.m
@interface ViewController () <UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet UIImageView *sunView;
@property (weak, nonatomic) IBOutlet UIImageView *personView; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; UIImage *bgImage = [UIImage imageNamed:@"520_userguid_bg"]; // ScrollView
UIScrollView *scorollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
scorollView.contentSize = bgImage.size;
scorollView.delegate = self;
scorollView.decelerationRate = 0.5;
[self.view insertSubview:scorollView atIndex:0]; // bg
UIImageView *bgImageView = [[UIImageView alloc] initWithImage:bgImage];
CGRect rect = bgImageView.frame;
rect.size.height = self.view.bounds.size.height;
bgImageView.frame = rect;
[scorollView addSubview:bgImageView]; // cg
UIImage *cgImage = [UIImage imageNamed:@"520_userguid_cg"];
UIImageView *cgImageView = [[UIImageView alloc] initWithImage:cgImage];
rect = cgImageView.frame;
rect.size.height = self.view.bounds.size.height;
cgImageView.frame = rect;
[bgImageView addSubview:cgImageView]; // fg
UIImage *fgImage = [UIImage imageNamed:@"520_userguid_fg"];
UIImageView *fgImageView = [[UIImageView alloc] initWithImage:fgImage];
rect = cgImageView.frame;
rect.size.height = self.view.bounds.size.height;
fgImageView.frame = rect;
[bgImageView addSubview:fgImageView]; // cloud
UIImage *cloudImage = [UIImage imageNamed:@"520_userguid_cloud"];
UIImageView *cloudImageView = [[UIImageView alloc] initWithImage:cloudImage];
[bgImageView addSubview:cloudImageView];
} // 只要一滚动就会调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { // 获取 scrollView 偏移量
CGFloat offsetX = scrollView.contentOffset.x; int intOffsetX = (int)offsetX; // 切换人物的图片
NSString *imageName = [NSString stringWithFormat:@"520_userguid_person_taitou_%d", (intOffsetX % 2 + 1)];
self.personView.image = [UIImage imageNamed:imageName]; // 旋转小太阳
self.sunView.transform = CGAffineTransformRotate(self.sunView.transform, 5 / 180.0 * M_PI);
} @end -
效果
