服务器之家：专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - iOS优雅的将CALayer旋转360度示例代码

iOS优雅的将CALayer旋转360度示例代码

2021-04-15 15:52handyTOOL IOS

下面这篇文章主要给大家介绍了关于iOS如何优雅的将CALayer旋转360度的相关资料，文中通过示例代码的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。

什么是CALayer

* 在iOS系统中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView。

* 其实UIView之所以能显示在屏幕上，完全是因为它内部的一个层。

* 在创建UIView对象时，UIView内部会自动创建一个层(即CALayer对象)，通过UIView的layer属性可以访问这个层。当UIView需要显示到屏幕上时，会调用 drawRect:方法进行绘图，并且会将所有内容绘制在自己的层上，绘图完毕后，系统会将层拷贝到屏幕上，于是就完成了UIView的显示。

* 换句话说，UIView本身不具备显示的功能，是它内部的层才有显示功能。

引言

不知你是否遇到过将CALayer旋转360度的需求，如果有的话，你也许会尝试使用transform做旋转动画，然后发现。。。CALayer根本就不动。本文将深入解释并解决这个问题。

transform.rotation

CABasicAnimation支持transform.rotation这个keyPath，你可以将这个值从0改变到2pi进行动画。transform.rotation是绕z轴旋转。当然你也可以指定绕哪个轴旋转，比如x轴就是transform.rotation.x。这个可动画属性能够完美的实现旋转360度的需求。那么问题来了，既然它可以，为什么我这么写就不可以呢？我也是从0度的transform到360度的transform呀。

?
1
2
3
4
5
6
CATransform3D start = CATransform3DMakeRotation(0 * M_PI / 180.0, 0, 0, 1);
CATransform3D end = CATransform3DMakeRotation(2 * M_PI / 180.0, 0, 0, 1);
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
animation.fromValue = [NSValue valueWithCATransform3D:start];
animation.toValue = [NSValue valueWithCATransform3D:end];
animation.duration = 3.3;

动画插值

我们知道动画要想平滑，就得在我们给的from和to之间进行插值然后渲染这些插值情况下的帧。那么这些值是怎么插的呢？我们可以自定义一个Animatable的属性看看。下面是自定义Animatable的rotateX属性需要的代码。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@implementation HTCardLayer
- (void)setRotateX:(CGFloat)rotateX {
 _rotateX = rotateX;
 CATransform3D transform = CATransform3DIdentity;
 transform.m34 = 1.0 / -300.0;
 self.transform = CATransform3DRotate(transform, rotateX, 1, 0, 0);
}
- (void)display {
 CGFloat rotateX = [(HTCardLayer *)self.presentationLayer rotateX];
 NSLog(@"%lf", rotateX);
 CATransform3D transform = CATransform3DIdentity;
 transform.m34 = 1.0 / -300.0;
 self.transform = CATransform3DRotate(transform, rotateX, 1, 0, 0);
}
+ (BOOL)needsDisplayForKey:(NSString *)key {
 if ([key isEqualToString:@"rotateX"]) {
 return YES;
 }
 return [super needsDisplayForKey:key];
}
@end

needsDisplayForKey告诉系统rotateX修改后需要刷新显示，display则负责刷新显示，因为被动画的属性值都在presentationLayer中，所以我们从presentationLayer中取rotateX的最新值。下面是动画过程中打印出来的rotateX的值。基本就是一个线性的变化过程，因为我没有设置任何时间函数。rotateX是一个CGFloat，那如果是CATransform3D呢？会怎么变化？

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
0.352071
0.730180
1.101104
1.477982
1.833467
2.189324
2.550581
2.915682
3.273214
3.649389
4.013420
4.376663
4.740999
5.113640
5.483836
5.861515
6.234217

CATransform3D的插值

我新增了一个Animatable的属性customMatrix来查看CATransform3D类型的属性是如何插值的。CATransform3D其实是一个4x4的矩阵。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- (void)display {
 CGFloat rotateX = [(HTCardLayer *)self.presentationLayer rotateX];
 CATransform3D customMatrix = [(HTCardLayer *)self.presentationLayer customMatrix];
// NSLog(@"%lf", rotateX);
 NSLog(@"%lf, %lf, %lf, %lf", customMatrix.m11, customMatrix.m12, customMatrix.m13, customMatrix.m14);
 NSLog(@"%lf, %lf, %lf, %lf", customMatrix.m21, customMatrix.m22, customMatrix.m23, customMatrix.m24);
 NSLog(@"%lf, %lf, %lf, %lf", customMatrix.m31, customMatrix.m32, customMatrix.m33, customMatrix.m34);
 NSLog(@"%lf, %lf, %lf, %lf", customMatrix.m41, customMatrix.m42, customMatrix.m43, customMatrix.m44);
 NSLog(@"---------");
 CATransform3D transform = CATransform3DIdentity;
 transform.m34 = 1.0 / -300.0;
 self.transform = CATransform3DRotate(transform, rotateX, 1, 0, 0);
}
+ (BOOL)needsDisplayForKey:(NSString *)key {
 if ([key isEqualToString:@"rotateX"]) {
  return YES;
 }
 if ([key isEqualToString:@"customMatrix"]) {
  return YES;
 }
 return [super needsDisplayForKey:key];
}

