QQ粘性布局

按钮button

• 自定义button
• 设置圆角半径cornerRadius
• 取消高亮状态重写setHighlighted：方法

按钮移动的时候按钮可以跟着走

• 添加手势
• 获取偏移量
• 清零

大圆下面有一个小圆

• 根据大圆的拖动，小圆半径在减小
• 小圆加到view上面

插入一个view

• self.superView = insertSubview:belowSubview:self

根据两个圆的距离，改变小圆的半径

求两个圆之间的距离

• 写一个方法返回两个圆之间的距离

• sqrt(offsetXoffsetX + offsetYoffsetY)

• 注意：transform修改的是frame,它并没有修改center

• 直接修改frame,center会发生变化，UIView的center其实是它内部layer的position

  • CGPoint center = self.center;
  • center.x += transP.x
  • center.y += transP.y
  • self.center = center

缩放小圆

• 获取小圆半径(最原始的半径)
• 修改小圆的宽高(大圆的半径等于小圆最初的半径)
• 修改小圆的圆角半径

粘性计算图

• 描述路径，填充路径
• 已知
  • 小圆，大圆的center
  • x轴，y轴方向的偏移量
  • 两个圆之间的距离
• 计算角度
  • cos sin
• A B C D
• O P 控制点

描述中间的路径

• 写一个方法，根据两个圆，描述一个不规则的路径，返回一个路径
• x1 y1
• x2 y2
• d (d<=0 返回nil)
• r1 r2
• AB CD 直线
• 控制点O P
• BC DA 曲线

形状图层

• 可以根据路径，生成一个形状
• 懒加载创建CAShapeLayer
• CAShapeLayer也是CALayer的子层，不需要设置位置和尺寸
• shapeLayer.path = path.CGPath
• insertSublayer:atIndex:
• fillColor

业务逻辑处理

• 移动大于某个值的时候，shapeLayer消失，小圆消失
  • shapeLayer removeFromSuperlayer
  • 小圆隐藏的时候，不需要描述路径
  • shapeLayer不能设置隐藏，会有隐式动画
• 移动手指松开时距离小于某个值，复位操作，否则播放一个💥
  • 复位：大圆回到小圆的位置
    • self.center = self.smallC.center
    • 显示小圆 hidden = NO;
    • remove shapeLayer
  • 💥：序列帧动画
    • 创建UIImageView
    • frame 大小等于大圆大小
    • 把imageView加到大圆上面
    • animationImages
    • startAnimating
    • 回到原来的位置才💥怎么办？self.view.translatesAutoresizingMaskIntoConstrants = NO;