Pop 是基于 CADisplayLink 实现的独立于 CoreAnimation 之外的动画方案。
计算机世界里,并不存在连续的动画,动画的本质是离散的,只是离散帧多到一定数量人眼就会觉得是连续的了,iOS 中的帧率是60帧每秒。Core Animation 框架,只需开发者提供关键帧信息,中间的值通过一定的算法进行插值计算,从而实现补间动画。CoreAnimation 中进行插值计算所以来的时间曲线是由 CAMediaTimingFunction 提供。
Pop 和 Core Animation 一样都涉及到 Animation 对象和 Animation 载体,不同的是 Core Animation 的载体是 CALayer,Pop 的 对象可以任意基于 NSObject 的对象。
用 cocoapod 安装:
pod 'pop', '~> 1.0.9'
安装完之后导入:
#import "POP.h"
导入pop.h的时候可能会出现代码不能自动补全
只需如下操作即可:
一、自定义属性的动画
1.自定义属性
POPAnimatableProperty *animatableProperty = [POPAnimatableProperty propertyWithName:@"custom" initializer:^(POPMutableAnimatableProperty *prop) {
// 修改后的属性值 prop.writeBlock
// 当前属性值 prop.readBlock
// 动画变化间隔的阀值 prop.threshold值越大,writeBlock调用次数越少
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)];
};
}];
2.创建一个动画
POPBasicAnimation * basicAni = [POPBasicAnimation animation];
basicAni.property = animatableProperty;
basicAni.fromValue = @(0);
basicAni.toValue = @(3*60);
basicAni.duration = 3*60;
basicAni.beginTime = CACurrentMediaTime() + 1.f;
basicAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
3.添加动画
[self.label pop_addAnimation:basicAni forKey:@"custom"];
二、弹性动画
springAnimation
id velocity; // 起始速度
CGFloat springBounciness; // 振幅
CGFloat springSpeed;//震荡速度,决定振动结束的快慢
CGFloat dynamicsTension; // 拉力,几乎不用
CGFloat dynamicsFriction; // 摩擦力,几乎不用
CGFloat dynamicsMass; // 质量,几乎不用
POPSpringAnimation * spring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX];
// 动画的起始速度
spring.velocity = @(1);
// 决定动画振动结束的快慢
spring.springSpeed = 12.0f;
// 决定动画振动的幅度
spring.springBounciness = 20.f;
// propery的最终状态
spring.toValue = @(self.redView.layer.position.y + 200);
[spring setCompletionBlock:^(POPAnimation * animation, BOOL finish) {
if (finish) {
NSLog(@"view.frame = %@",NSStringFromCGRect(self.redView.frame));
}
}];
[self.redView.layer pop_addAnimation:spring forKey:@"frame"];
三、衰减动画
DecayAnimation
POPDecayAnimation * decayAni = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
// 速度
decayAni.velocity = @(600);
// 衰减系数
decayAni.deceleration = 0.98;
[self.redView.layer pop_addAnimation:decayAni forKey:@"decay"];