iOS复杂动画都是和贝塞尔曲线结合在一起的。因此要学会iOS动画,必须先理解贝塞尔曲线。贝塞尔曲线的教程网上很多,这里就不过多的阐述。主要还是来讲讲有关动画方面的东西。
一、画一条简单的曲线
我们先准备一条波浪形的贝塞尔曲线:
CGPoint startPoint =
CGPointMake(50,
300);
CGPoint endPoint =
CGPointMake(300,
300);
CGPoint onePoint =
CGPointMake(150,
200);
CGPoint twoPoint =
CGPointMake(200,
400);
UIBezierPath *path = [UIBezierPath
bezierPath];
path.lineWidth =
10.0f;
path.lineCapStyle =
kCGLineCapRound;
[path moveToPoint:startPoint];
[path addCurveToPoint:endPoint
controlPoint1:onePoint controlPoint2:twoPoint];
但是贝塞尔曲线是一个抽象的对象。它的显示是要基于CALayer的。而CALayer的子类CAShapeLayer就是专门用于显示一条曲线的一个图层类。
CAShapeLayer *layer = [CAShapeLayer
layer];
layer.path = [path CGPath];
layer.strokeColor = [[UIColor
redColor] CGColor];
layer.fillColor = [[UIColor
clearColor] CGColor];
[self.view.layer
addSublayer:layer];
二、给layer层添加动画
这个时候其实已经画好了一条曲线。但是它是静态的,要给它加动画就必须与CAAnimation一起使用。CAAnimation是一个抽象的动画类。下面我拿苹果文档中的一张图来展示Core
Animation的层级关系,它是一个对OpenGL和Core Grapgics的封装。
用给这条曲线添加一个逐渐出现的动画,就要使用CABasicAnimation。其中CABasicAnimation是继承自CAPropertyAnimation的,
CAPropertyAnimation是继承自CAAnimation的。CABasicAnimation就只有三个属性,分别是(id)fromValue、(id)toValue、(id)byValue。
先来看一段代码:
CABasicAnimation *anim = [CABasicAnimation
animation];
anim.keyPath =
@"strokeEnd";
anim.fromValue =
@(0);
anim.toValue =
@(1);
anim.duration =
2;
anim.removedOnCompletion =
NO;
anim.fillMode =
kCAFillModeForwards;
[layer addAnimation:anim
forKey:@"basicAnim"];
此时,我们已经可以动态的画出一段曲线啦。
那么,其中的两个属性fromValue和toValue分别是什么,有什么作用呢?
首先,我们注意到这个三个属性都是id类型的,也就是后面可以跟任何形式的值。
例如,缩放动画:
scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1,
0.1, 1.0)];
透明度变化:
opacityAnimation.fromValue = [NSNumber numberWithFloat:1.0];
opacityAnimation.toValue = [NSNumber numberWithFloat:0.1];
旋转动画:
tranformAnimation.fromValue = [NSNumber numberWithFloat:0.f];
tranformAnimation.toValue = [NSNumber numberWithFloat:M_PI];
从上我们可以知道,fromValue代表着一个动画的初始状态,toValue代表着一个动画的结束状态。