首页 > 代码库 > UITableView中cell点击的绚丽动画效果

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(262, 23, 35, 35)];        _rectView.layer.borderWidth = 1.f;        _rectView.layer.borderColor = [UIColor grayColor].CGColor;        [self addSubview:_rectView];                // 图标        _iconView       = [[UIImageView alloc] initWithFrame:CGRectMake(260, 20, 40, 40)];        _iconView.image = [UIImage imageNamed:@"icon"];        _iconView.alpha = 0.f;        [self addSubview:_iconView];                // 文字        _name           = [[UILabel alloc] initWithFrame:CGRectMake(30, 10, 300, 60)];        _name.font      = [UIFont fontWithName:@"HelveticaNeue-Thin" size:30];        _name.textColor = [UIColor grayColor];        [self addSubview:_name];                _lineView                 = [[UIView alloc] initWithFrame:CGRectMake(30, 70, 0, 2)];        _lineView.alpha           = 0.f;        _lineView.backgroundColor = [UIColor redColor];        [self addSubview:_lineView];    }        return self;}- (void)showIconAnimated:(BOOL)animated {    if (animated) {        _iconView.transform = CGAffineTransformMake(2, 0, 0, 2, 0, 0);                [UIView animateWithDuration:0.5                              delay:0             usingSpringWithDamping:7              initialSpringVelocity:4                            options:UIViewAnimationOptionCurveEaseInOut                         animations:^{                             _iconView.alpha     = 1.f;                             _iconView.transform = CGAffineTransformMake(1, 0, 0, 1, 0, 0);                                                          _lineView.alpha     = 1.f;                             _lineView.frame     = CGRectMake(30, 70, 200, 2);                                                          _name.frame         = CGRectMake(30 + 50, 10, 300, 60);                                                          _rectView.layer.borderColor  = [UIColor redColor].CGColor;                             _rectView.transform          = CGAffineTransformMake(0.8, 0, 0, 0.8, 0, 0);                             _rectView.layer.cornerRadius = 4.f;                         }                         completion:^(BOOL finished) {                                                      }];    } else {        _iconView.transform = CGAffineTransformMake(1, 0, 0, 1, 0, 0);        _iconView.alpha     = 1.f;                _lineView.alpha     = 1.f;        _lineView.frame     = CGRectMake(30, 70, 200, 2);                _name.frame         = CGRectMake(30 + 50, 10, 300, 60);                _rectView.layer.borderColor  = [UIColor redColor].CGColor;        _rectView.transform          = CGAffineTransformMake(0.8, 0, 0, 0.8, 0, 0);        _rectView.layer.cornerRadius = 4.f;    }}- (void)hideIconAnimated:(BOOL)animated {    if (animated) {        [UIView animateWithDuration:0.5                              delay:0             usingSpringWithDamping:7              initialSpringVelocity:4                            options:UIViewAnimationOptionCurveEaseInOut                         animations:^{                             _iconView.alpha     = 0.f;                             _iconView.transform = CGAffineTransformMake(0.5, 0, 0, 0.5, 0, 0);                                                          _lineView.alpha     = 0.f;                             _lineView.frame     = CGRectMake(30, 70, 0, 2);                                                          _name.frame         = CGRectMake(30, 10, 300, 60);                                                          _rectView.layer.borderColor  = [UIColor grayColor].CGColor;                             _rectView.transform          = CGAffineTransformMake(1, 0, 0, 1, 0, 0);                             _rectView.layer.cornerRadius = 0;                         }                         completion:^(BOOL finished) {                                                      }];    } else {        _iconView.alpha     = 0.f;                _lineView.alpha     = 0.f;        _lineView.frame     = CGRectMake(30, 70, 0, 2);                _name.frame         = CGRectMake(30, 10, 300, 60);                _rectView.layer.borderColor  = [UIColor grayColor].CGColor;        _rectView.transform          = CGAffineTransformMake(1, 0, 0, 1, 0, 0);        _rectView.layer.cornerRadius = 0;    }}- (void)showSelectedAnimation {    UIView *tmpView         = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 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];        }];    }];}@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 80.f;}@end

测试图片:

技术分享

核心地方:

技术分享

技术分享

 

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