CALayer 实现的动画效果(一)
先看下效果图:
(备注: 上面GIF 是Mac 下录制视频的并转化成gif 的而成,工具为GIF Brewery 3 【这款软件挺不错的】)
那么主题来了如何实现上面效果呢?
1、创建自定义CALayer子类
KBSpinnyMcSpinface
构造函数如下:
-(instancetype)initWithNumberOfItems:(NSUInteger)number {
if (self = [self init]) {
self.masksToBounds = NO;
self.frame = CGRectMake(, , [UIScreen mainScreen].bounds.size.height, [UIScreen mainScreen].bounds.size.height);
for (NSUInteger index = ; index < number; index++) {
//创建子layer
CALayer *layer = [self generLayerWithSize:CGSizeMake(, ) index:index];
[self insertSublayer:layer atIndex:];
//每个子类设置不同的层级(z坐标)
[self setZPosition:(CGFloat)index forLayer:layer];
}
}
return self;
}
创建子类cugangenerLayerWithSize方法如下:
-(CAShapeLayer*)generLayerWithSize:(CGSize)size index:(NSInteger)index {
CAShapeLayer *square = [CAShapeLayer layer];
square.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(, , size.width, size.height) cornerRadius:size.width/ ].CGPath;
square.bounds = CGPathGetBoundingBox(square.path);
square.fillColor = [self randColor].CGColor;//我这里设置了随时颜色
square.position = CGPointMake(,);
[self setAnchorPoint:CGPointMake(0.5, 0.5) forLayer:square];//设置锚点坐标
return square;
}
指定的CALayer设置锚点坐标方法如下
// Because adjusting the anchorPoint itself adjusts the frame, this is needed to avoid it, and keep the layer stationary.
-(void)setAnchorPoint:(CGPoint)anchorPoint forLayer:(CALayer*)layer {
CGPoint newPoint = CGPointMake(layer.bounds.size.width * anchorPoint.x, layer.bounds.size.height * anchorPoint.y);
CGPoint oldPoint = CGPointMake(layer.bounds.size.width * layer.anchorPoint.x, layer.bounds.size.height * layer.anchorPoint.y);
CGPoint position = layer.position;
position.x -= oldPoint.x;
position.x += newPoint.x;
position.y -= oldPoint.y;
position.y += newPoint.y;
layer.position = position;
layer.anchorPoint = anchorPoint;
}
获取随机颜色方法如下:
-(UIColor*)randColor {
CGFloat red =0.0 ,green = 0.0,blue = 0.0 ;
red = (CGFloat)(+arc4random()%)/;
green = (CGFloat)(+arc4random()%)/;
blue = (CGFloat)(+arc4random()%)/;
UIColor *randColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
return randColor;
}
子类CALayer zPosition 设置方法
-(void)setZPosition:(CGFloat)zPosition forLayer:(CALayer*)layer {
layer.zPosition = zPosition * (-);
}
2、创建动画
-(void)startAnimation{
CGFloat offsetTime = 0.0;
CATransform3D transform = CATransform3DIdentity;
transform.m34 = 1.0 / -500.0;
transform = CATransform3DRotate(transform,M_PI, , , );
[CATransaction begin];
for (CALayer *layer in self.sublayers) {
CABasicAnimation *animation = [self getPinForTranform:transform];
animation.beginTime = [layer convertTime:CACurrentMediaTime() toLayer:nil] + offsetTime;
[layer addAnimation:animation forKey:nil];
offsetTime += 0.1;
}
[CATransaction commit]; } -(void)stopAnimation {
for (CALayer *layer in self.sublayers) {
[layer removeAllAnimations];
}
} -(CABasicAnimation*)getPinForTranform:(CATransform3D )transform {
CABasicAnimation *basic =[CABasicAnimation animationWithKeyPath:@"transform"];
basic.toValue = [NSValue valueWithCATransform3D:transform];
basic.duration = 1.0;
basic.fillMode = kCAFillModeForwards;
basic.repeatCount = HUGE;
basic.autoreverses = YES;
basic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
basic.removedOnCompletion = NO;
return basic; }
开始运行 ,结果如下:
不是我们的结果啊。。。。。其实这里是因为我们自定义Layer还是2D情况
3、为自定义类添加 3D属性
设置旋转角度方法
//设置本layer 在父layer 中展示3D效果
-(void)rotateParentLayer:(CGFloat)toDegree {
CATransform3D transform = CATransform3DIdentity;
transform.m34 = 1.0 / -500.0;
transform = CATransform3DRotate(transform, [self degreesToRadians:toDegree], , , );//以x 坐标旋转制定的角度
self.transform = transform;
} //角度转弧度
-(CGFloat)degreesToRadians:(CGFloat)degrees {
return ((M_PI * (degrees)) / 180.0);
}
然后构造函数中调用:
-(instancetype)initWithNumberOfItems:(NSUInteger)number {
if (self = [self init]) {
······
[self rotateParentLayer:];//X 轴旋转60 度
}
return self;
}
运行结果如下图:
我去还不是我们想要的。。。
那么我们到最后一步吧。。。。
4、更改继承 CATransformLayer
@interface KBSpinnyMcSpinface : CATransformLayer
结束:完美运行。 其实我想说的是老外的创意真的无极限。。。。
(我是参考老外的swift版本翻译过来的:https://medium.com/ios-os-x-development/effervescent-calayer-transfigurations-on-ios-c5e78781db17#.3mrahw54q)
CALayer 实现的动画效果(一)的更多相关文章
- iOS开发——UI进阶篇(十七)CALayer,核心动画基本使用
一.CALayer简介 1.CALayer在iOS中,文本输入框.一个图标等等,这些都是UIView你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个其实UIView之所以 ...
- Core Animation之多种动画效果
前面介绍了Core Animation基础知识,还有CALayer的简单使用,最终还是有要动画的滴,这里列出几个动画效果,参考下能加深对Core Animation的认识和理解 1.把图片移到右下角变 ...
- [iOS Animation]-CALayer 隐式动画
隐式动画 按照我的意思去做,而不是我说的. -- 埃德娜,辛普森 我们在第一部分讨论了Core Animation除了动画之外可以做到的任何事情.但是动画是Core Animation库一个非常显著的 ...
- iOS CAReplicatorLayer 实现脉冲动画效果
iOS CAReplicatorLayer 实现脉冲动画效果 效果图 脉冲数量.速度.半径.透明度.渐变颜色.方向等都可以设置.可以用于地图标注(Annotation).按钮长按动画效果(例如录音按钮 ...
- iOS 动画效果:Core Animation & Facebook's pop
本文转载至 http://www.cocoachina.com/ios/20151223/14739.html 感谢原创作者分享 前言相信很多人对实现 iOS 中的动画效果都特别头疼,往往懒得动手,功 ...
- UITableView中cell点击的绚丽动画效果
UITableView中cell点击的绚丽动画效果 本人视频教程系类 iOS中CALayer的使用 效果图: 源码: YouXianMingCell.h 与 YouXianMingCell.m / ...
- IOS 暂停和恢复CALayer上的动画(转)
coreAnimation的动画是存在于CALayer上面的,有些时候需要突然暂停某个组件的动画效果,同时保留当前动画的状态, 如果是用removeAnimation会显得很突兀,不够平滑,所以可以利 ...
- UIAlertView弹出视图动画效果
在App设计中为了加强用户体验,我们会常常加入一些友好的动画效果.比如类似UIAlertView弹出的动画效果,由于系统中并没有直接提供类似的动画API,如果我们想要做出一样的效果,那就得深入的研究一 ...
- swift中实现cell中局部播放的动画效果
在cell中 // 播放器动画效果 private var replicatorLayer:ReplicatorLayer = { let layer = ReplicatorLayer.init(f ...
随机推荐
- 剑指offer编程题66道题 26-35
26.二叉搜索树与双向链表 题目描述 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 中序遍历思路:按照右中左的顺序,中序遍历对 ...
- 【Head First Servlets and JSP】笔记20:EL以及<jsp:useBean ....>的补充
1.EL的英文是Expression Language,译成中文就是“表达式语言”.这是一种给前端程序员使用的脚本语言,EL与Java表达式相比并没有什么“天壤之别”,在后端程序员看来多少有点“多此一 ...
- Python3.x:实现多任务(多进程)
Python3.x:实现多任务(多进程) # python3 # author lizm # datetime 2018-02-13 16:00:00 # -*- coding: utf-8 -*- ...
- 2018-2019-2 20165114《网络对抗技术》Exp4 恶意代码分析
Exp4 恶意代码分析 目录 一.实验目标 (1)监控你自己系统的运行状态,看有没有可疑的程序在运行. (2)分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sys ...
- 判断一个对象是否有new
C++语言中,对象没有空和不空的概念,只有对象指针才有空和不空的概念 判断对象指针是否为空只需要和NULL常量进行比较即可 如果相等,则为空,否则不为空 另外对象虽然没有空和不空的概念,但是有有效和无 ...
- linux 安装unrar
Centos 6 32位下安装 wget http://pkgs.repoforge.org/unrar/unrar-4.2.3-1.el6.rf.i686.rpmrpm -ivh unrar-4.2 ...
- Java EE启示录
前言 最近的这段时间一直在学习Java EE,刚刚完成了从0到1的蜕变,所以顺便整理一下我所了解到的Java EE,给刚入门学习的新人一些头绪,而所谓“启示录”,就是这个意思. 一.Java EE是什 ...
- C-RAN
无线接入网(RAN)是移动运营商赖以生存的重要资产.传统的无线接入网具有以下特点: 1. 每一个基站连接若干个固定数量的扇区天线,并覆盖小片区域,每个基站只能处理本小区收发信号: 2. 系统的容量是干 ...
- css字体介绍
内容一切来自百度百科 1.Helvetica Helvetica是一种被广泛使用的的西文字体,于1957年由瑞士字体设计师爱德华德·霍夫曼(Eduard Hoffmann)和马克斯·米耶丁格(Max ...
- dypedef 和 define
typedef char *String_t; 和 #define String_dchar * 这两句在使用上有什么区别? 答:typedef char *String_t 定义了一个新的类型别名, ...