cell中的lable加上一个弹簧动画.

作者: 大墙66370 | 来源:发表于2016-06-26 21:39 被阅读1345次

我没事写那个tableViewCell的依次插入动画,http://www.jianshu.com/p/ff0db8fafd0c
是因为我看到了一个,牛X的人在git上有传了一个开源项目Animations
https://github.com/YouXianMing/Animations
这个开源项目的首页 rootViewController是一个tableView当我们滑动的时候会发现每一个cell里面的label有一个动画像波浪.
由于这个项目封装的有点严重.我看的有点一愣一愣的.我就想自己实现这个效果.我就先写了上一篇.

我们看着Animations这个项目当我们滑动到时候.才会出现cell中lable的动画,我们脑海中第一时间想到的是,这个动画是在滑动的阶段才有的. 我们接着思考我们滑动 tableView.都有神吗方法执行了?
不出意外我们,肯定会想到tableView的协议系方法.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
我们在这个方法中实现一个弹簧动画就差不多可以达到我们想要的效果了

接着我们要简要的说一下弹簧动画

E7299E6C-1EDE-4D53-A44A-114B26BA4BEC.png

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
这个方法是UIview的类方法.和一般动画相比多了两个参数，分别是usingSpringWithDamping
和initialSpringVelocity

usingSpringWithDamping差不多就是一个(阻力系)数范围是0.0f
到1.0f 想想一下显示生活中的弹簧当用力压缩一个弹簧.他反弹上下震动. 在震动这个过程中会受到一个阻力.阻力越大.(阻力系数越大)简单的说就是震动的幅度越小.(看起来不太弹)

initialSpringVelocity.这个表示初始速度.(相当与现实中你压缩弹簧的程度压缩越狠,当然初始速度越大).

说的UIview的动画UIViewAnimationOptions这个参数是个枚举

常规动画属性设置（可以同时选择多个进行设置）
UIViewAnimationOptionLayoutSubviews：动画过程中保证子视图跟随运动。
UIViewAnimationOptionAllowUserInteraction：动画过程中允许用户交互。
UIViewAnimationOptionBeginFromCurrentState：所有视图从当前状态开始运行。
UIViewAnimationOptionRepeat：重复运行动画。
UIViewAnimationOptionAutoreverse ：动画运行到结束点后仍然以动画方式回到初始点。
UIViewAnimationOptionOverrideInheritedDuration：忽略嵌套动画时间设置。
UIViewAnimationOptionOverrideInheritedCurve：忽略嵌套动画速度设置。
UIViewAnimationOptionAllowAnimatedContent：动画过程中重绘视图（注意仅仅适用于转场动画）。
UIViewAnimationOptionShowHideTransitionViews：视图切换时直接隐藏旧视图、显示新视图，而不是将旧视图从父视图移除（仅仅适用于转场动画）
UIViewAnimationOptionOverrideInheritedOptions ：不继承父动画设置或动画类型。
2.动画速度控制（可从其中选择一个设置）
UIViewAnimationOptionCurveEaseInOut：动画先缓慢，然后逐渐加速。
UIViewAnimationOptionCurveEaseIn ：动画逐渐变慢。
UIViewAnimationOptionCurveEaseOut：动画逐渐加速。
UIViewAnimationOptionCurveLinear ：动画匀速执行，默认值。
3.转场类型（仅适用于转场动画设置，可以从中选择一个进行设置，基本动画、关键帧动画不需要设置）
UIViewAnimationOptionTransitionNone：没有转场动画效果。
UIViewAnimationOptionTransitionFlipFromLeft ：从左侧翻转效果。
UIViewAnimationOptionTransitionFlipFromRight：从右侧翻转效果。
UIViewAnimationOptionTransitionCurlUp：向后翻页的动画过渡效果。
UIViewAnimationOptionTransitionCurlDown ：向前翻页的动画过渡效果。
UIViewAnimationOptionTransitionCrossDissolve：旧视图溶解消失显示下一个新视图的效果。
UIViewAnimationOptionTransitionFlipFromTop ：从上方翻转效果。
UIViewAnimationOptionTransitionFlipFromBottom：从底部翻转效果。

