本人有若干成套学习视频, 可试看! 可试看! 可试看, 重要的事情说三遍 包含Java, 数据结构与算法, iOS, 安卓, python, flutter等等, 如有需要, 联系微信tsaievan.
POPAnimation 是 facebook 搞出来的一个框架,专门做动画的.
常言道,一个框架不好用就不是一个好框架, github 上16000+stars 可不是盖的,足见其受欢迎程度
POPAnimation 的使用方法和 CAAnimation极为相似,设置架构都和 CAAnimation 相似,如下图所示
POPAnimation的结构
- POPAnimation是一个大的基类
- POPPropertyAnimation 继承自POPAnimation
- 但真正起作用的还是下面红色方框中的四个类
这四个类的使用方法基本相同,主要就有以下三步
- 初始化动画效果对象
- 为动画效果添加属性
- 将动画效果添加到目标对象上
这都是套路了,不多说
我就写了一个很简单的 demo, 太复杂的咱也不会,之前没有看过任何 demo, 和资料,只听说过有这么个东西,写起来还是坑太多啊.况且之前的 CAAnimation 也忘了个七七八八.
先看下效果图:
demo 效果
可以看到,这是个包含2个 tableView 的控制器
很多电商类的 APP 都实现了这种双 tableView的联动,但这不是今天的重点
点击左边的 cell, 右边 tableView 变成一个 alpha 值为0.6的小正方形缩到屏幕的左上角,随后自动还原
点击右边的 cell, 左边的 tableView 直接缩到左下角,点击屏幕还原.
关键代码如下
> // -------- 弹簧动画 --------
>/* 初始化弹簧动画效果对象 */
POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
>/* 设置动画效果的属性 */
>animation.springSpeed = 20;
>animation.springBounciness = 20;
>animation.toValue = [NSValue >valueWithCGRect:self.leftTableViewRect];
>/* 将动画添加到需要呈现的对象上,理论上可以是任何对象 */
[self.leftTableView pop_addAnimation:animation >forKey:@"sizeLarge"];
>// -------- 基本动画 --------
> - 初始化动画效果对象
> - 为动画效果对象设置属性
> - 将动画效果添加到对象身上
>POPBasicAnimation *basicAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
basicAnimation.fromValue = @0;
basicAnimation.toValue = @1;
basicAnimation.duration = 2;
[self.leftTableView pop_addAnimation:basicAnimation forKey:@"alphaChange"];
完整代码如下:
#import "ViewController.h"
#import
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UITableView *leftTableView;
@property (weak, nonatomic) IBOutlet UITableView *rightTableView;
/* 记录左边 tableView 的 Rect 值 */
@property (nonatomic,assign) CGRect leftTableViewRect;
/* 记录右边 tableView 的 Rect 值 */
@property (nonatomic,assign)CGRect rightTableViewRect;
@end
@implementation ViewController
#pragma mark *** 视图的生命周期 ***
- (void)viewDidLoad {
[super viewDidLoad];
self.leftTableView.dataSource = self;
self.rightTableView.dataSource =self;
self.leftTableView.delegate = self;
self.rightTableView.delegate =self;
[self setupUI];
}
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
// -------- 在 viewDidAppear 中存储控件的 frame 值才能获得真正的正确的 frame 值 --------
self.leftTableViewRect = self.leftTableView.frame;
self.rightTableViewRect = self.rightTableView.frame;
}
// -------- 在 dealloc 方法中移除所有动画 --------
-(void)dealloc
{
[self pop_removeAllAnimations];
}
#pragma mark *** 设置 UI ***
- (void)setupUI
{
UIImage *image = [UIImage imageNamed:@"01"];
self.view.layer.contents = (__bridge id _Nullable)(image.CGImage);
}
#pragma mark *** 点击屏幕触发的方法 ***
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// -------- 弹簧动画 --------
/* 初始化弹簧动画效果对象 */
POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
/* 设置动画效果的属性 */
animation.springSpeed = 20;
animation.springBounciness = 20;
animation.toValue = [NSValue valueWithCGRect:self.leftTableViewRect];
/* 将动画添加到需要呈现的对象上,理论上可以是任何对象 */
[self.leftTableView pop_addAnimation:animation forKey:@"sizeLarge"];
// -------- 基本动画 --------
/* 同样是这三步
* 1. 初始化动画效果对象
* 2. 为动画效果对象设置属性
* 3. 将动画效果添加到对象身上
*/
POPBasicAnimation *basicAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
basicAnimation.fromValue = @0;
basicAnimation.toValue = @1;
basicAnimation.duration = 2;
[self.leftTableView pop_addAnimation:basicAnimation forKey:@"alphaChange"];
}
#pragma mark *** tableView 的数据源方法 ***
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
if ([tableView isEqual:self.leftTableView]) {
UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"leftCell"];
cell.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1];
return cell;
}else
{
UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"rightCell"];
cell.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1];
return cell;
}
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
if ([tableView isEqual:self.leftTableView]) {
return 5;
}else
{
return 10;
}
}
#pragma mark *** tableView 的代理方法 ***
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
if ([tableView isEqual:self.rightTableView]) {
POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
animation.springSpeed = 20;
animation.springBounciness = 20;
animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, [UIScreen mainScreen].bounds.size.height - 1, 1, 1)];
[self.leftTableView pop_addAnimation:animation forKey:@"sizeSmall"];
}else
{
POPBasicAnimation *basicAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
basicAnimation.fromValue = @0;
basicAnimation.toValue = @0.6;
basicAnimation.duration = 1;
[self.rightTableView pop_addAnimation:basicAnimation forKey:@"alphaChange"];
POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
animation.springSpeed = 20;
animation.springBounciness = 20;
animation.toValue = [NSValue valueWithCGRect:CGRectMake([UIScreen mainScreen].bounds.size.width - 100,0,100,100)];
[self.rightTableView pop_addAnimation:animation forKey:@"hidden"];
animation.delegate = self;
}
}
#pragma mark *** POPAnimationDelegate POPAnimation的代理方法 ***
// -------- 当动画停止时执行 --------
- (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished
{
POPSpringAnimation *springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
springAnimation.springSpeed = 20;
springAnimation.springBounciness = 20;
springAnimation.toValue = [NSValue valueWithCGRect:self.rightTableViewRect];
[self.rightTableView pop_addAnimation:springAnimation forKey:@"appear"];
POPBasicAnimation *basicAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
basicAnimation.fromValue = @0.6;
basicAnimation.toValue = @1;
basicAnimation.duration = 1;
[self.rightTableView pop_addAnimation:basicAnimation forKey:@"alphaChange"];
}
@end