下面是部分数据，我用的是绕z轴旋转的矩阵，所以只有m11,m12,m21,m22有数据，其他都是Identity矩阵的基本数值。可以看出m11,m12,m21,m22也是各自呈线性变化。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
0.982547, -0.186012, 0.000000, 0.000000
0.186012, 0.982547, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
0.930553, -0.366158, 0.000000, 0.000000
0.366158, 0.930553, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
0.830170, -0.557510, 0.000000, 0.000000
0.557510, 0.830170, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
0.700345, -0.713804, 0.000000, 0.000000
0.713804, 0.700345, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
0.560556, -0.828117, 0.000000, 0.000000
0.828117, 0.560556, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
0.403126, -0.915145, 0.000000, 0.000000
0.915145, 0.403126, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
0.221203, -0.975228, 0.000000, 0.000000
0.975228, 0.221203, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
0.030679, -0.999529, 0.000000, 0.000000
0.999529, 0.030679, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
-0.158010, -0.987438, 0.000000, 0.000000
0.987438, -0.158010, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
-0.347984, -0.937500, 0.000000, 0.000000
0.937500, -0.347984, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
-0.517222, -0.855851, 0.000000, 0.000000
0.855851, -0.517222, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
-0.672144, -0.740421, 0.000000, 0.000000
0.740421, -0.672144, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
-0.812617, -0.582798, 0.000000, 0.000000
0.582798, -0.812617, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
-0.905049, -0.425307, 0.000000, 0.000000
0.425307, -0.905049, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
-0.969663, -0.244444, 0.000000, 0.000000
0.244444, -0.969663, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------
-0.998409, -0.056390, 0.000000, 0.000000
0.056390, -0.998409, 0.000000, 0.000000
0.000000, 0.000000, 1.000000, 0.000000
0.000000, 0.000000, 0.000000, 1.000000
---------

这也就解释了为什么0到360度的动画直接不执行了，因为0和360度的矩阵一模一样，也就无法计算出任何插值。

总结

总而言之，如果你想360度旋转CALayer，要么使用transform.rotation，要么就自定义Animatable的属性。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对服务器之家的支持。

原文链接：https://www.jianshu.com/p/b9a904276d92

  • 旋转
  • iOS
  • CALayer

    • 延伸 · 阅读

    精彩推荐
    • IOSIOS 屏幕适配方案实现缩放window的示例代码

      IOS 屏幕适配方案实现缩放window的示例代码

      这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要...

      xiari5772021-06-01
    • IOS关于iOS自适应cell行高的那些事儿

      关于iOS自适应cell行高的那些事儿

      这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的...

      daisy6092021-05-17
    • IOSiOS布局渲染之UIView方法的调用时机详解

      iOS布局渲染之UIView方法的调用时机详解

      在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题，下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

      windtersharp7642021-05-04
    • IOSiOS中tableview 两级cell的展开与收回的示例代码

      iOS中tableview 两级cell的展开与收回的示例代码

      本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...

      J_Kang3862021-04-22
    • IOSiOS 雷达效果实例详解

      iOS 雷达效果实例详解

      这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

      SimpleWorld11022021-01-28
    • IOSIOS开发之字典转字符串的实例详解

      IOS开发之字典转字符串的实例详解

      这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家，让大家掌握这样的方法，需要的朋友可以参考下...

      苦练内功5832021-04-01
    • IOSiOS通过逆向理解Block的内存模型

      iOS通过逆向理解Block的内存模型

      自从对 iOS 的逆向初窥门径后，我也经常通过它来分析一些比较大的应用，参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多，不仅能满足自...

      Swiftyper12832021-03-03
    • IOS解析iOS开发中的FirstResponder第一响应对象

      解析iOS开发中的FirstResponder第一响应对象

      这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

      一片枫叶4662020-12-25
    最近更新
    编辑推荐
    阅读排行
    热门标签
    雷达扫描 　 关闭键盘 　 uiwebview 　 loading 　 触屏事件 　 多种语言 　 图标抖动 　 NSNull 　 NSLog 　 logs 　 统计代码行数 　 2048算法 　 xcode 教程 　 CAReplicatorLayer 　 异步加载图片 　 文字标签 　 远程下载图片 　 ios开发 　 Titanium 　 ChariTi 　 抽屉效果 　 构造类型 　 启动画面 　 nstimer 　 UISearchBar 　 ios代码 　 ios7 　 毛玻璃 　 Nib 　 手风琴 　
    © 2019-2023 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图