iOS TableView给力动画的简单实现-白红宇

iOS TableView给力动画的简单实现

阅读量：4218 次

发布时间：2019-05-26

本文共 3269 字，大约阅读时间需要 10 分钟。

前言

之前看见过很多动画, 都非常炫酷, 所以想弄一些比较简单的动画, 以后再项目中可能会用到, 以后还会持续更新类似的动画效果！

GitHub下载地址:

原文地址:http://www.cocoachina.com/ios/20160725/17172.html

效果图:

代码实现

首先我们要在cell中实现一个方法:

                      
+ (instancetype)cellFromXib:(UITableView *)tableView cellAnchorPoint:(CGPoint)cellAnchorPoint angle:(CGFloat)angle;
{ 
    
LRAnimationCell *cell = [tableView dequeueReusableCellWithIdentifier:LRCellId];
    
if
(!cell) { 
        
cell = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];
    
}
    
//动画设置
    
CATransform3D transform = CATransform3DMakeRotation(angle, 0.0, 0.5, 0.3);
    
transform.m34 = -1.0/500.0; 
// 设置透视效果
    
cell.layer.transform = transform;
    
//锚点
    
cell.layer.anchorPoint = cellAnchorPoint;
    
[UIView animateWithDuration:0.6 animations:^{ 
        
cell.layer.transform = CATransform3DIdentity;
    
}];
    
return
cell;
}

我们来简单解释下transform.m34 = -1.0/500.0;属性的设置

在CATransform3D中

                      
// m34:实现透视效果(意思就是:近大远小), 它的值默认是0, 这个值越小越明显
/* Homogeneous three-dimensional transforms. */
 
struct CATransform3D
     
{ 
     
CGFloat m11, m12, m13, m14;
     
CGFloat m21, m22, m23, m24;
     
CGFloat m31, m32, m33, m34;
     
CGFloat m41, m42, m43, m44;
     
};
     
typedef struct CATransform3D CATransform3D;

我们要在ViewController中添加几个属性:

                      
@property (nonatomic, assign) CGFloat lastScrollOffset;
/**设置cell角度 */
@property (nonatomic, assign) CGFloat angle;
/**设置cell锚点 */
@property (nonatomic, assign) CGPoint cellAnchorPoint;
       
     

在TableView的代理中实现+ (instancetype)cellFromXib:(UITableView *)tableView cellAnchorPoint:(CGPoint)cellAnchorPoint angle:(CGFloat)angle;方法:

                      
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{ 
    
LRAnimationCell *cell = [LRAnimationCell cellFromXib:tableView cellAnchorPoint:_cellAnchorPoint angle:_angle];
    
cell.backgroundImage.image = LRGetImage(indexPath.row + 1);
 
return
cell;
}

最后实现代理方法, 这个方法主要就是监听TableView往上拖动还是往下拖动,目的就是实现动画的协调性,看着更和谐一些!

                      
//滚动监听
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{ 
    
if
(scrollView != self.tableView) 
return
;
    
CGFloat y = scrollView.contentOffset.y;
    
if
(y > _lastScrollOffset) { 
//用户往上拖动
        
// x=0 y=0 左
        
// x=1 y=0 -angle 右
        
_angle = - kAngle;
        
_cellAnchorPoint = CGPointMake(1, 0);
    
} 
else
{ 
//用户往下拖动
        
// x=0 y=1 -angle 左
        
// x=1 y=1 右
        
_angle =  - kAngle;
        
_cellAnchorPoint = CGPointMake(0, 1);
    
}
    
//存储最后的y值
    
_lastScrollOffset = y;
}
       
     

动画的方向需要根据自己喜好去设置:

                      
x,y值为:  _cellAnchorPoint = CGPointMake(x, y);
 
-angle值为:  _angle =  - kAngle;
//用户往下拖动时候动画出现的初始位置:
 
左边位置:  x=0 y=1 -angle
 
右边位置: x=1 y=1
//用户往上拖动时候动画出现的初始位置:
  
左边位置: x=0 y=0
  
右边位置: x=1 y=0 -angle
//在中心点翻转设置:
  
x=0.5 y=0.5

以上都是效果图1的效果, 再来看看效果图2和3:

下面的代码实现是独立的, 跟效果图1完全是分开实现的, 大家可以拿出去单独使用!

                      
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{ 
        
CATransform3D transform = CATransform3DIdentity;
        
transform = CATransform3DRotate(transform, 0, 0, 0, 1);
//渐变
        
transform = CATransform3DTranslate(transform, -200, 0, 0);
//左边水平移动
//        transform = CATransform3DScale(transform, 0, 0, 0);//由小变大
        
cell.layer.transform = transform;
        
cell.layer.opacity = 0.0;
        
[UIView animateWithDuration:0.6 animations:^{ 
            
cell.layer.transform = CATransform3DIdentity;
            
cell.layer.opacity = 1;
        
}];
}

转载地址：http://sztmi.baihongyu.com/

你可能感兴趣的文章