CAReplicatorLayer

CAReplicatorLayer的目的是为了高效生成许多相似的图层。它会绘制一个或多个图层的子图层,并在每个复制体上应用不同的变换。看上去演示能够更加解释这些,我们来写个例子吧。

重复图层(Repeating Layers)

清单6.8中,我们在屏幕的中间创建了一个小白色方块图层,然后用CAReplicatorLayer生成十个图层组成一个圆圈。instanceCount属性指定了图层需要重复多少次。instanceTransform指定了一个CATransform3D3D变换(这种情况下,下一图层的位移和旋转将会移动到圆圈的下一个点)。

变换是逐步增加的,每个实例都是相对于前一实例布局。这就是为什么这些复制体最终不会出现在同意位置上,图6.8是代码运行结果。

清单6.8 用CAReplicatorLayer重复图层

 @interface ViewController ()

 @property (nonatomic, weak) IBOutlet UIView *containerView;

 @end

 @implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//create a replicator layer and add it to our view
CAReplicatorLayer *replicator = [CAReplicatorLayer layer];
replicator.frame = self.containerView.bounds;
[self.containerView.layer addSublayer:replicator]; //configure the replicator
replicator.instanceCount = ; //apply a transform for each instance
CATransform3D transform = CATransform3DIdentity;
transform = CATransform3DTranslate(transform, , , );
transform = CATransform3DRotate(transform, M_PI / 5.0, , , );
transform = CATransform3DTranslate(transform, , -, );
replicator.instanceTransform = transform; //apply a color shift for each instance
replicator.instanceBlueOffset = -0.1;
replicator.instanceGreenOffset = -0.1; //create a sublayer and place it inside the replicator
CALayer *layer = [CALayer layer];
layer.frame = CGRectMake(100.0f, 100.0f, 100.0f, 100.0f);
layer.backgroundColor = [UIColor whiteColor].CGColor;
[replicator addSublayer:layer];
}
@end

Swift 3.0 代码

 //    CAReplicatorLayer
private lazy var replicatorView: UIView! = UIView() func replicatorLayerOfView() {
self.view.addSubview(self.replicatorView)
let replicator = CAReplicatorLayer()
replicator.frame = CGRect(x: , y: , width: , height: )
self.replicatorView.layer.addSublayer(replicator) replicator.instanceCount = var transform = CATransform3DIdentity
transform = CATransform3DTranslate(transform, , , )
transform = CATransform3DRotate(transform, .pi / 5.0, , , )
transform = CATransform3DTranslate(transform, , -, )
replicator.instanceTransform = transform replicator.instanceBlueOffset = -0.1
replicator.instanceGreenOffset = -0.1 let layer = CALayer()
layer.frame = CGRect(x: , y: , width: , height: )
layer.backgroundColor = UIColor.white.cgColor
replicator.addSublayer(layer) self.replicatorView.snp.makeConstraints { (make) in
make.top.equalTo(self.gradientView)
make.size.equalTo(self.gradientView)
make.left.equalTo(self.gradientView.snp.right).inset(-)
} }

图6.8 用CAReplicatorLayer创建一圈图层

注意到当图层在重复的时候,他们的颜色也在变化:这是用instanceBlueOffsetinstanceGreenOffset属性实现的。通过逐步减少蓝色和绿色通道,我们逐渐将图层颜色转换成了红色。这个复制效果看起来很酷,但是CAReplicatorLayer真正应用到实际程序上的场景比如:一个游戏中导弹的轨迹云,或者粒子爆炸(尽管iOS 5已经引入了CAEmitterLayer,它更适合创建任意的粒子效果)。除此之外,还有一个实际应用是:反射。

反射

使用CAReplicatorLayer并应用一个负比例变换于一个复制图层,你就可以创建指定视图(或整个视图层次)内容的镜像图片,这样就创建了一个实时的『反射』效果。让我们来尝试实现这个创意:指定一个继承于UIViewReflectionView,它会自动产生内容的反射效果。实现这个效果的代码很简单(见清单6.9),实际上用ReflectionView实现这个效果会更简单,我们只需要把ReflectionView的实例放置于Interface Builder(见图6.9),它就会实时生成子视图的反射,而不需要别的代码(见图6.10).

清单6.9 用CAReplicatorLayer自动绘制反射

 #import "ReflectionView.h"
#import @implementation ReflectionView + (Class)layerClass
{
return [CAReplicatorLayer class];
} - (void)setUp
{
//configure replicator
CAReplicatorLayer *layer = (CAReplicatorLayer *)self.layer;
layer.instanceCount = ; //move reflection instance below original and flip vertically
CATransform3D transform = CATransform3DIdentity;
CGFloat verticalOffset = self.bounds.size.height + ;
transform = CATransform3DTranslate(transform, , verticalOffset, );
transform = CATransform3DScale(transform, , -, );
layer.instanceTransform = transform; //reduce alpha of reflection layer
layer.instanceAlphaOffset = -0.6;
}

