iOS 动画Animation-4-4: CALayer子类:CAReplicatorLayer

首先说明:这是一系列文章,参考本专题下其他的文章有助于你对本文的理解。

上一片介绍了CAShpeLayer,并且做了两个示例,如果创造力比较强,就那些东西可以创造出你以前不敢想象的动画效果。

今天我们接着来讲一下CAReplication

CAReplication是一个复制图层,可以按要求将layer复制出若干份,先来看看在CALayer的基础上又增加了那些API

API 描述
instanceCount 重复实例Layer(以下简称实例)的个数
instanceDelay 实例持续的时间
instanceTransform 实例动画
instanceColor 实例颜色
instanceRedOffset 红色偏移
instanceGreenOffset 绿色偏移
instanceBlueOffset 蓝色偏移
instanceAlphaOffset 透明度偏移

·

今天我以一个菊花为例,效果是这样的Demo下载

这个可以作为tableView的下拉刷新的效果,当然我比较懒,是用了一个slider代替了tableView下拉的偏移量。

他的实现过程也很简单,我们就创建一个CAReplicatorLayer吧。

var replicatorLayer = CAReplicatorLayer()
replicatorLayer.frame = someView.bounds
someView.layer.addSublayer(replicatorLayer)
  • 解释

    同样someView为storyboard中创建的View

    给定大小,并将其添加到someView的layer上

其实这一个菊花是有很多个重复的矩形layer组成的。那么还需要一个矩形的layer

var instanceLayer = CALayer()
let layerWidth: CGFloat = 10.0
let midX = CGRectGetMidX(someView.bounds) - layerWidth / 2
instanceLayer.frame = CGRect(x: midX, y: 0.0, width: layerWidth, height: layerWidth * 2.5)
instanceLayer.backgroundColor = UIColor.whiteColor().CGColor

replicatorLayer.addSublayer(instanceLayer)
  • 解释

    这里创建的小矩形layer叫instanceLayer

    将其添加到replicatorLayer上

这样写到这只是在视图上放了一个replicatorLayer,然后又添加了一个矩形layer,接下来就可以开始设置replicatorLayer的属性了

先设定颜色

replicatorLayer.instanceColor = UIColor.grayColor().CGColor

//        replicatorLayer.instanceRedOffset = 0.0
//        replicatorLayer.instanceGreenOffset = 0.0
//        replicatorLayer.instanceBlueOffset = 0.0
//        replicatorLayer.instanceAlphaOffset = 0.0
  • 解释

    颜色偏移量自己尝试着调一下,看看有什么变化

在storyboard上创建一个slider,用拖线的方式生成一个势力的人的方法

 @IBAction func slider(sender: UISlider) {
        let count: Int = Int(sender.value * 30)
        replicatorLayer.instanceCount = count
        if sender.value == 1 {
            replicatorLayer.instanceDelay = CFTimeInterval(1.0 / Double(count))
            addAnimation()
        }else{
            if faderAnimation != nil {
                instanceLayer.opacity = 1.0
               instanceLayer.removeAnimationForKey("fader")
            }

        }

        replicatorLayer.instanceTransform = CATransform3DMakeRotation(CGFloat(Float(M_PI * 2.0) * sender.value / Float(count)), 0.0, 0.0, 1.0)
    }
  • 解释

    设置instancCount根据slider的值发生变化,int类型

    持续1秒,CFTimeInterval类型,在这里代表的是生成count个layer所需要的时间

    在slider的值不为1.0的时候,将动画去除,并且不透明度设为1

    instanceTransform,设置动画,上面是3D动画绕Z轴旋转的角度

添加动画

func addAnimation() {
        faderAnimation = CABasicAnimation(keyPath: "opacity")
        faderAnimation.fromValue = 1.0
        faderAnimation.toValue = 0.0
        faderAnimation.duration = 1
        faderAnimation.repeatCount = Float(Int.max)
        instanceLayer.opacity = 0.0
        instanceLayer.addAnimation(faderAnimation, forKey: "fader")

    }

动画我就不解释,想了解动画的请看本专题下之前的文章

时间: 2024-10-31 20:55:14

iOS 动画Animation-4-4: CALayer子类:CAReplicatorLayer的相关文章

iOS 动画Animation - 5:UIBezier

首先说明:这是一系列文章,參考本专题下其它的文章有助于你对本文的理解. 在之前的bolg中大家会发现总是会出现UIBezier,可是我也没有做过多介绍,今天就集中介绍一下UIBezier.首先.UIBezier的内容比較多,我今天介绍的也不是UIBezier的所有,可是大部分经常使用到的我都会介绍一下.至于其它的,请大家參考官方文档. 由于今天的内容比較多.也可能有些地方不是非常easy理解,我会尽量的把他介绍的看起来简单一些,方便学习. 首先上一张图,你就会看到今天要讲到的内容 这就是今天要讲

