CALayer动画实践(二):CAReplicatorLayer的用法

上一篇文章经过两个动画示例带你们了解和认识了CALayer动画,包括如何使用CAShapeLayer、CABasicAnimation、CAAnimationGroup等。在这篇文章中,依然会经过两个示例向你们讲解更多CALayer动画的知识。swift

老规矩,先让咱们看看最终要实现的动画效果:app

常常听音乐的人对第一个动画效果确定有会以为很眼熟,相似播放音乐时音频高低起伏的动画,这种动画在应用中常被用做标识正在播放音乐或广播。第二个动画依然是一个等待加载的动画,在个人印象中确定是有应用使用过,具体的已经记不清了。下面就让咱们来实现这两个动画吧。动画

Replicator Animation

新建一个项目,名为ReplicatorAnimation,打开Main.storyboard,添加一个UIView,颜色位置按你们喜爱设定:spa

添加该UIView在ViewController.swift中的Outlet:.net

接下来咱们在ViewController.swift中添加一个方法firstReplicatorAnimation(),在该方法中编写以下代码:code

[cpp] view plaincopyorm

  1. let replicatorLayer = CAReplicatorLayer()  ip

  2. replicatorLayer.bounds = CGRect(x: replicatorAnimationView.frame.origin.x, y: replicatorAnimationView.frame.origin.y, width: replicatorAnimationView.frame.size.width, height: replicatorAnimationView.frame.size.height)  ci

  3. replicatorLayer.anchorPoint = CGPoint(x: 0, y: 0)  get

  4. replicatorLayer.backgroundColor = UIColor.lightGrayColor().CGColor  

  5. replicatorAnimationView.layer.addSublayer(replicatorLayer)  

这里出现的CAReplicatorLayer是一个新面孔,它也是CALayer的子类,正如它的名称同样,CAReplicatorLayer能够对它本身的子Layer进行复制操做。建立了CAReplicatorLayer实例后,设置了它的尺寸大小、位置、锚点位置、背景色,而且将它添加到了replicatorAnimationView的Layer中:

这里要啰嗦几句,Layer的默认锚点坐标是(0.5, 0.5),也就是Layer的中心点位置,而Layer的position又是根据锚点计算的,因此若是你设置Layer的position属性为(10, 10),就至关于设置了Layer的中心位置为(10, 10),并非你指望的左上角位置。因此若是Layer想使用它父视图的坐标位置,就须要将锚点位置设置为(0, 0),这样一来Layer的position属性标识的就是Layer左上角的位置:

而后咱们继续在firstReplicatorAnimation()方法中添加代码:

[cpp] view plaincopy

  1. let rectangle = CALayer()  

  2. rectangle.bounds = CGRect(x: 0, y: 0, width: 30, height: 90)  

  3. rectangle.anchorPoint = CGPoint(x: 0, y: 0)  

  4. rectangle.position = CGPoint(x: replicatorAnimationView.frame.origin.x + 10, y: replicatorAnimationView.frame.origin.y + 110)  

  5. rectangle.cornerRadius = 2  

  6. rectangle.backgroundColor = UIColor.whiteColor().CGColor  

  7. replicatorLayer.addSublayer(rectangle)  

经过上面的代码,再次建立了一个Layer,此次使用的是CALayer,由于咱们只须要一个很普通的Layer,为其设置位置、尺寸、背景色、圆角属性,而后添加在replicatorLayer中:

动画的主体之一已经绘制好了,下面咱们让它动起来。在上述代码后面,接着添加以下代码:

[cpp] view plaincopy

  1. let moveRectangle = CABasicAnimation(keyPath: "position.y")  

  2. moveRectangle.toValue = rectangle.position.y - 70  

  3. moveRectangle.duration = 0.7  

  4. moveRectangle.autoreverses = true  

  5. moveRectangle.repeatCount = HUGE  

  6. rectangle.addAnimation(moveRectangle, forKey: nil)  

