滑动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 ()<UITableViewDataSource, UITableViewDelegate>

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

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 初始化数据源
    self.dataSource = [NSMutableArray new];
    for (int i = 0; i < 40; i++) {
        [self.dataSource addObject:[NSString stringWithFormat:@"%02d YouXianMing", i]];
    }

    // 初始化tableView
    self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds
                                                  style:UITableViewStylePlain];
    [self.view addSubview:self.tableView];
    self.tableView.delegate   = self;
    self.tableView.dataSource = self;
    [self.tableView registerClass:[ShowCell class]
           forCellReuseIdentifier:@"ShowCell"];
}

#pragma mark - tableView代理
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.dataSource.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    ShowCell *cell = [tableView dequeueReusableCellWithIdentifier:@"ShowCell"];
    [cell accessData:self.dataSource[indexPath.row]];

    return cell;
}

#pragma mark cell显示的时候
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    ShowCell *showCell = (ShowCell *)cell;
    [showCell show];
}

#pragma mark cell消失的时候
- (void)tableView:(UITableView *)tableView didEndDisplayingCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath*)indexPath {
    ShowCell *showCell = (ShowCell *)cell;
    [showCell hide];
}

#pragma mark cell高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 100;
}

@end

cell源码:

//
//  ShowCell.h
//  AniTab
//
//  Created by XianMingYou on 15/2/26.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ShowCell : UITableViewCell

/**
 *  动画显示
 */
- (void)show;

/**
 *  动画隐藏
 */
- (void)hide;

/**
 *  处理数据
 *
 *  @param data 数据源
 */
- (void)accessData:(id)data;

@end
//
//  ShowCell.m
//  AniTab
//
//  Created by XianMingYou on 15/2/26.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import "ShowCell.h"

@interface ShowCellStoreValue : NSObject
@property (nonatomic) CGRect startRect;
@property (nonatomic) CGRect endRect;
@end
@implementation ShowCellStoreValue
@end

@interface ShowCell ()

@property (nonatomic, strong) UILabel            *label;
@property (nonatomic, strong) ShowCellStoreValue *storeValue;

@end

@implementation ShowCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        self.label = [[UILabel alloc] initWithFrame:CGRectMake(10, 30, 300, 50)];
        self.label.font = [UIFont italicSystemFontOfSize:30.f];
        [self addSubview:self.label];

        self.storeValue = [ShowCellStoreValue new];
        self.storeValue.startRect = self.label.frame;
        self.storeValue.endRect   = CGRectMake(10, 30 + 20, 300, 50);
    }

    return self;
}

- (void)accessData:(id)data {
    NSString *str = data;
    if ([str isKindOfClass:[NSString class]]) {
        self.label.text = str;
    }
}

/**
 *  动画显示
 */
- (void)show {
    [UIView animateWithDuration:1.f animations:^{
        self.label.frame = self.storeValue.endRect;
    }];
}

- (void)hide {
    [self.label.layer removeAllAnimations];
    self.label.frame = self.storeValue.startRect;
}

@end

原理:

 

时间: 2024-10-03 10:18:01

滑动cell的时候执行动画效果的相关文章

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

点击单个cell高度变化的动画效果   效果   说明 1. 点击单个cell的时候,其展开与缩放动画实现起来是很麻烦的,做过相关需求的朋友一定知道其中的坑 2. 本例子只是提供了一个解决方案,为了简化操作,将cell高度封装到了Model当中   源码 https://github.com/YouXianMing/TableViewTapAnimation // // Model.h // TableViewTapAnimation // // Created by YouXianMing o

点击cell动态修改高度动画

点击cell动态修改高度动画   效果   源码 https://github.com/YouXianMing/Animations // // TapCellAnimationController.m // Animations // // Created by YouXianMing on 16/4/8. // Copyright 2016年 YouXianMing. All rights reserved. // #import "TapCellAnimationController.h&

Android 实现蘑菇街购物车动画效果

转自:http://blog.csdn.net/wangjinyu501/article/details/38400479   使用过蘑菇街的用户基本上都知道有一个加入购物车的动画效果,此处不具体描述想知道的可以去下载体验一下. 1.思路   目前想到两种方式实现这种效果,一是使用Tween动画,直截了当的进行一个移动,蘑菇街就是使用这样的方法.二是使用WindowManager创建一个View,然后对这个View进行移动. 2.实现   本文先用方式一方法实现,之后会用方式二方法实现.   方

Android Animation实战之一个APP的ListView的动画效果_Android

熟悉了基础动画的实现后,便可以试着去实现常见APP中出现过的那些精美的动画.今天我主要给大家引入一个APP的ListView的动画效果: 当展示ListView时,Listview的每一个列表项都按照规定的动画显示出来. 说起来比较抽象,先给大家看一个动画效果,这是APP窝牛装修的ListView显示动画:     有木有觉得很酷炫?有木有啊!? 一.Layout Animation     所谓的布局动画,其实就是为ViewGroup添加显示动画效果,主要用过LayoutAnimationCo

Android Animation实战之一个APP的ListView的动画效果

熟悉了基础动画的实现后,便可以试着去实现常见APP中出现过的那些精美的动画.今天我主要给大家引入一个APP的ListView的动画效果: 当展示ListView时,Listview的每一个列表项都按照规定的动画显示出来. 说起来比较抽象,先给大家看一个动画效果,这是APP窝牛装修的ListView显示动画: 有木有觉得很酷炫?有木有啊!? 一.Layout Animation     所谓的布局动画,其实就是为ViewGroup添加显示动画效果,主要用过LayoutAnimationContro

jQuery实现菜单感应鼠标滑动动画效果的方法

 这篇文章主要介绍了jQuery实现菜单感应鼠标滑动动画效果的方法,实例分析了jQuery中鼠标事件及animate的使用技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法.分享给大家供大家参考.具体分析如下: 此代码测试环境为IE9 以及GG.FF浏览器,IE8及以下浏览器可能不支持,希望理解. 这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前

解决点击cell执行动画导致的重用问题

解决点击cell执行动画导致的重用问题 说明: 动画的细节都是裸露的,并没有封装,靠看官来优化了.   效果:   源码: https://github.com/YouXianMing/UITableViewSelectedAnimation   核心: // // YouXianMingCell.h // SelectedAnimation // // Created by YouXianMing on 15/4/17. // Copyright (c) 2015年 YouXianMing.

jQuery实现菜单感应鼠标滑动动画效果的方法_jquery

本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法.分享给大家供大家参考.具体分析如下: 此代码测试环境为IE9 以及GG.FF浏览器,IE8及以下浏览器可能不支持,希望理解. 这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前加上stop方法就可实现鼠标移出后,不再执行滑动效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

jQuery教程:制作滑动动画效果的层

使用jQuery制作滑动动画效果的层 基本原理 这些具有动态效果的滑动盒都基于同样的基本原理.在你经过想要"窥见"对象中的其他两个项目,这个带有".boxgrid"的DIV标签充当着一个窗口.还不明白? 让这个图片来给你线索吧: 理解了这个基本原理之后,我们就可以利用滑动元素的动画效果来揭开或遮盖住要展示的区域,以此来创造滑动效果. 第一步 – CSS 基础工作 在上面给出基本结构的启示图中,我们需要使用一点CSS来让它显示出预期的效果.下面这个CSS定义了查看窗口