iOS button过渡动画、镂空过渡、动画封装、星星

Untitled.gif

之前项目写了一个简单的收藏过度动画，一些朋友不清楚怎么实现的，索性写出来，互相学习一下。

Github地址:https://github.com/bojy123/ByStarAnimeDemo

25B94FA4-89B6-450E-B18D-8E8455645035.png

思路：

1.用UIView的transform做简单的放大缩小；
2.在button上层，创建一个圆形view做过渡。

外层调用：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CGRect frame = self.view.bounds;
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake((frame.size.width-40)/2, (frame.size.height-40)/2, 40, 40);
    [button setImage:[UIImage imageNamed:@"fav_white_n"] forState:UIControlStateNormal];
    [button setImage:[UIImage imageNamed:@"fav_s"] forState:UIControlStateSelected];
    [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

- (void)buttonClick:(UIButton *)button {
    if (button.selected) {
        //取消
        button.selected = NO;
    } else {
        #//选中(只要实现这里就可以)
        #[[ByAnimationManager sharedManager] animationFavorites:button];
    }
}

动画管理：

@interface ByAnimationManager : NSObject
+ (ByAnimationManager *)sharedManager;
//星星过度动画，外层只需传入button
- (void)animationFavorites:(UIButton *)button;
@end

- (void)animationFavorites:(UIButton *)button{
    _statBtn = button;
    //去掉空心星星
    [button setImage:nil forState:UIControlStateNormal];
    
    if (!self.yellowView) {
        //黄色圆形底，用来做放大圆形和空心消失过度
        ByStarView *yellowView = [[ByStarView alloc] initWithFrame:CGRectMake((button.frame.size.width-20)/2, (button.frame.size.height-20)/2, 20, 20)];
        yellowView.backgroundColor = [UIColor colorWithRed:0.952941 green:0.545098 blue:0.125490 alpha:0.9];
        yellowView.layer.cornerRadius = 10;
        yellowView.layer.masksToBounds = YES;
        [button addSubview:yellowView];
        yellowView.transform = CGAffineTransformMakeScale(0.0001, 0.0001);
        self.yellowView = yellowView;
    }
    
    __weak ByAnimationManager *sself = self;
    [UIView animateWithDuration:0.25 animations:^{
        //放大黄色圆底
        sself.yellowView.transform = CGAffineTransformMakeScale(1.3, 1.3);
    } completion:^(BOOL finished) {
        
        //定时器，用drawRect逐渐镂空消失效果
        _timeCount = 0;
        [sself stopTimer];
        sself.timer = [NSTimer scheduledTimerWithTimeInterval:0.015 target:self selector:@selector(timeClick) userInfo:nil repeats:YES];
    }];
}

- (void)timeClick {
    //刷新黄色圆形镂空效果
    _yellowView.width = _timeCount;
    [_yellowView setNeedsDisplay];
    _timeCount ++;
    
    __weak ByAnimationManager *sself = self;

    //到达指定大小，设置实心星星选中效果
    if (_timeCount == 21) {
        [self stopTimer];
        
        //重置空心星星
        [self.statBtn setImage:[UIImage imageNamed:@"fav_white_n"] forState:UIControlStateNormal];
        self.statBtn.selected = YES;
        self.statBtn.transform = CGAffineTransformMakeScale(0.0001, 0.0001);
        
        //销毁黄色圆形视图
        [self.yellowView removeFromSuperview];
        self.yellowView = nil;
        
        //放大缩小效果
        [UIView animateWithDuration:0.25 animations:^{
            sself.statBtn.transform = CGAffineTransformMakeScale(1.5, 1.5);
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.25 animations:^{
                sself.statBtn.transform = CGAffineTransformMakeScale(1.0, 1.0);
            }];
        }];
    }
}