基本动画部分比较简单, 但能实现的动画效果也很局限
使用方法大致为:
#1. 创建原始UI或者画面
#2. 创建CABasicAnimation实例, 并设置keypart/duration/fromValue/toValue
#3. 设置动画最终停留的位置
#4. 将配置好的动画添加到layer层中
举个例子, 比如实现一个圆形从上往下移动, 上代码:
1 //设置原始画面
2 UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
3 showView.layer.masksToBounds = YES;
4 showView.layer.cornerRadius = 50.f;
5 showView.layer.backgroundColor = [UIColor redColor].CGColor;
6 [self.view addSubview:showView];
7
8 //创建基本动画
9 CABasicAnimation *basicAnimation = [CABasicAnimation animation];
10
11 //设置属性
12 basicAnimation.keyPath = @"position";
13 basicAnimation.duration = 4.0f;
14 basicAnimation.fromValue = [NSValue valueWithCGPoint:showView.center];
15 basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(50, 300)];
16
17 //设置动画结束位置
18 showView.center = CGPointMake(50, 300);
19
20 //添加动画到layer层
21 [showView.layer addAnimation:basicAnimation forKey:nil];
其实跟基本动画差不多, 只是能设置多个动画路径 使用方法也类似, 大致为
#1. 创建原始UI或者画面
#2. 创建CAKeyframeAnimation实例, 并设置keypart/duration/values 相比基本动画只能设置开始和结束点, 关键帧动画能添加多个动画路径点
#3. 设置动画最终停留的位置
#4. 将配置好的动画添加到layer层中
举个例子, 红色圆形左右晃动往下坠落 上代码:
1 //设置原始画面
2 UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
3 showView.layer.masksToBounds = YES;
4 showView.layer.cornerRadius = 50.f;
5 showView.layer.backgroundColor = [UIColor redColor].CGColor;
6
7 [self.view addSubview:showView];
8
9 //创建关键帧动画
10 CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
11
12 //设置动画属性
13 keyFrameAnimation.keyPath = @"position";
14 keyFrameAnimation.duration = 4.0f;
15
16 keyFrameAnimation.values = @[[NSValue valueWithCGPoint:showView.center],
17 [NSValue valueWithCGPoint:CGPointMake(100, 100)],
18 [NSValue valueWithCGPoint:CGPointMake(50, 150)],
19 [NSValue valueWithCGPoint:CGPointMake(200, 200)]];
20
21 //设置动画结束位置
22 showView.center = CGPointMake(200, 200);
23
24 //添加动画到layer层
25 [showView.layer addAnimation:keyFrameAnimation forKey:nil];
先说说什么是缓动函数, 就是有高人写了一个库可以计算出模拟物理性动画(比如弹簧效果)所要的路径
Github地址: https://github.com/YouXianMing/EasingAnimation
具体有哪些动画效果可看库中的缓动函数查询表, 简单举个小球落地的效果
上代码:
1 //设置原始画面
2 UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
3 showView.layer.masksToBounds = YES;
4 showView.layer.cornerRadius = 50.f;
5 showView.layer.backgroundColor = [UIColor redColor].CGColor;
6
7 [self.view addSubview:showView];
8
9 //创建关键帧动画
10 CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
11
12 //设置动画属性
13 keyFrameAnimation.keyPath = @"position";
14 keyFrameAnimation.duration = 4.0f;
15
//关键处, 在这里使用的缓动函数计算点路径
16 keyFrameAnimation.values = [YXEasing calculateFrameFromPoint:showView.center
17 toPoint:CGPointMake(50, 300)
18 func:BounceEaseOut
19 frameCount:4.0f * 30];
20
21 //设置动画结束位置
22 showView.center = CGPointMake(50, 300);
23
24 //添加动画到layer层
25 [showView.layer addAnimation:keyFrameAnimation forKey:nil];