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

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

本人视频教程系类   iOS中CALayer的使用

效果图：

源码：

YouXianMingCell.h 与 YouXianMingCell.m

//
//  YouXianMingCell.h
//  CellAnimation
//
//  Created by YouXianMing on 14/12/27.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface YouXianMingCell : UITableViewCell

@property (nonatomic, strong) UILabel *name;

- (void)showIconAnimated:(BOOL)animated;
- (void)hideIconAnimated:(BOOL)animated;

- (void)showSelectedAnimation;

@end

//
//  YouXianMingCell.m
//  CellAnimation
//
//  Created by YouXianMing on 14/12/27.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "YouXianMingCell.h"

@interface YouXianMingCell ()

@property (nonatomic, strong) UIImageView *iconView;
@property (nonatomic, strong) UIView      *lineView;
@property (nonatomic, strong) UIView      *rectView;

@end

@implementation YouXianMingCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {

        _rectView                   = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
        _rectView.layer.borderWidth = .f;
        _rectView.layer.borderColor = [UIColor grayColor].CGColor;
        [self addSubview:_rectView];

        // 图标
        _iconView       = [[UIImageView alloc] initWithFrame:CGRectMake(, , , )];
        _iconView.image = [UIImage imageNamed:@"icon"];
        _iconView.alpha = .f;
        [self addSubview:_iconView];

        // 文字
        _name           = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];
        _name.font      = [UIFont fontWithName:@"HelveticaNeue-Thin" size:];
        _name.textColor = [UIColor grayColor];
        [self addSubview:_name];

        _lineView                 = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
        _lineView.alpha           = .f;
        _lineView.backgroundColor = [UIColor redColor];
        [self addSubview:_lineView];
    }

    return self;
}

- (void)showIconAnimated:(BOOL)animated {
    if (animated) {
        _iconView.transform = CGAffineTransformMake(, , , , , );

        [UIView animateWithDuration:0.5
                              delay:
             usingSpringWithDamping:
              initialSpringVelocity:
                            options:UIViewAnimationOptionCurveEaseInOut
                         animations:^{
                             _iconView.alpha     = .f;
                             _iconView.transform = CGAffineTransformMake(, , , , , );

                             _lineView.alpha     = .f;
                             _lineView.frame     = CGRectMake(, , , );

                             _name.frame         = CGRectMake( + , , , );

                             _rectView.layer.borderColor  = [UIColor redColor].CGColor;
                             _rectView.transform          = CGAffineTransformMake(0.8, , , 0.8, , );
                             _rectView.layer.cornerRadius = .f;
                         }
                         completion:^(BOOL finished) {

                         }];
    } else {
        _iconView.transform = CGAffineTransformMake(, , , , , );
        _iconView.alpha     = .f;

        _lineView.alpha     = .f;
        _lineView.frame     = CGRectMake(, , , );

        _name.frame         = CGRectMake( + , , , );

        _rectView.layer.borderColor  = [UIColor redColor].CGColor;
        _rectView.transform          = CGAffineTransformMake(0.8, , , 0.8, , );
        _rectView.layer.cornerRadius = .f;
    }
}

- (void)hideIconAnimated:(BOOL)animated {
    if (animated) {
        [UIView animateWithDuration:0.5
                              delay:
             usingSpringWithDamping:
              initialSpringVelocity:
                            options:UIViewAnimationOptionCurveEaseInOut
                         animations:^{
                             _iconView.alpha     = .f;
                             _iconView.transform = CGAffineTransformMake(0.5, , , 0.5, , );

                             _lineView.alpha     = .f;
                             _lineView.frame     = CGRectMake(, , , );

                             _name.frame         = CGRectMake(, , , );

                             _rectView.layer.borderColor  = [UIColor grayColor].CGColor;
                             _rectView.transform          = CGAffineTransformMake(, , , , , );
                             _rectView.layer.cornerRadius = ;
                         }
                         completion:^(BOOL finished) {

                         }];
    } else {
        _iconView.alpha     = .f;

        _lineView.alpha     = .f;
        _lineView.frame     = CGRectMake(, , , );

        _name.frame         = CGRectMake(, , , );

        _rectView.layer.borderColor  = [UIColor grayColor].CGColor;
        _rectView.transform          = CGAffineTransformMake(, , , , , );
        _rectView.layer.cornerRadius = ;
    }
}

- (void)showSelectedAnimation {
    UIView *tmpView         = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
    tmpView.backgroundColor = [[UIColor yellowColor] colorWithAlphaComponent:0.30];
    tmpView.alpha           = .f;

    [self addSubview:tmpView];

    [UIView animateWithDuration:0.20 delay: options:UIViewAnimationOptionCurveEaseIn animations:^{
        tmpView.alpha = 0.8f;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.20 delay:0.1 options:UIViewAnimationOptionCurveEaseOut animations:^{
            tmpView.alpha = .f;
        } completion:^(BOOL finished) {
            [tmpView removeFromSuperview];
        }];
    }];
}

@end

控制器源码：

//
//  ViewController.m
//  CellAnimation
//
//  Created by YouXianMing on 14/12/27.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "ViewController.h"
#import "YouXianMingCell.h"

static NSString *YouXianMingCellFlag = @"YouXianMingCell";

@interface ViewController ()<UITableViewDelegate, UITableViewDataSource>

@property (nonatomic, strong) UITableView    *tableView;

@property (nonatomic, strong) NSMutableArray *dataArray;
@property (nonatomic, strong) NSMutableArray *chooseArray;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 初始化数据源
    _dataArray   = [NSMutableArray array];
    _chooseArray = [NSMutableArray array];

    [_dataArray addObject:@"NoZuoNoDie"];
    [_dataArray addObject:@"YouXianMing"];
    [_dataArray addObject:@"LifeIsCoding"];
    [_chooseArray addObject:@(NO)];
    [_chooseArray addObject:@(NO)];
    [_chooseArray addObject:@(NO)];

    // 初始化tableView
    self.tableView                = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    self.tableView.delegate       = self;
    self.tableView.dataSource     = self;
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    [self.tableView registerClass:[YouXianMingCell class] forCellReuseIdentifier:YouXianMingCellFlag];
    [self.view addSubview:self.tableView];

}

#pragma mark - TableView相关方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return _dataArray.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    YouXianMingCell *cell = [tableView dequeueReusableCellWithIdentifier:YouXianMingCellFlag];
    cell.selectionStyle   = UITableViewCellSelectionStyleNone;

    cell.name.text = _dataArray[indexPath.row];

    if ([_chooseArray[indexPath.row] boolValue] == NO) {
        [cell hideIconAnimated:NO];
    } else {
        [cell showIconAnimated:NO];
    }

    return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    YouXianMingCell *cell = (YouXianMingCell *)[tableView cellForRowAtIndexPath:indexPath];

    [cell showSelectedAnimation];

    if ([_chooseArray[indexPath.row] boolValue] == NO) {
        [_chooseArray replaceObjectAtIndex:indexPath.row withObject:@(YES)];
        [cell showIconAnimated:YES];
    } else {
        [_chooseArray replaceObjectAtIndex:indexPath.row withObject:@(NO)];
        [cell hideIconAnimated:YES];
    }

    [tableView deselectRowAtIndexPath:indexPath animated:YES];
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return .f;
}

@end

测试图片：

核心地方：