【iOS】一种点击Cell的动画效果

作者: 刘大帅 | 来源:发表于2015-10-08 22:19 被阅读3114次

    参考文章

    UITableView中cell点击的绚丽动画效果


    效果展示

    AnimationCell

    源码

    AnimationCell.h和AnimationCell.m

    #import <UIKit/UIKit.h>
    
    @interface AnimationCell : UITableViewCell
    
    @property (nonatomic, strong) UILabel *m_nameLabel;
    
    - (void)showIconAnimated:(BOOL)animated;
    - (void)hideIconAnimated:(BOOL)animated;
    
    - (void)showSelectedAnimation;
    
    @end  
    
    #import "AnimationCell.h"
    
    #define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)
    
    @interface AnimationCell ()
    
    @property (nonatomic, strong) UIImageView *m_iconView;
    @property (nonatomic, strong) UIView      *m_lineView;
    @property (nonatomic, strong) UIView      *m_rectView;
    
    @end
    
    @implementation AnimationCell
    
    - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    
        self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
        
        if (self) {
            
            // 未选中时的矩形框
            self.m_rectView = [[UIView alloc]initWithFrame:CGRectMake(SCREEN_WIDTH - 60, 23, 35, 35)];
            [self addSubview:_m_rectView];
            
            _m_rectView.layer.borderWidth = 1;
            _m_rectView.layer.borderColor = [UIColor grayColor].CGColor;
            
            // 选中时的图标
            self.m_iconView = [[UIImageView alloc]initWithFrame:CGRectMake(SCREEN_WIDTH - 58, 20, 40, 40)];
            [self addSubview:_m_iconView];
            
            _m_iconView.image = [UIImage imageNamed:@"icon.png"];
            _m_iconView.alpha = 0;
            
            // 标题
            self.m_nameLabel = [[UILabel alloc]initWithFrame:CGRectMake(30, 10, 300, 60)];
            [self addSubview:_m_nameLabel];
            
            _m_nameLabel.font      = [UIFont fontWithName:@"HelveticaNeue-Thin" size:30];
            _m_nameLabel.textColor = [UIColor grayColor];
            
            // 强调标题的线条
            self.m_lineView = [[UIView alloc]initWithFrame:CGRectMake(30, 70, 0, 2)];
            [self addSubview:_m_lineView];
            
            _m_lineView.alpha           = 0;
            _m_lineView.backgroundColor = [UIColor redColor];
        }
        
        return  self;
    }
    
    - (void)showIconAnimated:(BOOL)animated {
        
        if (animated) {
            
            _m_iconView.transform = CGAffineTransformMake(2, 0, 0, 2, 0, 0);
            [UIView animateWithDuration:0.5
                                  delay:0
                 usingSpringWithDamping:1
                  initialSpringVelocity:4
                                options:UIViewAnimationOptionCurveEaseInOut
                             animations:^{
                                 _m_iconView.alpha = 1;
                                 _m_iconView.transform = CGAffineTransformMake(1, 0, 0, 1, 0, 0);
                                 
                                 _m_lineView.alpha = 1;
                                 _m_lineView.frame = CGRectMake(30, 70, 200, 2);
                                 
                                 _m_nameLabel.frame = CGRectMake(30+50, 10, 300, 60);
                                 
                                 _m_rectView.layer.borderColor = [UIColor redColor].CGColor;
                                 _m_rectView.transform         = CGAffineTransformMake(0.8, 0, 0, 0.8, 0, 0);
                                 _m_rectView.layer.cornerRadius = 4;
                                 
                             }
                             completion:^(BOOL finished) {
                                 
                             }];
            
        } else {
            
            _m_iconView.alpha = 1;
            _m_iconView.transform = CGAffineTransformMake(1, 0, 0, 1, 0, 0);
            
            _m_lineView.alpha = 1;
            _m_lineView.frame = CGRectMake(30, 70, 200, 2);
            
            _m_nameLabel.frame = CGRectMake(30+50, 10, 300, 60);
            
            _m_rectView.layer.borderColor = [UIColor redColor].CGColor;
            _m_rectView.transform         = CGAffineTransformMake(0.8, 0, 0, 0.8, 0, 0);
            _m_rectView.layer.cornerRadius = 4;
        }
    
    }
    - (void)hideIconAnimated:(BOOL)animated {
        
        if (animated) {
        
            [UIView animateWithDuration:0.5
                                  delay:0
                 usingSpringWithDamping:1
                  initialSpringVelocity:4
                                options:UIViewAnimationOptionCurveEaseInOut
                             animations:^{
                                 _m_iconView.alpha = 0;
                                 _m_iconView.transform = CGAffineTransformMake(0.5, 0, 0, 0.5, 0, 0);
                                 
                                 _m_lineView.alpha = 0;
                                 _m_lineView.frame = CGRectMake(30, 70, 0, 2);
                                 
                                 _m_nameLabel.frame = CGRectMake(30, 10, 300, 60);
                                 
                                 _m_rectView.layer.borderColor = [UIColor grayColor].CGColor;
                                 _m_rectView.transform         = CGAffineTransformMake(1, 0, 0, 1, 0, 0);
                                 _m_rectView.layer.cornerRadius = 0;
                                 
                             }
                             completion:^(BOOL finished) {
                                 
                             }];
            
        } else {
            
            _m_iconView.alpha = 0;
            _m_iconView.transform = CGAffineTransformMake(0.5, 0, 0, 0.5, 0, 0);
            
            _m_lineView.alpha = 0;
            _m_lineView.frame = CGRectMake(30, 70, 0, 2);
            
            _m_nameLabel.frame = CGRectMake(30, 10, 300, 60);
            
            _m_rectView.layer.borderColor = [UIColor grayColor].CGColor;
            _m_rectView.transform         = CGAffineTransformMake(1, 0, 0, 1, 0, 0);
            _m_rectView.layer.cornerRadius = 0;
        }
    
    }
    
    - (void)showSelectedAnimation {
    
        UIView *tmpView         = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 80)];
        tmpView.backgroundColor = [[UIColor yellowColor] colorWithAlphaComponent:0.30];
        tmpView.alpha           = 0.f;
        
        [self addSubview:tmpView];
        
        
        [UIView animateWithDuration:0.20 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
            tmpView.alpha = 0.8f;
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.20 delay:0.1 options:UIViewAnimationOptionCurveEaseOut animations:^{
                tmpView.alpha = 0.f;
            } completion:^(BOOL finished) {
                [tmpView removeFromSuperview];
            }];
        }];
    }
    
    - (void)awakeFromNib {
        // Initialization code
    }
    
    - (void)setSelected:(BOOL)selected animated:(BOOL)animated {
        [super setSelected:selected animated:animated];
    
        // Configure the view for the selected state
    }
    
    @end
    

    控制器源码

    #import "ViewController.h"
    #import "AnimationCell.h"
    
    static NSString *AnimatedCellFlag = @"AnimatedCellFlag";
    
    @interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
    
    @property (nonatomic, strong) UITableView    *m_tableView;
    @property (nonatomic, strong) NSMutableArray *m_dataArray;
    @property (nonatomic, strong) NSMutableArray *m_selectedCellArray;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
    
        // 初始化数据源
        self.m_dataArray         = [NSMutableArray array];
        self.m_selectedCellArray = [NSMutableArray array];
        
        [_m_dataArray addObject:@"NoZuoNoDie"];
        [_m_dataArray addObject:@"FrankLiu"];
        [_m_dataArray addObject:@"LifeIsCoding"];
        
        [_m_selectedCellArray addObject:@(NO)];
        [_m_selectedCellArray addObject:@(NO)];
        [_m_selectedCellArray addObject:@(NO)];
        
        // 初始化TableView
        self.m_tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain];
        [self.view addSubview:_m_tableView];
        
        _m_tableView.dataSource     = self;
        _m_tableView.delegate       = self;
        _m_tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
        [_m_tableView registerClass:[AnimationCell class] forCellReuseIdentifier:AnimatedCellFlag];
    }
    
    #pragma mark - TableView 
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    
        return _m_dataArray.count;
    }
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
        AnimationCell *cell = (AnimationCell*)[tableView dequeueReusableCellWithIdentifier:AnimatedCellFlag];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        
        cell.m_nameLabel.text = _m_dataArray[indexPath.row];
        
        if ([_m_selectedCellArray[indexPath.row] boolValue] == NO) {
            
            [cell hideIconAnimated:NO];
            
        } else {
        
            [cell showIconAnimated:NO];
        }
        
        return cell;
    }
    
    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    
        return 80;
    }
    
    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    
        AnimationCell *cell = (AnimationCell*)[tableView cellForRowAtIndexPath:indexPath];
        
        [cell showSelectedAnimation];
        
        if ([_m_selectedCellArray[indexPath.row] boolValue] == NO) {
            
            [_m_selectedCellArray replaceObjectAtIndex:indexPath.row withObject:@(YES)];
            [cell showIconAnimated:YES];
            
        } else {
            
            [_m_selectedCellArray replaceObjectAtIndex:indexPath.row withObject:@(NO)];
            [cell hideIconAnimated:YES];
        }
        
        [tableView deselectRowAtIndexPath:indexPath animated:YES];
    }
    
    
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    
    @end
    

    源码

    下载源码

    相关文章

      网友评论

      本文标题:【iOS】一种点击Cell的动画效果

      本文链接:https://www.haomeiwen.com/subject/yvencttx.html