[转载] iPhone/iOS Core Animation开发总结(CALayer)

目录[-] 一重要参数 二几何变形Transforming a Layers Geometry 三Layer数层结构Layer-Tree Hierarchy 四提供Layer内容Providing Layer Content 五动画 六CALayer的子类们 一.重要参数 bounds,frame,position属于基本的几何定位,相互之间数值变化会相互影响 anchorPoint:单位参数(0-1)表示,变形(transform)时候的变换源点 zPosition:相当于css中z-inde

蓝懿 iOS 动画Animation

iOS Animation详解 本篇只要讲解iOS中动画的使用. Animtion主要分为两类:UIView动画和CoreAnimation动画. UIView动画有UIView属性动画,UIViewBlock动画,UIViewTransition动画. 而CoreAnimation动画主要通过CAAnimation和CALayer,常用的有CABasicAnimation,CAKeyframeAnimation,CATransition,CAAnimationGroup. UIView动画 U

IOS动画(1)CALayer

参考博客: http://geeklu.com/2012/09/animation-in-ios/ http://www.cnblogs.com/kenshincui/p/3972100.html#calayer CALayer是CoreAnimation部分的内容,CALayer的概念类似于photoshop中层的概念,每个UIView都有一个根CALayer,每个CALayer又可以添加子CALayer,从结构上来看CALayer是一种树形结构,UIView的绘制工作都交由CALayer完成

iOS 动画Animation - 6 - 3 实战练习之复杂动画拆装

其实我们在看到的每一个复杂的动画都是有许多简单的动画巧妙的拼装出来的,在教给大家学会拼装一个动画,其实我更愿意教会大家如何去拆解一个动画.如果看到一个动画,会去把它拆解成一个个简单的动画,那么实现这个动画就轻而易举了. 先给大家看一张效果图: 动画分析 这个动画其实在实现的时候并不困难,可能很多人怕就怕在没有思路,下面我就将这个动画拆解. 1.先出来一个圆,圆形在水平和竖直方向上被挤压,呈椭圆形状的一个过程,最后恢复成圆形 2.圆形的左下角.右下角和顶部分别按顺序凸出一小部分 3.圆和凸出部分形

iOS 动画Animation-4-5: CALayer子类:CATransformLayer

首先说明:这是一系列文章,参考本专题下其他的文章有助于你对本文的理解. 今天周六,希望大家都有一个愉快的周末. 今天来讲解一下CATransformLayer:CATransformLayer是一个专门用来创建三维视图的一个layer,也可以说是多个layer的集合.他没有多余的API,可以这么说,他只是承载了子layer. 下面就看一个例子,通过例子来讲解. 国际惯例先上图: 图就是这样的纯手工打造. 先创建一个CATransformLayer对象: var transformLayer =

iOS Core Animation Advanced Techniques(四):隐式动画和显式动画

隐式动画 按照我的意思去做,而不是我说的. -- 埃德娜,辛普森 我们在第一部分讨论了Core Animation除了动画之外可以做到的任何事情.但是动画师Core Animation库一个非常显著的特性.这一章我们来看看它是怎么做到的.具体来说,我们先来讨论框架自动完成的隐式动画(除非你明确禁用了这个功能). 事务 Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画.动画并不需要你在Core Animation中手动打开,相反需要明确地关闭,否则他会一直存在.

iOS Core Animation Advanced Techniques(六): 基于定时器的动画和性能调优

基于定时器的动画 我可以指导你,但是你必须按照我说的做. -- 骇客帝国 在第10章“缓冲”中,我们研究了CAMediaTimingFunction,它是一个通过控制动画缓冲来模拟物理效果例如加速或者减速来增强现实感的东西,那么如果想更加真实地模拟 物理交互或者实时根据用户输入修改动画改怎么办呢?在这一章中,我们将继续探索一种能够允许我们精确地控制一帧一帧展示的基于定时器的动画. 定时帧 动画看起来是用来显示一段连续的运动过程,但实际上当在固定位置上展示像素的时候并不能做到这一点.一般来说这种显

IOS动画(Core Animation)总结 (参考多方文章)

一.简介 iOS 动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide. Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架.Core Animation可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作.你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用Core Animation的动画效果.Core Animation将大部分实际的绘图任务交给了图形硬件来处理,图形硬件会加

iOS动画(Core Animation)使用

一.简介 IOS 动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide. Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架.Core Animation可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作.你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用Core Animation的动画效果.Core Animation将大部分实际的绘图任务交给了图形硬件来处理,图形硬件会加