前言:
之前看見過很多動畫, 都非常炫酷, 所以想弄一些比較簡單的動畫, 以后再項(xiàng)目中可能會用到, 以后還會持續(xù)更新類似的動畫效果!
GitHub下載地址: iOS TableView給力動畫的簡單實(shí)現(xiàn)(一)
效果圖:
效果圖1.gif
效果圖2.gif
效果圖3.gif
代碼實(shí)現(xiàn)
首先我們要在cell中實(shí)現(xiàn)一個(gè)方法:
+ (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];
}
//動畫設(shè)置
CATransform3D transform = CATransform3DMakeRotation(angle, 0.0, 0.5, 0.3);
transform.m34 = -1.0/500.0; // 設(shè)置透視效果
cell.layer.transform = transform;
//錨點(diǎn)
cell.layer.anchorPoint = cellAnchorPoint;
[UIView animateWithDuration:0.6 animations:^{
cell.layer.transform = CATransform3DIdentity;
}];
return cell;
}
我們來簡單解釋下transform.m34 = -1.0/500.0;屬性的設(shè)置
在CATransform3D中
// m34:實(shí)現(xiàn)透視效果(意思就是:近大遠(yuǎn)小), 它的值默認(rèn)是0, 這個(gè)值越小越明顯
/* 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中添加幾個(gè)屬性:
@property (nonatomic, assign) CGFloat lastScrollOffset;
/**設(shè)置cell角度 */
@property (nonatomic, assign) CGFloat angle;
/**設(shè)置cell錨點(diǎn) */
@property (nonatomic, assign) CGPoint cellAnchorPoint;
在TableView的代理中實(shí)現(xiàn)+ (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;
}
最后實(shí)現(xiàn)<UIScrollViewDelegate>代理方法, 這個(gè)方法主要就是監(jiān)聽TableView往上拖動還是往下拖動,目的就是實(shí)現(xiàn)動畫的協(xié)調(diào)性,看著更和諧一些!
//滾動監(jiān)聽
- (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;
}
動畫的方向需要根據(jù)自己喜好去設(shè)置:
x,y值為: _cellAnchorPoint = CGPointMake(x, y);
-angle值為: _angle = - kAngle;
//用戶往下拖動時(shí)候動畫出現(xiàn)的初始位置:
左邊位置: x=0 y=1 -angle
右邊位置: x=1 y=1
//用戶往上拖動時(shí)候動畫出現(xiàn)的初始位置:
左邊位置: x=0 y=0
右邊位置: x=1 y=0 -angle
//在中心點(diǎn)翻轉(zhuǎn)設(shè)置:
x=0.5 y=0.5
以上都是效果圖1的效果, 再來看看效果圖2和3:
下面的代碼實(shí)現(xiàn)是獨(dú)立的, 跟效果圖1完全是分開實(shí)現(xiàn)的, 大家可以拿出去單獨(dú)使用!
- (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;
}];
}
相關(guān)文章:
iOS TableView滾動時(shí)的視覺差效果
iOS (高仿印物App)TableView給力動畫的簡單實(shí)現(xiàn)(二)
看起來還是很簡單的, 如果喜歡的小伙伴請點(diǎn)一個(gè)贊吧，歡迎留言補(bǔ)充與給出不足之處!
