iOS动画系列之九:实现点赞的动画及播放起伏指示器(OC+Swift)1. CAReplicatorLayer2. CAEmitterLayer3. CAGradientLayer

看看上一次更新一个多月过去了,基本上简书都断更了,内心那个自责呀。这一个月都没有碰过电脑,突然敲起代码,那个手生呀~所以说,码农就是熟练工种还是有一定道理的。

今天主要通过实现一个音乐播放状态的展示条,还有一个点赞的动画效果,来看看 CAReplicatorLayer、CAEmitterLayer和CAGradientLayer这三个专用层。

还是老惯例啦,先看看实现后的效果是啥样子。

播放指示器.gif

点赞动画

渐变色.gif

1. CAReplicatorLayer

CAReplicatorLayer的目的是为了高效生成许多相似的图层。它会绘制一个或多个图层的子图层,并在每个复制体上应用不同的变换。什么意思?看到例子中间的那么多条条在上下起伏了嘛?其实我并没有写那么多条条,只写了一个。把这一个写好的加入到了CAReplicatorLayer复制层中,然后就根据设置的参数自动的生成了剩下的条状物。

播放指示器.gif

1.1 第一步:先写好一个层,剩下的都复制这个

let layer = CALayer.init()
layer.frame = CGRect.init(x: 0, y: 0, width: 10, height: 80)
layer.backgroundColor = UIColor.white.cgColor
layer.anchorPoint = CGPoint.init(x: 0.5, y: 0.5)

layer.add(self.scaleYAnimation(), forKey: "scaleAnimation")

    fileprivate func scaleYAnimation() -> CABasicAnimation{
        let anim = CABasicAnimation.init(keyPath: "transform.scale.y")
        anim.toValue = 0.1
        anim.duration = 0.4
        anim.autoreverses = true
        anim.repeatCount = MAXFLOAT
        return anim

    }

这些都没啥问题把?就是最基本的建立一个CALayer,设置了frame,设置了锚点,设置了背景颜色,加入了上下移动的动画。

等等,为什么这里背景颜色是白色吶?白色不是就看不见了嘛?别着急,第二步里面答案就揭晓啦。

1.2 第二步:使用CAReplicatorLayer进行复制

//        设置复制层里面包含子层的个数
        replicatorLayer.instanceCount = 6
        
//        设置子层相对于前一个层的偏移量
        replicatorLayer.instanceTransform = CATransform3DMakeTranslation(45, 0, 0)
        
//        设置子层相对于前一个层的延迟时间
        replicatorLayer.instanceDelay = 0.2
        
//        设置层的颜色,(前提是要设置层的背景颜色,如果没有设置背景颜色,默认是透明的,再设置这个属性不会有效果。
        replicatorLayer.instanceColor = UIColor.green.cgColor
        
//        颜色的渐变,相对于前一个层的渐变(取值-1~+1).RGB有三种颜色,所以这里也是绿红蓝三种。
        replicatorLayer.instanceGreenOffset = -0.2
        replicatorLayer.instanceRedOffset = -0.2
        replicatorLayer.instanceBlueOffset = -0.2
        
//        需要把子层加入到复制层中,复制层按照前面设置的参数自动复制
        replicatorLayer.addSublayer(layer)
        
//        将复制层加入view的层里面进行显示

        view.layer.addSublayer(replicatorLayer)

看到了木有?前面那个基准层的背景颜色为啥是白色吶?最终生效的其实还是replicatorLayer.instanceColor = UIColor.green.cgColor。 这样就齐活啦~就完事儿了,就这么简单。

1.3 CAReplicatorLayer属性介绍

为了能够看到各个属性之间的含义,所以又来了第二个复制层。第二个复制层修改了复制的锚点、复制的个数、复制的偏移量。 来,我们一起对照看看两个复制层上面有什么区别。

指示器2.gif

我们看看官方对于这个层有哪些属性:

    open var instanceCount: Int
    open var preservesDepth: Bool
    open var instanceDelay: CFTimeInterval
    open var instanceTransform: CATransform3D
    open var instanceColor: CGColor?
    open var instanceRedOffset: Float
    open var instanceGreenOffset: Float
    open var instanceBlueOffset: Float
    open var instanceAlphaOffset: Float

一共有九个属性对吧?一起来看看都啥意思。

  • instanceCount:拷贝图层的次数,包括其所有的子图层,默认值是1,也就是没有任何子图层被复制。

preservesDepth:如果设置为YES,图层将保持于CATransformLayer类似的性质和相同的限制