下面是我的代码.

控制器里的代码几乎和http://www.jianshu.com/p/ff0db8fafd0c里面的代码一样只是加了一个弹簧动画
自定义的cell里面只是加了一个简单的lable
同样你可以吧viewController.里面的代码和AnimationCell里面的代码粘贴到自己的一个空白项目就可以了

控制器里的代码如下

 #import "ViewController.h"
 #import "AnimationCell.h"
 @interface ViewController ()   <UITableViewDataSource,UITableViewDelegate>
@property(nonatomic,strong)UITableView *tableView;
@property(nonatomic,strong)NSArray *dataArr;
@property(nonatomic,strong)NSMutableArray *indesPaths;
@property (nonatomic,assign)int DatNum;
@property(nonatomic,strong) NSTimer * timer;
@end

@implementation ViewController
 -(UITableView *)tableView{
if (!_tableView) {
    _tableView = [[UITableView alloc]initWithFrame:self.view.frame style:UITableViewStylePlain];
    _tableView.delegate = self;
    _tableView.dataSource = self;
    
    [_tableView registerClass:[AnimationCell class] forCellReuseIdentifier:@"cell"];
}
return _tableView;
}
-(NSArray *)dataArr{
if (!_dataArr) {
    _dataArr = @[@"我是个1",
                 @"我是个2",
                 @"我是个3",
                 @"我是个4",
                 @"我是个5",
                 @"我是个6",
                 @"我是个7",
                 @"我是个8",
                 @"我是个9",
                 @"我是个10",
                 @"我是个11",
                 @"我是个12",
                 @"我是个13",
                 @"我是个14",
                 @"我是个15",
                 @"我是个16",
                 @"我是个17",
                 @"我是个18",
                 @"我是个19",
                 @"我是个20",
                 @"我是个21",
                 @"我是个22",
                 @"我是个23",
                 @"我是个24",
                 @"我是个25",
                 @"我是个26",
                 @"我是个27",
                 @"我是个28",
                 @"我是个29",
                 @"我是个30",
                 @"我是个31",
                 @"我是个32",
                 @"我是个33"
               ];
}
return _dataArr;
}

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self.view addSubview:self.tableView];
self.DatNum = -1;
    NSMutableArray *indexPaths = @[].mutableCopy;
    self.indesPaths = indexPaths;

   self.timer =  [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(charusell) userInfo:nil repeats:YES];

}

-(void)charusell{
self.DatNum = self.DatNum +1;
if (self.DatNum < self.dataArr.count) {
    [self.indesPaths addObject:[NSIndexPath indexPathForItem:self.DatNum inSection:0]];
    [self.tableView insertRowsAtIndexPaths:self.indesPaths withRowAnimation:UITableViewRowAnimationRight];
    [self.indesPaths removeAllObjects];
}else{
    [self.timer invalidate];
    self.timer = nil;
}
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return self.DatNum+1;

}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
AnimationCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
cell.lable.text = self.dataArr[indexPath.row];

cell.lable.transform = CGAffineTransformMakeTranslation(400, 0);
[UIView animateWithDuration:0.25 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:20 options:UIViewAnimationOptionCurveLinear animations:^{
    cell.lable.transform = CGAffineTransformIdentity;
} completion:nil];

return cell;
}
@end

AnimationCell里面的代码如下
.h
#import <UIKit/UIKit.h>
@interface AnimationCell : UITableViewCell
@property(nonatomic,strong)UILabel *lable;
@end
.m

#import "AnimationCell.h"

@implementation AnimationCell

-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
    self.lable = [UILabel new];
    self.lable.frame = CGRectMake(0, (self.contentView.frame.size.height-50)/2, 150, 50);
    [self.contentView addSubview:self.lable];
}
return self;
}
@end

项目效果

2016-06-26 21_22_22.gif