简介：
pop动画引擎是Facebook公司开源的，主要实现了真实物理系的动画效果（弹簧效果与衰减效果）
1、pop动画引擎的动画效果非常流程，其最主要原因是底层使用了CADisplayLink来刷新，每秒达到了60帧，和游戏引擎相当。
2、pop动画与CALayer动画的区别：CALayer动画是有中间状态的，在展示过程中实际上有另一layer层在展示动画，当在执行动画过程中突然移除掉动画效果，会直接到指定的最终状态，容易引起不流程的体验。
pop动画是没有中间状态的，在执行动画的过程中，如果中途移除掉动画效果，那么layer会停留在当前位置。
实现衰减效果：
1)衰减动画由POPDecayAnimation来实现
2）需要精确计算停止运动瞬间的加速度才能够用衰减动画做出真是的效果
目标效果：拖拽一个圆形小球，停止拖拽的瞬间小球继续向前慢慢移动减速停止。
代码实现：
#pragma mark -创建一个圆形的小球
- (void)createBtn{
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.bounds = CGRectMake(0, 0, 100, 100);
btn.center = self.view.center;
btn.layer.cornerRadius = 50;
btn.layer.masksToBounds = YES;
btn.backgroundColor = [UIColor redColor];
//添加到view中
[self.view addSubview:btn];
//为btn添加拖拽手势
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(btnPanGes:)];
[btn addGestureRecognizer:pan];
}
#pragma mark - 拖拽事件
- (void)btnPanGes:(UIPanGestureRecognizer *)recognizer{
//获取拖拽的变化量
CGPoint trans = [recognizer translationInView:recognizer.view];
//动态改变被拖拽的目标的frame值
recognizer.view.center = CGPointMake(trans.x+recognizer.view.center.x, trans.y+recognizer.view.center.y);
//清空偏移量
[recognizer setTranslation:CGPointZero inView:self.view];
//当停止拖拽的那一瞬间计算加速度并添加衰减动画
if (recognizer.state == UIGestureRecognizerStateEnded) {
//获取此时的加速度
CGPoint vo = [recognizer velocityInView:self.view];
//创建衰减动画
POPDecayAnimation *decay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];
decay.velocity = [NSValue valueWithCGPoint:vo];
[recognizer.view.layer pop_addAnimation:decay forKey:nil];
}
}
实现弹簧效果
1）弹簧效果通过POPSpringAnimation来实现
2）可以通过设置弹性系数和速度来设置效果
实现目标：一个红色的视图像弹簧般变大
代码实现：
- (void)createView{
UIView *showView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 50, 50)];
showView.backgroundColor = [UIColor redColor];
showView.center = self.view.center;
//添加到主视图
[self.view addSubview:showView];
//添加弹簧动画,对bounds属性做动画效果
POPSpringAnimation *spring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
spring.springBounciness = 20;//设置弹性系数，数值越大，震动幅度越大
spring.springSpeed = 0;//设置速度，速度越快，动画效果越快结束
spring.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)];
[showView.layer pop_addAnimation:spring forKey:nil];
}
自定义动画：
POP默认支持的三种动画都继承自POPPropertyAnimation中定义了一个叫property的属性( 之前没有用到它是因为POP根据不同的默认动画属性帮你生成了默认的property) 而这个property则是用来驱动POP的动画效果中的重要一环。
POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"prop" initializer:^(POPMutableAnimatableProperty *prop) {
prop.readBlock = ^(id obj, CGFloat values[]) {
};
prop.writeBlock = ^(id obj, const CGFloat values[]) {
};
prop.threshold = 0.01;
}];
其组成就是一个readBlock一个writeBlock和一个threashold
readBlock告诉POP当前的属性值
writeBlock中修改变化后的属性值
threashold决定了动画变化间隔的阈值 值越大writeBlock的调用次数越少
POPAnimatableProperty其实是POP中一个比较重要的东西 像上面提到的POP自带的动画属性 查看源代码可以看到也只是POP自动帮你设置好了POPAnimatableProperty而已 其作用就是当动画的某个时间片被触发时 告诉系统如何根据当前时间片做出变化
自定义属性实现目标：类似秒表的动画
代码：
- (void)animatableProp{
UILabel *lab = [[UILabel alloc]init];
lab.frame = CGRectMake(0, 0, 100,50);
lab.font = [UIFont systemFontOfSize:30];
[self.view addSubview:lab];
lab.center = self.view.center;
POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"countDown" initializer:^(POPMutableAnimatableProperty *prop) {
prop.writeBlock = ^(id obj,const CGFloat values[]){
UILabel *label = (UILabel*)obj;
label.text = [NSString stringWithFormat:@"%d:%d:%d",(int)values[0]/60,(int)values[0]%60,(int)(values[0]*100)%100];
};
}];
//秒表采用线性事件函数
POPBasicAnimation *basic = [POPBasicAnimation linearAnimation];
basic.property = prop;//采用自定义属性
basic.fromValue = @(0);//从0开始
basic.toValue = @(3*60);//180秒
basic.duration = 3*60;//持续3分钟
[lab pop_addAnimation:basic forKey:nil];
}
网友评论