类似于新浪发微博的SheetItem动画

参考了网上几个类似做法
很简单的写了一个类似新浪一个弹出选择的sheetItem动画
下面就把这个动画的大概思路说一下

• 一.自定义一个带image，title以及标签的button

  //用到了一个缩放
  -(void)initIBeaconAnimate{
      CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
      animation.duration = 0.5;
      animation.repeatCount = 1;
      animation.autoreverses = YES;
      animation.fromValue = [NSNumber numberWithFloat:1.0];
      animation.toValue = [NSNumber numberWithFloat:1.1];
      [self.layer addAnimation:animation forKey:@"scale-layer"];
  }
  
  //button的点击事件通过block调用
  -(void)addTapClick
  {
      if (self.didSelctedItemCompleted) {
          self.didSelctedItemCompleted(self.menuItem);
      }
  }
  

• 二.定义一个可以调用的item

  //包含title，图片的名称 以及每个button的标签
  - (instancetype)initWithTitle:(NSString *)title
                       iconName:(NSString *)iconName
                          index:(NSUInteger)index;
  

• 三.绘制MenuView

1.创建button的时候的布局

这里的布局调用了一个网上的一个方法，感觉不错，嫖来用一用
- (CGRect)getFrameWithItemCount:(NSInteger)itemCount
              perRowItemCount:(NSInteger)perRowItemCount
            perColumItemCount:(NSInteger)perColumItemCount
                    itemWidth:(CGFloat)itemWidth
                   itemHeight:(NSInteger)itemHeight
                     paddingX:(CGFloat)paddingX
                     paddingY:(CGFloat)paddingY
                      atIndex:(NSInteger)index
                       onPage:(NSInteger)page
{
      //
      NSUInteger rowCount = itemCount / perRowItemCount + (itemCount % perColumItemCount > 0 ? 1 : 0);
      
      //计算每个空间的Y
      CGFloat insetY = (CGRectGetHeight(self.bounds) - (itemHeight + paddingY) * rowCount) -200;
      
      CGFloat originY = ((index / perRowItemCount) - perColumItemCount * page) * (itemHeight + paddingY) + paddingY;
      
      //计算每个控件的x
      
      CGFloat originX = (index % perRowItemCount) * (itemWidth + paddingX) + paddingX + (page * CGRectGetWidth(self.bounds));
      
      CGRect itemFrame = CGRectMake(originX, originY + insetY, itemWidth, itemHeight);
      
      return itemFrame;
}

2.显示button的时候弹性动画，（很简单）

- (void)initailzerAnimationWithToPostion:(CGRect)toRect withView:(UIView *)view beginTime:(CFTimeInterval)beginTime {
 //一个点到另一个点的动画
 [UIView animateWithDuration:1.0 delay:beginTime usingSpringWithDamping:0.6 initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
     view.frame = toRect;
 } completion:^(BOOL finished) {
     
 }];
}

3.for循环，显示和消失button（具体的代码 看demo）

总体来说把思路理清还是很简单的，没有涉及到难懂的知识点！DEMO不足之处，请多多指出！