Untitled.gif

之前項目寫了一個簡單的收藏過度動畫，一些朋友不清楚怎么實現(xiàn)的，索性寫出來，互相學習一下。

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

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

思路：

1.用UIView的transform做簡單的放大縮小；
2.在button上層，創(chuàng)建一個圓形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 {
        #//選中(只要實現(xiàn)這里就可以)
        #[[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);
            }];
        }];
    }
}