instanceDelay:设置子层相对于前一个层的延迟时间

  • instanceTransform: 设置子层相对于前一个层的偏移量
  • instanceColor:设置层的颜色,(前提是要设置层的背景颜色,如果没有设置背景颜色,默认是透明的,再设置这个属性不会有效果。
  • instanceRedOffset、instanceGreenOffset、instanceBlueOffset:颜色的渐变,相对于前一个层的渐变(取值-1~+1).RGB有三种颜色,所以这里也是绿红蓝三种。
  • instanceAlphaOffset:相对于前一个层透明图的渐变。

2. CAEmitterLayer

CAEmitterLayer是一个高性能的粒子引擎,被用来创建实时例子动画如:烟雾,火,雨等等这些效果。CAEmitterLayer看上去像是许多CAEmitterCell的容器,这些CAEmitierCell定义了一个例子效果。

通俗点说,例如雨是由很多小雨点组成的。每个小雨点就是 CAEmitterCell,CAEmitterLayer用来控制这些小雨点。我们不用太关心cell的创建和销毁,只要设置好参数,系统会帮助我们完成这些工作。

那我们就通过一个点赞的动画来看看到底怎么用。实现的效果如下:

点赞动画

2.1 第一步:创建一个大拇指的button

创建一个button,设置选中状态、普通状态的图片。写好触发事件。这个没什么好解释的,就是点一下把状态改一下。

//点击按钮事件   
 @IBAction func priaseBtnClick(_ sender: UIButton) {   
     sender.isSelected = !sender.isSelected   
 }

2.2 第二步:自定义button

为了能够让button具有动画效果,需要自定义这个button。因此我们需要重写button的初始化方法、button状态改变的方法。

swift里面重写方法的格式和OC不太一样,需要注意一下。

//重写状态改变的方法
    override var isSelected: Bool{
        didSet{
//            执行动画
           explosionAni()
        }
    }

//重写button初始化方法
    override init(frame: CGRect) {
      explosionLayer = CAEmitterLayer.init()
        super.init(frame: frame)
        setupExplosion()
    }
   
 
    required init?(coder aDecoder: NSCoder) {
        explosionLayer = CAEmitterLayer.init()
        super.init(coder: aDecoder)
        setupExplosion()
//        fatalError("init(coder:) has not been implemented")

    }

2.3 创建点赞周围的那些小点点的单个元素,通过CAEmitterCell实现

基本上CAEmitterCell该用的属性都用到了,剩下的咱们会在下面继续补充。

    let explosionCell = CAEmitterCell.init()
        explosionCell.name = "explosion"
//        设置粒子颜色alpha能改变的范围
        explosionCell.alphaRange = 0.10
//        粒子alpha的改变速度
        explosionCell.alphaSpeed = -1.0
//        粒子的生命周期
        explosionCell.lifetime = 0.7
//        粒子生命周期的范围
        explosionCell.lifetimeRange = 0.3
        
//        粒子发射的初始速度
        explosionCell.birthRate = 2500
//        粒子的速度
        explosionCell.velocity = 40.00
//        粒子速度范围
        explosionCell.velocityRange = 10.00
        
//        粒子的缩放比例
        explosionCell.scale = 0.03
//        缩放比例范围
        explosionCell.scaleRange = 0.02
        
//        粒子要展现的图片

        explosionCell.contents = UIImage(named: "sparkle")?.cgImage

2.4 设置CAEmitterLayer,让它控制cell

        explosionLayer.name = "explosionLayer"
        
//        发射源的形状
        explosionLayer.emitterShape = kCAEmitterLayerCircle
//        发射模式
        explosionLayer.emitterMode = kCAEmitterLayerOutline
//        发射源大小
        explosionLayer.emitterSize = CGSize.init(width: 10, height: 0)
//        发射源包含的粒子
        explosionLayer.emitterCells = [explosionCell]
//        渲染模式
        explosionLayer.renderMode = kCAEmitterLayerOldestFirst
        explosionLayer.masksToBounds = false
        explosionLayer.birthRate = 0
//        发射位置
        explosionLayer.position = CGPoint.init(x: frame.size.width/2, y: frame.size.height/2)
        explosionLayer.zPosition = -1

        layer.addSublayer(explosionLayer)

2.5 设置动画的参数

这里的动画基本上就只是CAKeyframeAnimation,很简单。如果有不太清楚的,可以看看前面的这个 第七篇:CAKeyFrame Animation和CAAnimation Group。

2.6 CAEmitterLayer的属性

基本上该用的属性这个粒子里面都用到了,唯一以后需要查手册的就是下面这些枚举。

/** `emitterShape' values. **/ 发射器形状 
@available(iOS 5.0, *)
public let kCAEmitterLayerPoint: String //点

@available(iOS 5.0, *)
public let kCAEmitterLayerLine: String //线

@available(iOS 5.0, *)
public let kCAEmitterLayerRectangle: String //矩形

@available(iOS 5.0, *)
public let kCAEmitterLayerCuboid: String //长方形

@available(iOS 5.0, *)
public let kCAEmitterLayerCircle: String //圆形

@available(iOS 5.0, *)
public let kCAEmitterLayerSphere: String //球形

/** `emitterMode' values. **/ 发射模式
@available(iOS 5.0, *)
public let kCAEmitterLayerPoints: String //点状

@available(iOS 5.0, *)
public let kCAEmitterLayerOutline: String //轮廓

@available(iOS 5.0, *)
public let kCAEmitterLayerSurface: String //表面

@available(iOS 5.0, *)
public let kCAEmitterLayerVolume: String //大量

/** `renderMode' values. **/渲染模式
@available(iOS 5.0, *)
public let kCAEmitterLayerUnordered: String //乱序

@available(iOS 5.0, *)
public let kCAEmitterLayerOldestFirst: String //最老的最先出来

@available(iOS 5.0, *)
public let kCAEmitterLayerOldestLast: String //最老的最后出来

@available(iOS 5.0, *)
public let kCAEmitterLayerBackToFront: String //前后颠倒

@available(iOS 5.0, *)

public let kCAEmitterLayerAdditive: String //附加

这些不用记,不用背。用的时候查一下就可以了。

3. CAGradientLayer

CAGradientLayer是用来生成两种或更多颜色平滑渐变的。用Core Graphics复制一个CAGradientLayer并将内容绘制到一个普通图层的寄宿图也是有可能的,但是CAGradientLayer的真正好处在于绘制使用了硬件加速。 实现效果如下:

渐变色.gif

    func createGradientLayer(){
        gradientlayer = CAGradientLayer.init()
        gradientlayer.frame = view.bounds
        
//        设置颜色组。这里设置了黑色、蓝色、橙色、红色、绿色五种颜色
        gradientlayer.colors = [UIColor.black.cgColor,UIColor.blue.cgColor,UIColor.orange.cgColor,UIColor.red.cgColor,UIColor.green.cgColor]
//        根据起点指向终点的方向来渐变颜色,范围是0~1
        gradientlayer.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradientlayer.endPoint = CGPoint(x: 1.0, y: 1.0)
        
//        设置颜色分割线,范围是0~1
        gradientlayer.locations = [0.1,0.5,0.7,0.75,0.95]
        view.layer.addSublayer(gradientlayer)

    }

swift版的源代码可以在这里下载。https://git.oschina.net/atypical/multAnimation.git

如果OC版的呼声很高,那我就再补充。 -------2017.04.28补充---

添加了OC版本的源代码。还是通过上面按个地址下载,找到OC的目录就可以了。 https://git.oschina.net/atypical/multAnimation.git

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Windows Community

Windows Community Toolkit 3.0 - UniformGrid

UniformGrid 控件是一个响应式的布局控件,允许把 items 排列在一组均匀分布的行或列中,以填充整体的可用显示空间,形成均匀的多个网格。默认情况下,...

822
来自专栏Alan's Lab

iOS一点点 - TableView 拼音序排序(汉字转拼音、简繁体转换、日文转罗马音等)

Introduction to ICU General Transforms Transform Rule Tutorial 使用ICU进行拼音转汉字暂时似乎也...

722
来自专栏数据小魔方

半圆型动态仪表盘风格图表

今天跟大家分享一款半圆型动态仪表盘风格图表!真的可以动起来哦! ▼ 下午在浏览论坛的时候,刚好看到秋叶老师的一个图表教程,风格是半圆型饼图,用VBA控制。 ? ...

3296
来自专栏小灰灰

cocos2dx-v3.4 2048(四):游戏逻辑的设计与实现

前言 ---- 2048的游戏逻辑比较简单,向四个方向移动单元格,若相邻的单元格数字相同,则合并成一个新的单元格,且数字为之前的两倍;若不同,则移动到目的方向上...

2726
来自专栏计算机视觉与深度学习基础

Leetcode 78 Subsets

Given a set of distinct integers, nums, return all possible subsets. Note: The...

1736
来自专栏進无尽的文章

绘图-Core Graphics

CGContext又叫图形上下文,相当于一块画布,以堆栈形式存放,只有在当前context上绘图才有效。iOS有分多种图形上下文,其中UIView自带提供的在d...

703
来自专栏数值分析与有限元编程

可视化 | 一个三角形常应变单元后处理例子

昨天提到了应力云图,其实质是用不同的颜色填充等值线。有了结点的应力值,单元内任意一点的应力值是通过插值实现的。下面来看一个悬臂梁的综合后处理。 如图所示,一个悬...

2557
来自专栏木宛城主

浪客剑心:位图法Bitmap算法分析

看了一篇文章《一道腾讯前端试题,谁来试试身手》,正好以前了解过位图法,确实不错。位图法适用于大规模数据,但数据状态又不是很多的情况。通常是用来判断某个数据存不...

2436
来自专栏hrscy

iOS 9 Storyboard 教程(二下)

现在你会忽视Game行,仅仅让用户输入玩家的名字. 当用户点击Cancel按钮的时候,这个控制器将会关闭并且不管你输了什么数据都不会保存.这个部分用unwin...

851
来自专栏H2Cloud

UtraEdit 支持Lua高亮

UtraEdit  支持Lua高亮,网上已经有很多方法,但是都是基于相对老一点的 UE,在15.10版本中,UE支持Lua高亮的方法如下: 从网上Down下支持...

3307

扫码关注云+社区