点击单个cell高度变化的动画效果

效果

说明

1. 点击单个cell的时候,其展开与缩放动画实现起来是很麻烦的,做过相关需求的朋友一定知道其中的坑

2. 本例子只是提供了一个解决方案,为了简化操作,将cell高度封装到了Model当中

源码

https://github.com/YouXianMing/TableViewTapAnimation

//
//  Model.h
//  TableViewTapAnimation
//
//  Created by YouXianMing on 15/9/18.
//  Copyright © 2015年 YouXianMing. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface Model : NSObject

@property (nonatomic) CGFloat  normalHeight;
@property (nonatomic) CGFloat  expendHeight;
@property (nonatomic) BOOL     expend;

+ (instancetype)ModelWithNormalHeight:(CGFloat)normalHeight expendHeight:(CGFloat)expendHeight expend:(BOOL)expend;

@end
//
//  Model.m
//  TableViewTapAnimation
//
//  Created by YouXianMing on 15/9/18.
//  Copyright © 2015年 YouXianMing. All rights reserved.
//

#import "Model.h"

@implementation Model

+ (instancetype)ModelWithNormalHeight:(CGFloat)normalHeight expendHeight:(CGFloat)expendHeight expend:(BOOL)expend {

    Model *model = [[Model alloc] init];

    model.normalHeight = normalHeight;
    model.expendHeight = expendHeight;
    model.expend       = expend;

    return model;
}

@end
//
//  InfoCell.h
//  TableViewTapAnimation
//
//  Created by YouXianMing on 15/9/18.
//  Copyright © 2015年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "Model.h"

@interface InfoCell : UITableViewCell

@property (nonatomic, weak) NSIndexPath  *indexPath;
@property (nonatomic, weak) UITableView  *tableView;

- (void)loadData:(id)data;

@end
//
//  InfoCell.m
//  TableViewTapAnimation
//
//  Created by YouXianMing on 15/9/18.
//  Copyright © 2015年 YouXianMing. All rights reserved.
//

#import "InfoCell.h"

@interface InfoCell ()

@property (nonatomic, strong) UIButton *button;
@property (nonatomic, weak)   Model    *model;
@property (nonatomic, strong) UIView   *lineView;
@property (nonatomic, strong) UILabel  *infoLabel;

@end

@implementation InfoCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {

    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {

        [self setup];
    }

    return self;
}

- (void)setup {

    self.selectionStyle = UITableViewCellSelectionStyleNone;

    self.button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 320, 100)];
    [self.button addTarget:self action:@selector(buttonEvent) forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:self.button];

    self.lineView                 = [[UIView alloc] initWithFrame:CGRectMake(0, 49.5, 320, 0.5f)];
    self.lineView.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:0.5f];
    [self addSubview:self.lineView];

    self.infoLabel      = [[UILabel alloc] initWithFrame:CGRectMake(10, 0, 100, 50)];
    self.infoLabel.text = @"Demo";
    [self addSubview:self.infoLabel];
}

- (void)buttonEvent {

    if (self.model.expend == YES) {

        self.model.expend = NO;
        [self.tableView beginUpdates];
        [self.tableView endUpdates];

        [self normalStateWithAnimated:YES];

    } else {

        self.model.expend = YES;
        [self.tableView beginUpdates];
        [self.tableView endUpdates];

        [self expendStateWithAnimated:YES];
    }
}

- (void)loadData:(id)data {

    self.model = data;

    if (self.model.expend == YES) {

        self.lineView.frame  = CGRectMake(0, 99.5f, 320, 0.5f);
        self.infoLabel.frame = CGRectMake(30, 0, 100, 50);

    } else {

        self.lineView.frame  = CGRectMake(0, 49.5, 320, 0.5f);
        self.infoLabel.frame = CGRectMake(10, 0, 100, 50);
    }
}

- (void)normalStateWithAnimated:(BOOL)animated {

    if (animated == YES) {

        [UIView animateWithDuration:0.35f animations:^{

            self.lineView.frame  = CGRectMake(0, 49.5, 320, 0.5f);
            self.infoLabel.frame = CGRectMake(10, 0, 100, 50);
        }];

    } else {

        self.lineView.frame  = CGRectMake(0, 49.5, 320, 0.5f);
        self.infoLabel.frame = CGRectMake(10, 0, 100, 50);
    }
}

- (void)expendStateWithAnimated:(BOOL)animated {

    if (animated == YES) {

        [UIView animateWithDuration:0.35f animations:^{

            self.lineView.frame  = CGRectMake(0, 99.5f, 320, 0.5f);
            self.infoLabel.frame = CGRectMake(30, 0, 100, 50);
        }];

    } else {

        self.lineView.frame  = CGRectMake(0, 99.5f, 320, 0.5f);
        self.infoLabel.frame = CGRectMake(30, 0, 100, 50);
    }
}

@end
//
//  ViewController.m
//  TableViewTapAnimation
//
//  Created by YouXianMing on 15/9/18.
//  Copyright © 2015年 YouXianMing. All rights reserved.
//

#import "ViewController.h"
#import "InfoCell.h"
#import "Model.h"

#define INFO_CELL @"INFO_CELL"

@interface ViewController () <UITableViewDelegate, UITableViewDataSource>

