文章目录
  1. 1. 基本类型
    1. 1.1. Spring Animation
  2. 2. Decay Animation
  3. 3. Property Animation & Basic Animation

POP动画极为流畅,秘密就在于POP通过CADisplayLink高达60FPS的特性,打造了一个游戏级的动画引擎。
CADisplayLink是一个类似NSTimer的定时器,不同之处在于,NSTimer用于定义任务的执行周期,它的执行收到了CPU阻塞影响,而CADisplayLink则用于定义画面的重绘,动画的演变,基于帧(frames)的间隔。通过CADisplayLink程序的重绘速度设定到和屏幕刷新频率一致,因此可以得到流畅的交互动画。

基本类型

Spring Animation

Spring Animation提供了一个弹簧效果的动画,通过一系列参数的设置,完成风骚的动画

  • Bounciness 反弹,影响动画作用的参数的变化幅度
  • Speed 速度
  • Tension 拉力,影响回弹力度以及速度
  • Friction 摩擦力,如果开启,动画会不断重复,幅度逐渐削弱,知道停止
  • Mass 质量,细微的影响动画的回弹力度以及速度
1
2
3
4
5
6
7
8
9
10
// 创建一个二维平面沿X轴和Y轴进行缩放的动画
POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
// 指定缩放倍数,不指定fromValue,POP会默认使用当前大小
anim.toValue = [NSValue valueWithCGPoint:CGPointMake(2.0,2.0)];
anim.springBounciness = 4.0;
anim.springSpeed = 12.0;
// 指定Callback,在动画执行的过程中,会不断调用该block
anim.completionBlock = ^(POPAnimation *anim,BOOL finished){
if(finished) {NSLog(@"animation finished!");}
};

Decay Animation

Decay Animation变现为一个衰减效果的动画,设置一个参数velocity(速率)

1
2
3
4
5
6
POPDecayAnimation *anim = [POPDecayAnimation animWithPropertyNamed:kPOPLayerPositionX];
anim.velocity = @(100.0);
anim.fromValue = @(25.0);
anim.completionBlock = ^(POPAnimation *anim,BOOL finished){
if(finished){NSLog(@"Stop");}
};

设置deceleration(负向速度)可以设置一个加速度量

Property Animation & Basic Animation

Property Animation为属性动画,是Spring Animation和Decay Animation的父类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
POPBasicAnimation *anim = [POPBasicAnimation animation];
anim.duration = 10.0;
// 一个慢开慢停的动画
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
// 定义属性
POPAnimatableProperty * prop = [POPAnimatableProperty
propertyWithName:@"count"
initializer:^(POPMutableAnimatableProperty *prop)
{ prop.readBlock = ^{id obj,CFFloat values[])
// 告诉POP如何获取值
{ value[0] = [[obj description] floatValue];};
prop.writeBlock = ^(id obj,const CFFloat values[])
// 如何改变值
{ [obj setText:[NSString stringWithFormat:@"%.2f",values[0]]];};
// 设置动画变化阀值
prop.threshold = 0.01;}];
anim.property = prop;
anim.fromValue = @(0.0);
anim.toValue = @(100.0);

文章目录
  1. 1. 基本类型
    1. 1.1. Spring Animation
  2. 2. Decay Animation
  3. 3. Property Animation & Basic Animation