参考文章
效果展示
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