@property (nonatomic, strong) NSMutableArray *datasArray;
@property (nonatomic, strong) UITableView    *tableView;

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    self.datasArray = [NSMutableArray array];
    [self.datasArray addObject:[Model ModelWithNormalHeight:50.f expendHeight:100.f expend:NO]];
    [self.datasArray addObject:[Model ModelWithNormalHeight:50.f expendHeight:100.f expend:YES]];
    [self.datasArray addObject:[Model ModelWithNormalHeight:50.f expendHeight:100.f expend:YES]];
    [self.datasArray addObject:[Model ModelWithNormalHeight:50.f expendHeight:100.f expend:YES]];
    [self.datasArray addObject:[Model ModelWithNormalHeight:50.f expendHeight:100.f expend:YES]];
    [self.datasArray addObject:[Model ModelWithNormalHeight:50.f expendHeight:100.f expend:YES]];

    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:[InfoCell class] forCellReuseIdentifier:INFO_CELL];
    [self.view addSubview:self.tableView];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    return _datasArray.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    InfoCell *cell = [tableView dequeueReusableCellWithIdentifier:INFO_CELL];
    cell.indexPath = indexPath;
    cell.tableView = tableView;

    [cell loadData:_datasArray[indexPath.row]];

    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

    Model *model = _datasArray[indexPath.row];

    if (model.expend) {

        return model.expendHeight;

    } else {

        return model.normalHeight;
    }
}

@end

细节

时间: 2024-08-08 05:35:10

点击单个cell高度变化的动画效果的相关文章

滑动cell的时候执行动画效果

效果图: 源码: // // ViewController.m // AniTab // // Created by XianMingYou on 15/2/26. // Copyright (c) 2015年 XianMingYou. All rights reserved. // #import "ViewController.h" #import "ShowCell.h" @interface ViewController ()<UITableViewD

UICountingLabel实现数字变化的动画效果-b

在大多数金融类 app 上或者其他 app 需要数字展示的地方, 经常会有如下的动画效果: 动画效果 怎么做呢? 一.下载UICountingLabel 下载地址: https://github.com/dataxpress/UICountingLabelUICountingLabel只支持整形和浮点数样式, 像大部分金融类app里面显示的金额(带有千分位分隔符)的样式是无法显示的, 但是后面会给出解决方案, 实现这些的效果! 二.使用UICountingLabel 1. 初始化 UICount

autolayout在cell高度变化中的应用(下)

有了autolayout,我们完全可以用xib去布局cell上的子空间,不用再去写冗余的创建代码及frame模型. 自己仅仅需要做的是:拿到cell最下面固定的子控件(一直存在),在返回高度的方法中,写如下代码即可 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{    HomePageCell *cell = [tableView dequeueReus

cell 滑动实现旋转动画效果

效果图(真机效果好一点.毕竟 gif) tableView角度旋转动画.gif -(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {CATransform3D rotation; rotation = CATransform3DMakeRotation( (90.0*M_PI)/180, 0.0, 

实现程序窗口不断变化的动画图标

利用定时器和可在窗口创建完成后修改其窗口图标的SetClassLong函数,在程序中每隔一定时间就调用一次这个函数,让窗口图标循环显示预先准备好的一组图标中的下一个图标,就可实现图标不断变化的动画效果: 1.加载图标资源 在程序的资源窗口中,插入/引入新的一组图标资源 在程序的框架类CMainFrame类中添加一个成员变量,用来存放这组图标的句柄 在CMainFrame类的OnCreate函数中利用LoadIcon函数加载这组图标: int CMainFrame::OnCreate(LPCREA

万彩动画大师教程 | 实现对象从各个方向手指点击的动画效果

万彩动画大师提供四个方向的以手指点击的方式来强调的动画效果,其中有底部手指点击.左边手指点击.右边手指点击和顶部手指点击. 在[时间轴区域]中点击动画条后面的[+],会弹出一个小窗体,接着在窗体内部的[搜索框]中输入[手指点击]的首字母[szdj]并搜索,就会出现带[手指点击]字眼的动画效果,点击你想要的方向的[手指点击]的动画效果,然后点击[确定],就可以实现对象从各个方向手指点击的强调动画效果,如下图所示: 原文地址:https://www.cnblogs.com/focusky/p/102

iOS开发——仿淘宝添加到购物车的动画效果实现

这篇博文实在不知道该起什么名字才能概况我的意思...挫语文水平 类似于淘宝一样,我们在写一些购物.订餐之类的app的时候,在用户选择购买或者加入购物车时可以添加一个商品飞到购物车中的动画效果,如下图所示: 实现这个效果还是不算难的,但涉及的问题比较多,还是挺有学习价值的.主要面对的问题有以下几点 1.cell中有button,如何获得该button,即如何知道用户点击的是哪一个button. 2.坐标系的转换,这里频繁使用坐标系转换,主要原因是这里需要涉及三个视图--cell.tableView

CSS动画效果之animation

Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中,可以使用百分比,如从0%到100%的任意值,分别在每个百分比中,加上不同的属性,从而让元素达到一种在不断变化的动画效果.这和我们制作flash动画一样,我们只需设计几个关键帧,系统就能生成动画啦! 一个@keyframe例子: 1 /*定义关键帧动画*/ 2 @keyframes myframe {

万彩动画大师丨如何给图片添加上升气泡的动画效果

给图片文字添加上升气泡的动画效果,可以给观众带来一种梦幻般的视觉感受. 在[时间轴区域]中点击[+],会弹出一个小窗体,接着在窗体的[搜索框]中输入动画效果[气泡]的首字母[qp]并搜索,接着会看到有[气泡]的动画效果,选择并点击[上升气泡]的动画效果,然后点击[确定],就可以实现给图片添加气泡上升的强调动画效果,如下图所示: 原文地址:https://www.cnblogs.com/focusky/p/10213282.html