首先咱们建立了按Y轴移动的动画实例,而后设置了移动的目标位置,动画持续时间,重复次数设置为无限大。这里有一个属性你们可能比较陌生,那就是autoreverses,这个属性为Bool类型,设置为true时,开启自动反向执行动画,好比示例中的白色长方形的移动动画为向上移动50个像素,如过autoreverses设置为false,那么动画结束后,会根据重复次数,白色长方形从新回到初始位置,继续向上移动,若是autoreverses设置为true,则当动画结束后,白色长方形会继续向下移动至初始位置,而后再开始第二次的向上移动动画。

编译运行看看效果:

至此,你们应该也已经看出来了,这个白色的长方形就是动画中第一个上下移动的白色长方形,那么后两个如何建立呢?还须要再写两遍上面的代码吗?请你们在下面的文章中寻找。

在上述代码下面再添加一行代码:

[cpp] view plaincopy

  1. replicatorLayer.instanceCount = 3  

显而易见,这是CAReplicatorLayer的能力了,这行代码的意思是将replicatorLayer的子Layer复制3份,复制Layer与原Layer的大小、位置、颜色、Layer上的动画等等全部属性都如出一辙,因此这时编译运行代码咱们看不到任何不一样的效果,由于三个白色长方形是重合在一块儿的,因此咱们须要设置每一个白色长方形的间隔:

[cpp] view plaincopy

  1. replicatorLayer.instanceTransform = CATransform3DMakeTranslation(40, 0, 0)  

这行代码涉及到CAReplicatorLayer的另外一个属性instanceTransform,它的做用是设置每一个子Layer如何变化。CATransform3DMakeTranslation这个类的含义是使Layer根据X、Y、Z轴进行平移。如今再编译运行看看效果如何:

如今三个白色长方形的运动轨迹和时刻都是一直的,这显然不是咱们想要的结果,咱们须要三个白色长方形有上下起伏的视觉效果,因此咱们继续添加一行代码:

[cpp] view plaincopy

  1. replicatorLayer.instanceDelay = 0.3  

instanceDelay这个属性使CAReplicatorLayer中的每一个子Layer的动画起始时间逐个递增。这里咱们设置为0.3秒,也就是第一个长方形先执行动画,过0.3秒后第二个开始执行动画,再过0.3秒后第三个开始执行动画。咱们编译运行看看效果:

显然咱们只想显示replicatorLayer区域里的内容,咱们并不想看到超出它边界的内容,因此咱们再添加一行代码:

[cpp] view plaincopy

  1. replicatorLayer.masksToBounds = true  

masksToBounds是CALayer的属性,做用是将Layer视为一个遮罩,只显示遮罩区域内的内容。最后咱们回到初始化replicatorLayer的地方,找到这行代码replicatorLayer.backgroundColor = UIColor.lightGrayColor().CGColor,将replicatorLayer的背景色改成无色replicatorLayer.backgroundColor = UIColor.clearColor().CGColor。再次编译运行看看最终效果:

Replicator Indicator Animation

CAReplicatorLayer的功能是很强大的,这一节将经过另外一个加载动画的实例向你们介绍它的其余特性。

首先打开Main.storyboard,拖进一个新的UIView,位置颜色随你们喜爱:

随后添加该UIView在ViewController.swift中的Outlet activityIndicatorView

而后在ViewController.swift中添加一个方法activityIndicatorAnimation,和上一个动画示例同样,咱们先建立一个CAReplicatorLayer:

[cpp] view plaincopy

  1. let replicatorLayer = CAReplicatorLayer()  

  2. replicatorLayer.bounds = CGRect(x: 0, y: 0, width: activityIndicatorView.frame.size.width, height: activityIndicatorView.frame.size.height)  

  3. replicatorLayer.position = CGPoint(x: activityIndicatorView.frame.size.width/2, y: activityIndicatorView.frame.size.height/2)  

  4. replicatorLayer.backgroundColor = UIColor.lightGrayColor().CGColor  

  5. activityIndicatorView.layer.addSublayer(replicatorLayer)  

