全国服务热线:029-68563933 / 15398059315 / 15398059232
06 2021 Apr

iOS 动画整理

发布日期:2021-04-06
浏览数:

序列帧动画

曾经项目里的一段源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
UIImageView * activityImageView = [[UIImageView alloc] init];
NSMutableArray *imagesList = [NSMutableArray array];
for (NSInteger i = 1; i < 3; i++) {

NSString *fileName = [NSString stringWithFormat:@"eggplant%i.png",i];
UIImage *image = [UIImage imageNamed:fileName];
[imagesList addObject:image];
}
[activityImageView setAnimationImages:imagesList];
[activityImageView setAnimationDuration:0.5];
//0为无限循环
[activityImageView setAnimationRepeatCount:0];
[activityImageView startAnimating];
//    [activityImageView stopAnimating];

UIView 动画

UIViewAnimation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//创建一个CGAffineTransform  transform对象
CGAffineTransform  transform;
//设置旋转度数
transform = CGAffineTransformRotate(testView.transform,M_PI/6.0);
//动画开始
[UIView beginAnimations:@"rotate" context:nil ];
//动画时常
[UIView setAnimationDuration:2];
//自动反转
//    [UIView setAnimationRepeatAutoreverses:YES];
[UIView setAnimationRepeatCount:3];
//添加代理
[UIView setAnimationDelegate:self];
//获取transform的值
[testView setTransform:transform];
//关闭动画
[UIView commitAnimations];

UIViewAnimationWithBlocks

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* Duration 动画持续时间
delay 动画延迟时间
options 动画的节奏控制 */

[UIView animateWithDuration:5 delay:5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
testView.frame = CGRectMake(100, 300, 100, 100);
} completion:^(BOOL finished) {

}];

/* Damping 动画的弹力指数
Velocity 弹力的初速度 */

[UIView animateWithDuration:0.5 delay:1 usingSpringWithDamping:0.8 initialSpringVelocity:10 options:0 animations:^{
testView.frame = CGRectMake(100, 300, 100, 100);
} completion:^(BOOL finished) {

}];

CoreAnimation

CATransition

继承关系:CATransition -> CAAnimation

1
2
3
4
5
6
7
8
CATransition *transition = [CATransition animation];
transition.duration = 0.5;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//动画类型
transition.type = kCATransitionPush;
//动画方向
transition.subtype = kCATransitionFromTop;
[testView.layer addAnimation:transition forKey:nil];

CAPropertyAnimation

继承关系:CABasicAnimation,CAKeyframeAnimation -> CAPropertyAnimation -> CAAnimation

CABasicAnimation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
CABasicAnimation * animation = [CABasicAnimation animation];
animation.keyPath = @"position.y";

//运动的绝对距离
animation.fromValue = @77;
animation.toValue = @455;

//运动的相对距离
//    animation.byValue = @222;

animation.duration = 1;
//留在最终状态
animation.fillMode = @"forwards";
//防止它被自动移除
animation.removedOnCompletion = NO;
animation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.5 :0 :0.9 :0.7];
[testView.layer addAnimation:animation forKey:@"basic"];

CAKeyframeAnimation 例一

1
2
3
4
5
6
7
8
9
CAKeyframeAnimation * animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position.x";
animation.values = @[@0,@10,@-10,@10,@0];
//指定关键帧动画发生的时间
animation.keyTimes = @[ @0, @(1 / 6.0), @(3 / 6.0), @(5 / 6.0), @1 ];
animation.duration = 0.4;
//提前无需设置位置
animation.additive = YES;
[testView.layer addAnimation:animation forKey:@"shake"];

CAKeyframeAnimation 例二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
CGRect boundingRect = CGRectMake(-150, -150,300, 300);

CAKeyframeAnimation *orbit = [CAKeyframeAnimation animation];
orbit.keyPath = @"position";
//创建一个圆形的 CGPath 作为我们的关键帧动画的 path。
orbit.path = CFAutorelease(CGPathCreateWithEllipseInRect(boundingRect, NULL));
orbit.duration = 2;
orbit.additive = YES;
orbit.repeatCount = HUGE_VALF;
//恒定速度
orbit.calculationMode = kCAAnimationPaced;
//确保沿着路径旋转
orbit.rotationMode = kCAAnimationRotateAuto;
[testView.layer addAnimation:orbit forKey:@"orbit"];

CAAnimationGroup 组动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.duration = 3.;
animation.fromValue = @(0.1);
animation.toValue = @(1.);

CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];
animation2.duration = 3.;
animation2.fromValue = @(1);
animation2.toValue = @(2.);
animation2.beginTime = 3.;

CAAnimationGroup *group = [CAAnimationGroup animation];
group.duration = 6.;
group.animations = @[animation,animation2];
[testView.layer addAnimation:group forKey:nil];

Facebook pop 动画

POPBasicAnimation 基本动画

1
2
3
4
POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
anim.toValue = [NSValue valueWithCGPoint:CGPointMake(2.0, 2.0)];
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[testView.layer pop_addAnimation:anim forKey:@"Animation"];

POPSpringAnimation 弹性动画

1
2
3
4
5
6
7
8
9
10
11
12
POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition];
anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(60, 350)];
anim.toValue = [NSValue valueWithCGPoint:CGPointMake(60, 150)];
anim.springBounciness = 10;
anim.springSpeed = 10;
//摩擦力
anim.dynamicsFriction = 0.5;
//张力
anim.dynamicsTension = 250;
//质量
anim.dynamicsMass = 0.7;
[testView.layer pop_addAnimation:anim forKey:@"Animation"];

POPDecayAnimation 减速动画

1
2
3
4
5
6
7
8
9
10
11
POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
//初始速度
anim.velocity = @(200);
//只有fromValue 没有toValue
anim.fromValue =  @(100.0);
//负加速度
anim.deceleration = .998;
[anim setCompletionBlock:^(POPAnimation *anim, BOOL finished) {
NSLog(@"执行完毕");
}];
[testView.layer pop_addAnimation:anim forKey:@"Animation"];