|
如果想在底层做一些改变，想实现一些特别的动画，这时除了学习Core Animation之外，别无选择。
最近在看《iOS Core Animation：Advanced Techniques》这本书籍，尚有所收获，并将之记录下来。
- CALayer
如果将UIView说成是视图，那么CALayer就是图层了。每一个 UIView 的身后对应一个 Core Animation 框架中的 CALayer；每一个 CALayer 都是 UIView 的代理。可以尝试运行下面的代码，会发现打印是一样的内存地址：
let testView = UIView()
print("\(testView)")
print("\(testView.layer.delegate!)")
在iOS开发中，处理的一个又一个UIView，实际是在操作CALayer。那么为什么不直接对CALayer进行编程呢？那是因为CALayer继承自NSObject，主要是用于图层的处理以及动画，而UIView继承自UIResponder，可以处理交互事件。
由此，可以认为UIView就是对CALayer的一个简单封装，图像绘制、动画都是CALayer做的。有过开发经验的朋友都知道，苹果在UIView里面封装了一套动画接口，但是利用这些接口，只是可以做一些简单、不灵活的动画。如果想在底层做一些改变，想实现一些特别的动画，这是除了学习Core Animation之外，别无选择。
A. CALayer的简单使用
这一部分内容开发中经常用到，可以说是基础的东西。代码：
let testView = UIView(frame: CGRectMake(100, 100, 100, 100))
testView.backgroundColor = UIColor.blueColor()
self.view.addSubview(testView)
//设置圆角
testView.layer.cornerRadius = testView.frame.width / 2.0
// testView.layer.masksToBounds = true
//设置边框
testView.layer.borderWidth = 5
testView.layer.borderColor = UIColor.redColor().CGColor
//设置阴影，这里需要注意，如果masksToBounds为true，阴影会被裁剪掉（所以，一般如果你既想要圆形图片，又想要阴影，那么是需要将图片进行裁剪的）
testView.layer.shadowOpacity = 0.5
testView.layer.shadowOffset = CGSizeMake(0, 2)
testView.layer.shadowRadius = 5
//需要注意的是这个属性: shadowPath 它是CGPathRef类型，可以用自定义阴影样式,比如说，它默认是圆形的阴影，现在将之变成方形阴影
let path = CGPathCreateMutable()
CGPathAddRect(path, nil, testView.bounds)
testView.layer.shadowPath = path
//如果是oc的话，需要注意释放path，因为它是core Graphics的东西，OC的ARC机制并不会对它进行内存管理，但是Swift对它自动进行了，所以在Swift中不需要写这个代码
// CGPathRelease(path)
B. 自定义CALayer
CALayer有一个contents属性，它在OC中是id类型，在Swift中是AnyObject类型，这意味着它可以是任何类型对象。但在实践中，如果给这个属性赋值的不是CGImage类型，图层会是一片空白。它的这个奇怪的现象是因为MAC OS原因造成的，在MAC OS系统上，给它赋值CGImage或者NSImage都是起作用的，但是在iOS系统，如果将UIImage赋值给它，图层只会是一片空白。（注意，视图指的是UIView，图层指的是CALayer）
在OC中，如果直接将这么做，会产生编译错误：
UIImage *image = [UIImage imageNamed:@"1"];
self.view.layer.contents = image.CGImage;
正确的写法是：
UIImage *image = [UIImage imageNamed:@"1"];
self.view.layer.contents = (__bridge id _Nullable)(image.CGImage);
在OC中，事实上真正要赋值的类型应该是CGImageRef，它是一个指向CGImage的指针，而CGImageRef并不是Cocoa对象，而是一个Core Foundation类型，所以需要进行桥接转换。
但是在Swift中没必要这么麻烦，直接用CGImage赋值即可，我猜想这是苹果在底层帮忙转换了，代码：
func drawImageOnLayer() {
let image = UIImage(named: "1")
self.blueView.layer.contents = image?.CGImage
/**
* 相当于UIImageView的contentMode属性，可以设置图片显示样式
kCAGravityCenter
kCAGravityTop
kCAGravityBottom
kCAGravityLeft
kCAGravityRight
kCAGravityTopLeft
kCAGravityTopRight
kCAGravityBottomLeft
kCAGravityBottomRight
kCAGravityResize
kCAGravityResizeAspect
kCAGravityResizeAspectFill
*/
//相当于UIImageView的contentMode属性，可以设置图片显示样式
self.blueView.layer.contentsGravity = kCAGravityResizeAspect
//contentsScale定义了CGImage的像素尺寸和视图大小比例，默认情况下为1.0
//如何理解这句话，我是这么理解的，屏幕有非retina屏幕(像素和尺寸是1：1)
//还有retina屏幕，像素和尺寸比是2：1
//现在还出现了@3x图片，像素和尺寸比理论上是3：1，但实际上在显示的时候，苹果进行了调整（具体可以看ios9的新特性）
//那么，像我下面这么写，就是说像素点按照屏幕来调整，如果是非retaina，那么就是1：1，如果是retina，就是2：1
self.blueView.layer.contentsScale = UIScreen.mainScreen().scale
self.blueView.layer.masksToBounds = true
}
其实自定义CALayer也是很简单的事情，代码如下：
func drawCircleOnLayer() {
let layer = CALayer()
layer.frame = CGRectMake(50.0, 50.0, 100.0, 100.0)
layer.backgroundColor = UIColor.blueColor().CGColor
layer.delegate = self
// layer.contentsScale = UIScreen.mainScreen().scale
self.view.layer.addSublayer(layer)
layer.display()
}
//MARK:- CALayerDelegate
override func drawLayer(layer: CALayer, inContext ctx: CGContext) {
CGContextSetLineWidth(ctx, 10)
CGContextSetStrokeColorWithColor(ctx, UIColor.redColor().CGColor)
CGContextAddEllipseInRect(ctx, layer.bounds)
CGContextStrokePath(ctx)
}
上面的代码通过使用Core Graphics来绘图。CALayer有一个delegate属性，实现了CALayerDelegate协议，但是这个协议是个非正式的协议，可以看到CALayer的这个属性的声明:
weak public var delegate: AnyObject?
然后在这个方法里面绘制想要的图像，从而达到自定义CALayer的效果：
override func drawLayer(layer: CALayer, inContext ctx: CGContext) {
CGContextSetLineWidth(ctx, 10)
CGContextSetStrokeColorWithColor(ctx, UIColor.redColor().CGColor)
CGContextAddEllipseInRect(ctx, layer.bounds)
CGContextStrokePath(ctx)
}
UIView有一个drawRect:方法，在这个方法里面拿到当前的CGContext，进行绘画。它的底层还是通过调用CALayer的一系列方法绘制东西。
C. CALayer的布局
UIView有frame、bounds、center这三个重要的布局属性，对应的CALayer也有frame、bounds、position这三个布局属性。layer的position与view的center代表的是同样的值。
如下图的关系：
anchorPoint（锚点）这个属性必须要好好说说。anchorPoint决定了view和layer的显示位置，它的取值是CGPoint(0~~1, 0~~1)。默认是为(0.5, 0.5)，默认意味着它就在中点。那么，如果它不在中点呢？如下图:
注意到，当anchorPoint发生改变的时候，frame改变了，但是position并不会发生变化。也就是说，anchorPoint决定了view和layer的位置如何显示。
那么，在生命场合需要改变anchorPoint呢？
加入现在需要做一个钟表的应用，有三根针，时针、分针、秒针，他们需要转动，转动过程中需要动画。如果anchorPoint为默认值，也就是中点的话，会如下面这样旋转:
围绕着三根针的重点旋转，这明显不是我们所想要。但如果将anchorPoint设置为(0.5, 0.9)就不一样了，它会这么旋转:
代码：
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var hourView: UIImageView!
@IBOutlet weak var minuteView: UIImageView!
@IBOutlet weak var secondView: UIImageView!
@IBOutlet weak var imageView: UIImageView!
var timer: NSTimer?
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
self.view.insertSubview(imageView, atIndex: 0)
self.hourView.layer.anchorPoint = CGPointMake(0.5, 0.9)
self.minuteView.layer.anchorPoint = CGPointMake(0.5, 0.9)
self.secondView.layer.anchorPoint = CGPointMake(0.5, 0.9)
self.addTimer()
}
func addTimer() {
self.updateWithAnimate(false)
self.timer = NSTimer.scheduledTimerWithTimeInterval(1, target: self, selector: Selector("tick"), userInfo: nil, repeats: true)
NSRunLoop.mainRunLoop().addTimer(self.timer!, forMode: NSRunLoopCommonModes)
}
func removeTimer() {
self.timer!.invalidate()
self.timer = nil
}
func tick() {
self.updateWithAnimate(true)
}
@objc func updateWithAnimate(animated: Bool) {
let calendar = NSCalendar.currentCalendar()
let unit: NSCalendarUnit = [NSCalendarUnit.Hour, NSCalendarUnit.Minute, NSCalendarUnit.Second]
let nowComponent = calendar.components(unit, fromDate: NSDate())
let hourAngle = CGFloat(nowComponent.hour) / 12.0 * CGFloat(M_PI) * 2.0
let minuteAngle = CGFloat(nowComponent.minute) / 60.0 * CGFloat(M_PI) * 2.0
let secondAngle = CGFloat(nowComponent.second) / 60.0 * CGFloat(M_PI) * 2.0
// print("\(hourAngle) \(minuteAngle) \(secondAngle) \(M_PI)")
self.setAngle(hourAngle, forView: hourView, animated: animated)
self.setAngle(minuteAngle, forView: minuteView, animated: animated)
self.setAngle(secondAngle, forView: secondView, animated: animated)
}
func setAngle(angle: CGFloat, forView view: UIView, animated: Bool) {
var transform: CATransform3D = CATransform3DMakeRotation(angle, 0, 0, 1)
if (animated) {
let basicAnimate = CABasicAnimation(keyPath: "transform")
basicAnimate.toValue = NSValue(CATransform3D: transform)
self.updateWithAnimate(false)
basicAnimate.duration = 0.5
basicAnimate.delegate = self
basicAnimate.fillMode = kCAFillModeForwards
// basicAnimate.removedOnCompletion = false
basicAnimate.setValue(view, forKeyPath: "view")
view.layer.addAnimation(basicAnimate, forKey: nil)
}
else {
view.layer.transform = transform
}
}
override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
// print("animationDidStop")
let view = anim.valueForKeyPath("view") as! UIView
let tempAnim = anim as? CABasicAnimation
view.layer.transform = (tempAnim?.toValue?.CATransform3DValue)!
}
deinit {
self.removeTimer()
}
}
（它的github地址：https://github.com/wzpziyi1/Core-Animation-Test-One）
这个Demo里面的所用到的动画，在后面会详细提及。在这里，主要是需要知道anchorPoint在做动画时的巨大价值。
D. CALayer处理事件
与UIView类似，CALayer也提供了一系列的坐标转换方法，使用这些方法，可以使得我们可以较为方便的处理layer层面的事件响应：
public func convertPoint(p: CGPoint, fromLayer l: CALayer?) -> CGPoint
public func convertPoint(p: CGPoint, toLayer l: CALayer?) -> CGPoint
public func convertRect(r: CGRect, fromLayer l: CALayer?) -> CGRect
public func convertRect(r: CGRect, toLayer l: CALayer?) -> CGRect
需要着重提下hitTest:方法，它使得layer可以进行事件处理，这么说吧，正是因为它的存在，才可以判断，一个点击或者触摸等事件是发生在哪个layer上面。示例代码如下：
import UIKit
class ViewController: UIViewController, UIAlertViewDelegate {
weak private var redLayer: CALayer!
weak private var blueLayer: CALayer!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let redLayer = CALayer()
redLayer.frame = CGRectMake(100, 50, 100, 100)
redLayer.backgroundColor = UIColor.redColor().CGColor
self.view.layer.addSublayer(redLayer)
self.redLayer = redLayer
let blueLayer = CALayer()
blueLayer.frame = CGRectMake(100, 200, 100, 100)
blueLayer.backgroundColor = UIColor.blueColor().CGColor
self.view.layer.addSublayer(blueLayer)
self.blueLayer = blueLayer
}
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
let touch = touches.first
let point = touch?.locationInView(self.view)
let layer = self.view.layer.hitTest(point!)
if (layer == self.redLayer) {
let alertView = UIAlertView(title: "点击了redLayer", message: "", delegate: self, cancelButtonTitle: nil, otherButtonTitles: "确定")
alertView.show()
}
else if (layer == self.blueLayer) {
let alertView = UIAlertView(title: "点击了blueLayer", message: "", delegate: self, cancelButtonTitle: nil, otherButtonTitles: "确定")
alertView.show()
}
}
}
- 动画的基础知识
这里会说一些动画轨迹的具体实现，补充UIBezierPath的使用。如果想要你的动画沿着所写的曲线运动，那么这些基础知识是不可缺少的。
A. UIBezierPath
如果熟悉Core Graphics，那么就可以很快掌握它的用法，实际上它就是对Core Graphics的一个封装。示例代码：
import UIKit
class ZYView: UIView {
override func drawRect(rect: CGRect) {
let path = UIBezierPath()
path.addArcWithCenter(CGPointMake(150, 150), radius: 50, startAngle: 0, endAngle: CGFloat(M_PI * 2.0), clockwise: true)
path.lineWidth = 5
UIColor.blueColor().setStroke()
UIColor.redColor().setFill()
path.stroke()
path.fill()
}
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// redView.backgroundColor = UIColor.redColor()
// self.view.addSubview(redView)
self.view.addSubview(ZYView(frame: CGRectMake(100, 100, 300, 300)))
}
可以得到下面的界面：
那么，现在加入有一个需求，一张图片想要绕着圆转一圈的动画，如何实现？其实只需要定义好运动的轨迹，然后告诉animate给我按照这个轨迹进行运动即可。代码：
import UIKit
class ViewController: UIViewController {
var redView: UIView = UIView(frame: CGRectMake(40, 200, 50, 50))
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
redView.backgroundColor = UIColor.redColor()
self.view.addSubview(redView)
}
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
self.animate1()
}
func animate1() {
redView.layer.cornerRadius = redView.frame.width / 2
redView.layer.anchorPoint = CGPointMake(0.5, 0.5)
let keyFrameAnimate = CAKeyframeAnimation(keyPath: "position")
let path = UIBezierPath()
path.addArcWithCenter(CGPointMake(150, 150), radius: 100, startAngle: 0, endAngle: CGFloat(M_PI * 2.0), clockwise: true)
keyFrameAnimate.path = path.CGPath
keyFrameAnimate.duration = 3
keyFrameAnimate.fillMode = kCAFillModeForwards
keyFrameAnimate.delegate = self
keyFrameAnimate.removedOnCompletion = false
keyFrameAnimate.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
self.redView.layer.addAnimation(keyFrameAnimate, forKey: "aaa")
}
}
可以看到这样的代码：
let path = UIBezierPath()
path.addArcWithCenter(CGPointMake(150, 150), radius: 100, startAngle: 0, endAngle: CGFloat(M_PI * 2.0), clockwise: true)
keyFrameAnimate.path = path.CGPath
正是上面提到的，给animate提供了一条运动轨迹。
类似的，沿着圆运动的轨迹已经可以定义了，那么沿着四边形运动的轨迹也是相似的。那么，沿着曲线运动的轨迹如何定义呢？
B. 贝塞尔曲线
如果你想要定义曲线运动的轨迹，那么这个知识点是必须学习的。
这是我看到的一份总结贝塞尔曲线很好的博客：http://blog.csdn.net/guo_hongjun1611/article/details/7842110
下面的关于曲线的总结也是转载自上面的博客。
Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义：起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。 1962年，法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就用他的姓氏来命名，称为贝塞尔曲线。
以下公式中：B(t)为t时间下 点的坐标；
P0为起点,Pn为终点,Pi为控制点
一阶贝塞尔曲线：
意义：由 P0 至 P1 的连续点， 描述的一条线段
二阶贝塞尔曲线：
原理：由 P0 至 P1 的连续点 Q0，描述一条线段。
由 P1 至 P2 的连续点 Q1，描述一条线段。
由 Q0 至 Q1 的连续点 B(t)，描述一条二次贝塞尔曲线。
经验：P1-P0为曲线在P0处的切线。
三阶贝塞尔曲线：
- CGAffineTransform与CATransform3D
已经知道了运动轨迹的定义，那么该如何让layer沿着动画轨迹运动呢，如果在运动过程中，还有能缩放、旋转呢？
A. CGAffineTransform
从CG就可以看出它是属于Core Graphics的东西，实际上UIView的transform属性就是CGAffineTransform类型，用它可以做二维平面上的缩放、旋转、平移。
下面的这几个函数都创建了一个CGAffineTransform实例：
//平移，输入需要平移的x,y值即可
public func CGAffineTransformMakeTranslation(tx: CGFloat, _ ty: CGFloat) -> CGAffineTransform
//缩放x方向缩放的倍数，y方向的缩放倍数，默认都为1
public func CGAffineTransformMakeScale(sx: CGFloat, _ sy: CGFloat) -> CGAffineTransform
//旋转，angle放弧度
public func CGAffineTransformMakeRotation(angle: CGFloat) -> CGAffineTransform
当然还有一些其他的接口，并不都一一写出，下面是一份简单的实例代码，一边缩放、一边平移：
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var redView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
}
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
self.transformTest2D()
}
func transformTest2D() {
UIView.animateWithDuration(2) { () -> Void in
let transform = CGAffineTransformMakeScale(2, 2)
//注意，本意只是想平移200的，但是由于是先缩放后平移的，如果不除以缩放系数的话，会达不到本意
self.redView.transform = CGAffineTransformTranslate(transform, 200 / 2, 200 / 2)
}
}
}
它可以做到让图层在三维空间内平移、旋转等。
CATransform3D是一个4*4的矩阵：
与CGAffineTransform类似，它也提供了一系列的接口让我们得以实例化一个CATransform3D实例：
public func CATransform3DMakeTranslation(tx: CGFloat, _ ty: CGFloat, _ tz: CGFloat) -> CATransform3D
public func CATransform3DMakeScale(sx: CGFloat, _ sy: CGFloat, _ sz: CGFloat) -> CATransform3D
public func CATransform3DMakeRotation(angle: CGFloat, _ x: CGFloat, _ y: CGFloat, _ z: CGFloat) -> CATransform3D
多了一个z值。同样的，它也提一系列用来做混合动画的接口：
public func CATransform3DTranslate(t: CATransform3D, _ tx: CGFloat, _ ty: CGFloat, _ tz: CGFloat) -> CATransform3D
public func CATransform3DScale(t: CATransform3D, _ sx: CGFloat, _ sy: CGFloat, _ sz: CGFloat) -> CATransform3D
@available(iOS 2.0, *)
public func CATransform3DRotate(t: CATransform3D, _ angle: CGFloat, _ x: CGFloat, _ y: CGFloat, _ z: CGFloat) -> CATransform3D
示例代码：
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var redView: UIView!
@IBOutlet weak var imageView1: UIImageView!
@IBOutlet weak var imageView2: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
}
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
self.transformTest3D()
}
func transformTest3D() {
UIView.animateWithDuration(2, animations: { () -> Void in
//绕Y轴旋转四分之三PI
self.imageView1.layer.transform = CATransform3DMakeRotation(CGFloat(M_PI * 3.0 / 4.0), 0, 1, 0)
//绕Y轴旋转四分之一PI
self.imageView2.layer.transform = CATransform3DMakeRotation(-CGFloat(M_PI_4), 0, 1, 0)
}) { (finish: Bool) -> Void in
dispatch_after(dispatch_time_t(dispatch_time(DISPATCH_TIME_NOW, (Int64)(2 * NSEC_PER_SEC))), dispatch_get_main_queue(), { () -> Void in
//旋转完成2s之后，将他们各自的transform恢复原始值
//需要注意，CGAffineTransform也有这个CGAffineTransformIdentity，前面忘说了，效果是一样的
self.imageView1.layer.transform = CATransform3DIdentity
self.imageView2.layer.transform = CATransform3DIdentity
})
}
}
}
CATransform3D还有一个很有意思的m34属性，我们通过调整这个属性可以做一些很nice的视觉。恩，就是通过设置它的值，可以做出一些很好的透视效果。m34的默认值是0，我们可以设置m34的值为(-1/d)来做相应的透视效果，d的值一般在500.0~~1000.0之间效果就很不错了，用它写了一个打开门的动画，设置m34与不设置m34的区别简直就是天差地别。
代码（代码太少了，上传到github实在浪费时间，我的建议是，百度一张门的图片，然后尝试注释掉m34的设置与不注释m34的视觉区别）：
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) CALayer *doorLayer;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.doorLayer = [CALayer layer];
self.doorLayer.frame = CGRectMake(0, 0, 128, 256);
self.doorLayer.position = CGPointMake(150 - 64, 300);
self.doorLayer.anchorPoint = CGPointMake(0, 0.5);
self.doorLayer.contents = (__bridge id)[UIImage imageNamed:@"Door.png"].CGImage;
[self.view.layer addSublayer:self.doorLayer];
CATransform3D perspective = CATransform3DIdentity;
//设置m34，可以尝试注释掉，看看与不注销的视觉差距
perspective.m34 = -1.0 / 500.0;
self.view.layer.sublayerTransform = perspective;
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] init];
[pan addTarget:self action:@selector(pan:)];
[self.view addGestureRecognizer:pan];
self.doorLayer.speed = 0.0;
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"transform";
animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(-M_PI_2, 0, 1, 0)];
animation.duration = 1.0;
[self.doorLayer addAnimation:animation forKey:nil];
}
- (void)pan:(UIPanGestureRecognizer *)pan
{
CGFloat x = [pan translationInView:self.view].x;
x /= 200.0f;
CFTimeInterval timeOffset = self.doorLayer.timeOffset;
timeOffset = MIN(0.999, MAX(0.0, timeOffset - x));
self.doorLayer.timeOffset = timeOffset;
[pan setTranslation:CGPointZero inView:self.view];
}
@end
oc代码，没有改写成Swift代码，这是可以手势控制门打开或者关闭动画的代码。
图片：
动画在学习动画之前，有一副图是必须提到的：
CAAnimation的继承结构。而我这次所深入学习的是CABasicAnimation、CAKeyFrameAnimation、CAAnimationGroup、CATransition。
CAAnimation:
所有动画对象的父类，负责控制动画的持续时间和速度，是个抽象类，不能直接使用，应该使用它具体的子类
duration：动画的持续时间
repeatCount：动画的重复次数
repeatDuration：动画的重复时间
removedOnCompletion：默认为YES，代表动画执行完毕后就从图层上移除，图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态，那就设置为NO，不过还要设置fillMode为kCAFillModeForwards
fillMode：决定当前对象在非active时间段的行为.比如动画开始之前,动画结束之后
beginTime：可以用来设置动画延迟执行时间，若想延迟2s，就设置为CACurrentMediaTime()+2，CACurrentMediaTime()为图层的当前时间
timingFunction：速度控制函数，控制动画运行的节奏
delegate：动画代理
keyPath: 通过指定CALayer的一个属性名称达到相应的动画效果，比如说，指定"position"为keyPath，就修改CALayer的position属性值，以达到平移的动画效果
A. CABasicAnimation
CAPropertyAnimation的子类
属性解析:
fromValue：keyPath相应属性的初始值
toValue：keyPath相应属性的结束值
随着动画的进行，在长度为duration的持续时间内，keyPath相应属性的值从fromValue渐渐地变为toValue
代码：
import UIKit
class ViewController: UIViewController {
weak private var contentView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let view = UIView(frame: CGRectMake(100, 100, 100, 100))
view.backgroundColor = UIColor.redColor()
self.view.addSubview(view)
self.contentView = view
self.contentView.layer.anchorPoint = CGPointZero
}
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
self.animateOfTransform3D()
}
//3D旋转
func animateOfTransform3D() {
let animate = CABasicAnimation(keyPath: "transform")
animate.toValue = NSValue(CATransform3D: CATransform3DMakeRotation(CGFloat(M_PI_4), 0, 1, 0))
animate.duration = 2
animate.removedOnCompletion = false
animate.fillMode = kCAFillModeForwards
animate.delegate = self
self.contentView.layer.addAnimation(animate, forKey: "aaa")
}
//缩放动画
func animateOfScale() {
let animate = CABasicAnimation(keyPath: "bounds")
animate.toValue = NSValue(CGRect: CGRectMake(100, 100, 200, 200))
animate.duration = 2
animate.removedOnCompletion = false
animate.fillMode = kCAFillModeForwards
animate.delegate = self
self.contentView.layer.addAnimation(animate, forKey: "bcd")
}
//平移动画
func animateOfTranslation() {
//keyPath放需要执行怎么样的动画
let animate = CABasicAnimation(keyPath: "position")
//layer从哪里来
animate.fromValue = NSValue(CGPoint: CGPointMake(100, 100))
//到哪去
animate.toValue = NSValue(CGPoint: CGPointMake(200, 200))
// 在当前位置的基础上增加多少
// animate.byValue = [NSValue valueWithCGPoint:CGPointMake(0, 300)];
animate.duration = 1
//设置动画执行完毕之后不删除动画
animate.removedOnCompletion = false
//设置保存动画的最新状态
animate.fillMode = kCAFillModeForwards
animate.delegate = self
self.contentView.layer.addAnimation(animate, forKey: "abc")
}
override func animationDidStart(anim: CAAnimation) {
print("animationDidStart")
}
override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
print("animationDidStop")
}
}
B. CAKeyFrameAnimation
CApropertyAnimation的子类，跟CABasicAnimation的区别是：CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值
属性解析：
values：就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧
path：可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略
keyTimes：可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的
CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation
代码：
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var redView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// self.redView.layer.anchorPoint = CGPointZero
}
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
self.animateTest2()
}
@IBAction func clickBtn(sender: AnyObject) {
self.redView.layer.removeAnimationForKey("aaa")
}
//无限摇摆
func animateTest2() {
// self.redView.layer.anchorPoint = CGPointMake(self.redView.frame.width / 2, self.redView.frame.height / 2)
let keyAnimate = CAKeyframeAnimation(keyPath: "transform.rotation")
keyAnimate.values = [ -2.14 / 20, 2.14 / 20, -2.14 / 20];
keyAnimate.removedOnCompletion = false
keyAnimate.fillMode = kCAFillModeForwards
keyAnimate.duration = 0.05
keyAnimate.delegate = self
keyAnimate.repeatCount = Float(CGFloat.max)
self.redView.layer.addAnimation(keyAnimate, forKey: "aaa")
}
//围绕一个圆进行动画
func animateTest1() {
let keyAnimate = CAKeyframeAnimation(keyPath: "position")
var path = CGPathCreateMutable()
CGPathAddEllipseInRect(path, nil, CGRectMake(0, 100, 200, 200))
keyAnimate.path = path
//设置动画的进度快慢，可以先快后慢，先慢后快等
keyAnimate.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
keyAnimate.removedOnCompletion = false
keyAnimate.fillMode = kCAFillModeForwards
keyAnimate.duration = 2
keyAnimate.delegate = self
self.redView.layer.addAnimation(keyAnimate, forKey: "aaa")
}
func animateTest() {
let keyAnimate = CAKeyframeAnimation(keyPath: "position")
let v1 = NSValue(CGPoint: CGPointMake(self.redView.frame.origin.x, self.redView.frame.origin.y))
let v2 = NSValue(CGPoint: CGPointMake(100, 200))
let v3 = NSValue(CGPoint: CGPointMake(0, 200))
let v4 = NSValue(CGPoint: CGPointMake(0, 100))
let v5 = NSValue(CGPoint: CGPointMake(self.redView.frame.origin.x, self.redView.frame.origin.y))
keyAnimate.values = [v1, v2, v3, v4, v5]
//设置动画的进度快慢，可以先快后慢，先慢后快等
keyAnimate.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
keyAnimate.removedOnCompletion = false
keyAnimate.fillMode = kCAFillModeForwards
keyAnimate.duration = 2
keyAnimate.delegate = self
self.redView.layer.addAnimation(keyAnimate, forKey: "aaa")
}
override func animationDidStart(anim: CAAnimation) {
print("animationDidStart")
}
override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
print("animationDidStop")
}
}
前面提到了，沿着贝塞尔曲线的动画：
func animateTestThree() {
let path = UIBezierPath()
path.moveToPoint(CGPointMake(0, 150))
//这是二次贝塞尔曲线的接口，利用此接口，可以定义一条贝塞尔曲线轨迹
path.addCurveToPoint(CGPointMake(400, 150), controlPoint1: CGPointMake(75, 0), controlPoint2: CGPointMake(225, 300))
let plane = UIImageView(frame: CGRectMake(0, 0, 85, 60))
//这里可以放一张飞机图片
plane.image = UIImage(named: "F2005071315255000000")
plane.center = CGPointMake(0, 150)
plane.layer.anchorPoint = CGPointMake(0.5, 0.5)
self.view.addSubview(plane)
let animate = CAKeyframeAnimation(keyPath: "position")
animate.duration = 4
animate.path = path.CGPath
animate.fillMode = kCAFillModeForwards
animate.removedOnCompletion = false
animate.delegate = self
//设置此属性，可以使得飞机在飞行时自动调整角度
animate.rotationMode = kCAAnimationRotateAuto
// animate.setValue(plane.layer, forKey: "plane.layer")
plane.layer.addAnimation(animate, forKey: "animateTestThree")
}
图片：
C. CAAnimationGroup
CAAnimation的子类，可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行
属性解析：
animations：用来保存一组动画对象的NSArray
默认情况下，一组动画对象是同时运行的，也可以通过设置动画对象的beginTime属性来更改动画的开始时间
代码：
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var redView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
// {
// // 平移动画
// CABasicAnimation *a1 = [CABasicAnimation animation];
// a1.keyPath = @"transform.translation.y";
// a1.toValue = @(100);
// // 缩放动画
// CABasicAnimation *a2 = [CABasicAnimation animation];
// a2.keyPath = @"transform.scale";
// a2.toValue = @(0.0);
// // 旋转动画
// CABasicAnimation *a3 = [CABasicAnimation animation];
// a3.keyPath = @"transform.rotation";
// a3.toValue = @(M_PI_2);
// }
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
let basicAnimate = CABasicAnimation(keyPath: "transform.scale")
basicAnimate.toValue = 1.5
let keyFrameAnimate = CAKeyframeAnimation(keyPath: "position")
let path = CGPathCreateMutable()
CGPathAddEllipseInRect(path, nil, CGRectMake(100, 200, 150, 150))
keyFrameAnimate.path = path
let animateGroup = CAAnimationGroup()
animateGroup.animations = [basicAnimate, keyFrameAnimate]
animateGroup.duration = 2
animateGroup.fillMode = kCAFillModeForwards
animateGroup.removedOnCompletion = false
self.redView.layer.addAnimation(animateGroup, forKey: "aaa")
}
}
D. CATransition
CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点
UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果
属性解析:
type：动画过渡类型
subtype：动画过渡方向
startProgress：动画起点(在整体动画的百分比)
endProgress：动画终点(在整体动画的百分比)
代码：
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var imageView: UIImageView!
var index: Int = 0
private var _images: Array<UIImage>?
var images: Array<UIImage>? {
get{
if (_images == nil) {
_images = Array<UIImage>()
for(var i = 1; i <= 7; i++) {
let image = UIImage(named: "\(i)")
_images?.append(image!)
}
}
return _images
}
set{
_images = newValue
}
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
self.imageView.image = self.images![0]
}
@IBAction func next(sender: AnyObject) {
self.index++
if (self.index == 7) {
self.index = 0
}
self.imageView.image = self.images![self.index]
let transition = CATransition()
//动画过渡类型
transition.type = "cube"
//动画过渡类型方向
transition.subtype = kCATransitionFromLeft
transition.duration = 1
self.imageView.layer.addAnimation(transition, forKey: nil)
}
@IBAction func previous(sender: AnyObject) {
self.index--
if (self.index < 0) {
self.index = 6
}
self.imageView.image = self.images![self.index]
let transition = CATransition()
transition.type = "cube"
transition.subtype = kCATransitionFromRight
transition.duration = 1
self.imageView.layer.addAnimation(transition, forKey: nil)
}
}
第一篇就到这里结束吧，下一篇打算记录自定义UITabBarController以及presented一个ViewController的转场动画，以及自定义动画的缓冲函数、定时动画、性能优化等方面的只是。
|
客服电话
APP下载
官方微信
请发表评论