上述代码和上个示例中的差很少,惟一不一样的就是replicatorLayer的锚点使用的是默认值,即锚点就是中点,position属性表明亦是中点,因此将position属性设置为父视图的中点便可。这里意在让你们多多理解CALayer中anchorPointposition属性。接下来添加以下代码:

[cpp] view plaincopy

  1. let circle = CALayer()  

  2. circle.bounds = CGRect(x: 0, y: 0, width: 15, height: 15)  

  3. circle.position = CGPoint(x: activityIndicatorView.frame.size.width/2, y: activityIndicatorView.frame.size.height/2 - 55)  

  4. circle.cornerRadius = 7.5  

  5. circle.backgroundColor = UIColor.whiteColor().CGColor  

  6. replicatorLayer.addSublayer(circle)  

上述代码的目的是用CALayer建立一个圆形,其实CALayer建立出的形状默认是矩形,可是把四个角的弧度设置为边宽的一半,矩形就变成了圆形。将这个圆形的位置设置在父Layer的中间靠上位置,背景色设置为白色。此时该圆形就是文章开头效果图中第二个动画里的主体了:

不过在动画中咱们看到有许多个小圆形组成一个大圆,若是重复上面的代码,一个一个设置位置,那绝对是使人发指的行为,好在咱们有CAReplicatorLayer帮助咱们实现,下面就来看看如何使用CAReplicatorLayer复制子Layer,并让子Layer造成一个圆形。让咱们接着添加以下代码:

[cpp] view plaincopy

  1. replicatorLayer.instanceCount = 15  

  2. let angle = CGFloat(2 * M_PI) / CGFloat(15)  

  3. replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1)  

上述的代码中,首先对子Layer,也就是白色圆形复制了15份。而后将360°除以15份,算出每个圆形针对它前一个圆形应该偏移的角度。最后咱们用到了CATransform3DMakeRotation,它一样是CATransform3D的一个结构,含义是使Layer在X、Y、Z轴根据给定的角度旋转。这样咱们复制的15份圆形就会按照咱们计算的角度排列,并造成一个大圆:

接下来让咱们分析一下这个动画,总体看上去感受像一颗流星拖着尾巴在不停的转圈,但细看每个小圆点,实际上是在不停的进行放大缩小的动画,只不过每一个小圆点的动画对于它前一个小圆点的动画有必定的延迟。因此首先咱们须要实现小圆点放大缩小的动画,在上述代码后面接着添加以下代码:

[cpp] view plaincopy

  1. let scale = CABasicAnimation(keyPath: "transform.scale")  

  2. scale.fromValue = 1  

  3. scale.toValue = 0.1  

  4. scale.duration = 1  

  5. scale.repeatCount = HUGE  

  6. circle.addAnimation(scale, forKey: nil)  

首先建立一个按比例缩放类型的动画,设置起始比例为1,也就是当前大小。再设置但愿缩放到的比例为0.1。动画持续时间为1秒,重复无限次。最后将该动画添加在小圆点中。编译运行看看效果:

目前每一个小圆点是同时执行动画,咱们须要设置小圆点的动画延迟时间,接着添加以下代码:

[cpp] view plaincopy

  1. replicatorLayer.instanceDelay = 1/15  

这里为何是1/15呢,由于整个动画的时间是由每一个小圆点的动画时间决定的,这里也就是1秒,全部小圆点的延迟时间加起来要等于整个动画的持续时间,因此这里就是用1秒除以小圆点的数量15。编译运行看看效果:

从效果图中能够看到,刚开始的动画不是很天然,那是由于小圆点的初始比例是1,因此一开始会先看到小圆点,而后才会慢慢开始正常的动画。这个很好解决,咱们让小圆点的初始比例为0.1,也就是刚开始看不到小圆点,这样就能够避免这个状况了,咱们接着加一行代码:

[cpp] view plaincopy

  1. circle.transform = CATransform3DMakeScale(0.01, 0.01, 0.01)  

同时将replicatorLayer的背景色改成无色,再次编译运行看看效果:

展示在咱们眼前的是一个完美的加载动画。

相关文章
相关标签/搜索