iOS动画指南 – 3.Layer Animations的进阶使用

11924285-ab8ed0935551c26e

本篇预备知识

  • 这一系列是讲iOS开发中动画的使用,所以得基本熟悉iOS开发.
  • 代码都是基于swift的,所以也得了解swift啊.
  • 这一篇是在前一篇的基础上写的,所以得知道Layer Animations的基本使用吧!

概述

上一篇iOS动画指南 – 2.Layer Animations的基本使用中介绍了Layer Animations的一些基本使用,这一篇我们通过几个小的例子深入了解Layer Animations的用法,所以相比上篇,这篇无论是从篇幅还是连贯性都会有点大,大家准备上车吧.

文章大纲

  1. 可以在多个值之间变幻的CAKeyframeAnimation.
  2. 可以画出各种形状的CAShapeLayer.
    12924285-e624513fd1a4a182

    DOG VS FOX
  3. 可以给文字添加效果的CAGradientLayer.
    13924285-54d70fb7e0973da1

    滑动解锁效果
  4. 有轨迹的下拉刷新.
    14924285-4dec2965165560b4

    模拟下拉刷新
  5. 可以无限复制的CAReplicatorLayer.
    15924285-2819cac250bb2dfa

    CAReplicatorLayer

1. CAKeyframeAnimation

开发中情况多种多样,从一个值到另一个值的fromValue和toValue属性并不能高效的满足开发需要,比如我们要将一个view一次经过三个点呢?难道分为两次去做,那太麻烦了.对的,可以用CAKeyframeAnimation去实现,CAKeyframeAnimation有个属性values是个数组完美替代了fromValue,toValue,我们可以把三个点放进values数组,解决问题.

16924285-f1e10cd1b58e3861

或者我们可以做一下view的左右晃动,不添加在上面位移基础上,单独去实现:

17924285-1d6b9f9b6df191f8

2. CAShapeLayer

使用CAShapeLayer可以绘制各种图形.
比如用来画圆:

18924285-161cf57e5703c5c3

接下来让我们来看下:

19924285-e624513fd1a4a182

DOG VS FOX

由于git图片是循环播放的,所以很难分辨动画的开始和结束,动画的开始其实是这样的:

20924285-464bb9e7493ce612

这是AvatarView的层级:

21924285-aeff8d6b636d3781

  • photoLayer : 是用来放置图片的.
  • circleLayer: 是用来绘制圆形的.
  • maskLayer: 是用来裁剪图片的.
  • label: 用于设置名字.

让我们来分析下步骤:

  1. 设置两张图片的圆角
  2. 两张图片向中间移动,完成后将图片变成方角
  3. 在两张图片在中间的时候,将两张图片做一个椭圆的碰撞效果
  4. 后退,图片返回到开始的位置,完成后执行步骤1

实现:
我们对控件做了封装,具体看源码.
1 . 在AvatarView中的didMoveToWindow方法中将新建好的几个属性添加进去

2 . 重写layoutSubviews方法,设置图片的圆角

3 . 定义外部控制方法func boundsOffset: boundsOffset: morphSize用于传入偏移位置,以及图片碰撞时候需要设置的尺寸:

4 . 在boundsOffset方法中设置图片往中间位移:

5 . 当图片在中间的时候会有一个碰撞效果:

6 . 返回到初始位置:

7 . 将圆角图片变成方角图片.严格意义上这不是最后一步,第四步有一个self.animateToSquare()

大体步骤就这些,下面我们就可以在viewController.swift中使用了

  1. 创建两个AvatarView,设置好图片,大小,位置.
  2. 调用AvatarView的boundsOffset方法,设置偏移位置,以及图片碰撞时候需要的尺寸.

3. CAGradientLayer

我们几乎每天都会看到的iPhone滑动来解锁的文字效果是怎么实现的呢?
一步一步来吧 >.

  1. 搞一个懒加载来设置CAGradientLayer

新建一个view,随便设置位置尺寸,将gradientLayer添加到view上面

然后我们就可以看到这样的效果:

22924285-59f225f58bf6fa83

怎么样是不是有点那么回事了!我们还要让它动起来
2 . 为gradientLayer添加动画效果
CABasicAnimation有一个locations属性,通过修改颜色位置形成动画.

23924285-b7df82b93aa6e4c8

git掉帧这么严重将就着看吧!
3 . 修改白色区域的大小
这边我们调整白色区域将其*3倍,更好看一点.
4 . 考虑到代码的可复用性,我们对代码做了封装,自定义了一个view:GradientLabel ,view里面有一个text属性,通过图形上下文把字符串绘制到view上面.

然后外面就可以这样使用了

24924285-54d70fb7e0973da1

滑动解锁效果

4. 有轨迹的下拉刷新.

下拉刷新几乎每个APP都会用到,由于有现成的第三方框架,所以要自己动手实现的情况并不是很多,但有时候需求要求自定义,所以了解下原理吧!
原理很简单:其实就是通过代理方法监听tableView的滚动,当完成刷新就恢复原来的样子.
这次我们要做一个有特效的.

  1. 使用CAShapeLayer绘制一个带有虚线的圆

然后在开始位置添加飞机图片

25924285-366ff9eb230ceac1

2 . 设置开始刷新,结束刷新动画

3 . 在tabelView的scrollView方法中根据偏移量设置动画的开始和结束

26924285-4dec2965165560b4

模拟下拉刷新

5. 可以无限复制的CAReplicatorLayer

CALayer的子类CAReplicatorLayer通过它可以对其创建的对象进行复制,从而做出复杂的效果.
1 . 创建一个CAReplicatorLayer,然后进行复制.

27924285-1528b3ad3f437a46

2 . 让它动起来,并且让每一个dot做一点延迟.

28924285-b21273c981619c52

3 . 将2中的代码注释掉,做出这样的一个效果

29924285-b2477355eca6e89b

4 .添加一个渐变色

30924285-80a8cada8e977e56

5 . 添加渐变的颜色

31924285-ad3c003aa5894881

  1. 设置成上下摇摆

32924285-2819cac250bb2dfa

本文整理自 : iOS.Animations.by.Tutorials.v2.0
源码 : https://github.com/DarielChen/DemoCode
如有疑问,欢迎留言 :-D

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部