本篇文章主要讲解iOS中动画的使用。
1、Core Animation,核心动画。
核心动画执行过程都是在后台操作的,不会阻塞主线程。Core Animation是直接作用在CALayer上的,并非UIView。
CAAnimation 是所有 Core Animation 动画类的父类,CAAnimation是一个抽象类,不能直接使用,应该使用它的子类。CAAnimation常用的子类有以下三个:
CAPropertyAnimation,属性动画
CATransition,转场动画
CAAnimationGroup,组动画
其中,CAPropertyAnimation也是一个抽象类,我们一般使用它的两个子类:
CABasicAnimation,基础动画,
CAKeyframeAnimation,帧动画
另外有一个协议:CAMediaTiming。
1.1、CABasicAnimation,基础动画。通过上面的介绍,我们可以知道,核心动画是作用在CALayer层,因此,基础动画是通过改变对象的layer的某个属性来实现动画效果的。至于CALayer的属性有哪些,大家可以自行看API,我这里仅就 position 属性来演示动画效果。下面看代码:
1 - (IBAction)CABasicAnimation:(UIButton *)sender {
2 //参数需要是layer的属性,或者是属性的属性的名字
3 CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"position.x"];
4 basic.fromValue = @100;
5 basic.toValue = @250;
6 basic.duration = 3;
7 basic.repeatCount = 1;
8 //需要手动改变位置,(如果需要改变position的真实位置)
9 // self.redView.layer.position = CGPointMake(250, 100);
10 //key,标识
11 [self.redView.layer addAnimation:basic forKey:nil];
12 }
解释一下上面的代码,Line3中创建了一个动画,这个动画是改变 某个对象在x轴的位置,即 position.x 来实现的;Line4中制定了x的起始位置,Line5中指定了x的终止位置,Line6设置动画执行时间为3S,Line7设置动画重复次数为1,Line11中,将这个动画指定给 self.redView.layer 。
当上面的动画执行完成后,我们会发现,self.redView又回到了初始位置,也就是说,动画并不会真正改变layer的属性值。我们可以通过Line9中的代码,来实际改变layer的属性值,让对象停留在终止位置。
1.2、CAKeyframeAnimation,关键帧动画。这个和基础动画很类似,只不过是可以通过添加一组基础动画来执行,下面直接上代码,代码解释参考上面的:
1 //关键帧动画
2 - (IBAction)keyFrameAnimation:(UIButton *)sender {
3
4 CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
5 CGPoint point0 = CGPointMake(100, 100);
6 CGPoint point1 = CGPointMake(100, 200);
7 CGPoint point2 = CGPointMake(200, 200);
8 CGPoint point3 = CGPointMake(200, 300);
9 CGPoint point4 = CGPointMake(150, 300);
10 CGPoint point5 = CGPointMake(175, 250);
11 CGPoint point6 = CGPointMake(175, 100);
12
13 NSValue *value1 = [NSValue valueWithCGPoint:point0];
14 NSValue *value2 = [NSValue valueWithCGPoint:point1];
15 NSValue *value3 = [NSValue valueWithCGPoint:point2];
16 NSValue *value4 = [NSValue valueWithCGPoint:point3];
17 NSValue *value5 = [NSValue valueWithCGPoint:point4];
18 NSValue *value6 = [NSValue valueWithCGPoint:point5];
19 NSValue *value7 = [NSValue valueWithCGPoint:point6];
20
21 //根据一组点来创建动画
22 keyFrameAnimation.values = @[value1, value2, value3, value4, value5, value6, value7, value1];
23 keyFrameAnimation.duration = 10;
24 [self.redView.layer addAnimation:keyFrameAnimation forKey:nil];
25 }
上面的代码,大家可以自行创建一个View,即代码中的 self.redView,演示一下就明白了。
1.3 CATransition转场动画。下面看代码:
- (IBAction)transitionAnimation:(UIButton *)sender {
CATransition *transition = [CATransition animation];
transition.type = @"rippleEffect"; //动画过渡类型
transition.subtype = kCATransitionFromLeft; //动画过度方向
transition.repeatCount = HUGE_VALL; //动画重复次数,最大次数
transition.duration = 2; //动画持续时间
[self.redView.layer addAnimation:transition forKey:nil];
}
下面我罗列了一些过渡类型,供大家参考使用:
1 pageCurl 向上翻一页
2 pageUnCurl 向下翻一页
3 rippleEffect 滴水效果
4 suckEffect 收缩效果,如一块布被抽走
5 cube 立方体效果
6 oglFlip 上下翻转效果
1.4 CAAnimationGroup。组动画实际上就是可以将上面的几种动画类型随意组合添加到一个对象上。下面看代码:
1 - (IBAction)groupAnimatio