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

• 效果