- (id)initWithFrame:(CGRect)frame
{
//this is called when view is created in code
if ((self = [super initWithFrame:frame])) {
[self setUp];
}
return self;
} - (void)awakeFromNib
{
//this is called when view is created from a nib
[self setUp];
}
@end

CAReplicatorLayer的更多相关文章

  1. 利用CAReplicatorLayer实现的加载动画

    在上一篇中,笔者简要介绍了CAReplicatorLayer,在本篇中,将介绍具体的实用价值. 实用CAReplicatorLayer作为核心技术实现加载动画. 首先,创建一个UIView的子类 @i ...

  2. CoreAnimation 之CAReplicatorLayer

    CAReplicatorLayer: 主要作用有以下两个: CAReplicatorLayer的目的是为了高效生成许多相似的图层,它会绘制一个或多个图层的子图层 并在每个复制体上应用不同的变换 使用C ...

  3. CA*Layer(CAReplicatorLayer--)

    CAReplicatorLayer (反射应用) 指定一个继承于UIView的ReflectionView,它会自动产生内容的反射效果: + (Class)layerClass//我们也可以通过重写V ...

  4. CAReplicatorLayer复制Layer和动画, 实现神奇的效果

    今天我们看下CAReplicatorLayer, 官方的解释是一个高效处理复制图层的中间层.他能复制图层的所有属性,包括动画. 一样我们先看下头文件 @interface CAReplicatorLa ...

  5. iOS CAReplicatorLayer 实现脉冲动画效果

    iOS CAReplicatorLayer 实现脉冲动画效果 效果图 脉冲数量.速度.半径.透明度.渐变颜色.方向等都可以设置.可以用于地图标注(Annotation).按钮长按动画效果(例如录音按钮 ...

  6. 用drawRect以及CAReplicatorLayer绘制动态水波纹

    用drawRect以及CAReplicatorLayer绘制动态水波纹 大大简化了写水波纹效果的难度,你可以根据示例自己组装水波纹效果,本设计是几个工具组合在一起完成的效果, DrawRectObje ...

  7. 使用CAReplicatorLayer [2]

    使用CAReplicatorLayer [2] 工具类 // // Math.h // MathEquation // // Created by YouXianMing on 15/11/20. / ...

  8. 使用CAReplicatorLayer [1]

    使用CAReplicatorLayer [1] 说明 https://developer.apple.com/library/ios/documentation/GraphicsImaging/Ref ...

  9. iOS CAReplicatorLayer 简单动画

    代码地址如下:http://www.demodashi.com/demo/11601.html 写在最前面,最近在看学习的时候,偶然间发现一个没有用过的Layer,于是抽空研究了下,本来应该能提前记录 ...

随机推荐

  1. List集合的removeAll(Collection<E> col) 和clear方法的区别

    //removeAll()方法private static void testList(){ List<String> list = new ArrayList<String> ...

  2. OpenCV图像的全局阈值二值化函数(OTSU)

    cv::threshold(GrayImg, Bw, 0, 255, CV_THRESH_BINARY | CV_THRESH_OTSU);//灰度图像二值化 CV_THRESH_OTSU是提取图像最 ...

  3. iOS Block理解

    以前看到Block觉得也没什么,不就是类似函数的东西,这东西在C#里就是委托,在Java里就是块,有什么稀奇的.但看到一点进阶的内容后,发现这个东西确实有用. 所以做下总结. 一.块的基本用法 块的语 ...

  4. python-mysqldb安装

    出现错误  command 'gcc' failed with exit status 1 解决办法: yum install python-devel mysql-devel zlib-devel ...

  5. ASP.NET中把xml转为dataset与xml字符串转为dataset及dataset转为xml的代码

    转自:http://www.cnblogs.com/_zjl/archive/2011/04/08/2009087.html XmlDatasetConvert.csusing System;usin ...

  6. cordova 创建ios项目

    cordova create fmscmsios1023 com.weilian.fmscms fmscms cd fmscms cd fmscmsios1023/ cordova platforms ...

  7. [Angular 2] Passing Template Input Values to Reducers

    Angular 2 allows you to pass values from inputs simply by referencing them in the template and passi ...

  8. 2016WHD.china世界云计算日&#183;北京站即将召开

    WHD.china自进驻中国以来,已在上海.北京成功举办多届,2015年于北京举办的会议更是盛况空前,注册参会者逾800人次,汇聚了国内外众多知名云服务商.IDC商.电子商务企业.电信运营商.ISP等 ...

  9. 基于 HTML5 的 3D 工业互联网展示方案

    前言 通用电气(GE).IBM.英特尔等公司主推的“工业互联网”正在经历“产品-数据分析平台-应用-生态”的演进.这主要得益于 Predix 数据分析平台对工业互联网应用的整合能力.Predix 就像 ...

  10. mysql的基础知识

    一.存储引擎 mysql> show engines; +--------------------+---------+------------------------------------- ...