iOS开发之仿射变换示例总结

本篇博客比较简单,但还是比较实用的。其中的示例依然使用Swift3.0来实现,该博客算是下篇博客的一个引子,因为我们下篇博客要介绍使用Swift开发iOS应用中常用的一些Extension。而在这些Extension中的Image Extension中会用到仿射变换的东西来对图片进行处理。所以本篇博客就先将fang放射变换(CGAffineTransform)的东西拎出来单独的过一下,这样在下篇博客中就可以减少对仿射变换的介绍了。

在之前的博客中,我们聊过仿射变换的东西,不过是使用的放射变换来实现的动画,关于该部分内容请移步于《iOS开发之各种动画各种页面切面效果》。之前的博客主要讲述了CATransition,而本篇博客主要聊的内容是CGAffineTransform。当然本篇博客的内容依然是依托于相关的示例,该示例对应的源代码会在github上进行分享,博文结尾处为github源码分享链接。虽然今天博客中的代码以及示例都比较简单,但是还是有必要单独拎出来介绍一下的。

一、平移

接下来我们来看一下CGAffineTransform的平移,在使用CGAffineTransform进行平移的时候,我们要注意坐标系的转换。下方是我们在做UI布局时的坐标系,也就是iOS屏幕的坐标系。左上角是原点,x轴右为正,左为负,y轴上为负,下为正。下方就是iPhone的屏幕坐标系。平移时也是采用下方的坐标系结构。

下方就是对ImageView的平移的效果。分别使用两个Slider来控制左右移动和上下移动。具体运行效果如下所示。

控制平移的代码也是比较简单的,如下所示。x参数为正时则向右移动,x为负数时,向左移动。而参数y为正时,向下移动,y为负值时向上运动。具体代码如下所示:

二、缩放

聊完平移,接下来我我们来看一下仿射变换的缩放。使用CGAffineTransform进行View的缩放也是比较简单的,下方就是对ImageView进行缩放的运行效果。在缩放的过程中分为x方向上的缩放和y方向的缩放。x和y分别表示在x轴和y轴上缩放的倍数,如果x或者y为负数的话,那么将相应的视图翻转后在进行缩放,运行效果如下所示。

实现上述效果也是比较简单的,代码就下方一行,如下所示,x就表示x轴上的缩放量,y就表示y轴上的缩放量。

三、旋转

接下来就来聊聊CGAffineTransform的旋转,直奔主题,下方就是旋转的运行结果。旋转是是按照弧度进行旋转的,一圈是0-2∏,如果弧度为正,则是顺时针旋转,如果弧度为负,则是逆时针旋转。具体运行结果如下所示:

实现上述效果的代码也是比较简单的,具体代码如下所示:

本篇博客的内容就介绍完了,下方是本篇博客所涉及Demo的github源码分享链接。

github分享链接:https://github.com/lizelu/CGAffineTransformDemo

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

GIF图像转换为多张JPG

HTML5学堂:在JS效果中,有一个使用代码处理多张连续的JPG图像,显示为动态GIF图的效果。于是乎,自己不得不制作多个连续的JPG图片。既然要做素材,也就顺...

30040
来自专栏练小习的专栏

伪类以及伪元素的一些使用小技巧

在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用...

22690
来自专栏优启梦

使用:before选择器给你的Logo添加扫光特效

在知更鸟大神的网站看到他的Begin主题Logo有扫光特效,看起来还是比较炫的。研究了一下,发现是用:before选择器实现的扫光效果,现在把代码甩出来,觉得好...

41960
来自专栏听雨堂

MapX中实现友好的交互

        MapX的标注,修改标注功能尽管都有,但都十分的难用,操作起来,用户体验非常糟糕。不光编程难以控制,操作起来也不方便:工具选择要不断的切换,移动...

21070
来自专栏Micro_awake web

HTML5语义化元素

语义化元素:有意义的元素。 对语义化的理解: 正确的标签做正确的事情; HTML5语义化元素让页面内容结构化清晰; 便于开发人员阅读,理解,维护; 搜索引擎爬虫...

26350
来自专栏帮你学MatLab

期刊图片的输出

期刊图片 下载地址:http://www.mathworks.se/matlabcentral/fileexchange/727 也可在文后下载 详细介绍见...

383100
来自专栏码生

StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle 等

StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle...

57220
来自专栏Android群英传

记一次代码中毒急救

13120
来自专栏DannyHoo的专栏

imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal让item上的图片原样显示

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

11610
来自专栏bboysoul

python练手小程序(石头剪子布)

https://asciinema.org/a/YYGXOzfoP3dAu9mMXCV4J5GRs

17320

扫码关注云+社区

领取腾讯云代金券