IOS开发UI篇--仿射变换(CGAffineTransform)使用小结
2016-08-12 09:43
375 查看
IOS开发UI篇--仿射变换(CGAffineTransform)使用小结
标签: IOS动画矩阵仿射变换2015-09-22 12:51 1171人阅读 评论(0) 收藏 举报
分类:
IOS开发UI篇(12)
版权声明:本文为博主原创文章,未经博主允许不得转载。
目录(?)[+]
一、理论基础
请参考CGAffineTransform简单分析
二、效果演示
三、实现代码
3.1:位移变换
<code class="hljs haml has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">-<span class="ruby" style="box-sizing: border-box;">(void)positionAnimation{ </span> _demoView.transform = CGAffineTransformIdentity; [UIView animateWithDuration:1.0f animations:^{ _demoView.transform = CGAffineTransformMakeTranslation(100, 100); }]; }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>
3.2:缩放变换
<code class="hljs haml has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">-<span class="ruby" style="box-sizing: border-box;">(void)scaleAnimation{ </span> _demoView.transform = CGAffineTransformIdentity; [UIView animateWithDuration:1.0f animations:^{ _demoView.transform = CGAffineTransformMakeScale(2, 2); }]; }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>
3.3:旋转变换
<code class="hljs haml has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">-<span class="ruby" style="box-sizing: border-box;">(void)rotateAnimation{ </span> _demoView.transform = CGAffineTransformIdentity; [UIView animateWithDuration:1.0f animations:^{ _demoView.transform = CGAffineTransformMakeRotation(M_PI); }]; }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>
3.4:组合变换
<code class="hljs rsl has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">-(void)combinationAnimation{ <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//仿射变换的组合使用</span> _demoView.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">transform</span> = CGAffineTransformIdentity; [UIView animateWithDuration:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f animations:^{ CGAffineTransform transform1 = CGAffineTransformMakeRotation(M_PI); CGAffineTransform transform2 = CGAffineTransformScale(transform1, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>); _demoView.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">transform</span> = CGAffineTransformTranslate(transform2, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>); }]; }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>
3.5:矩阵的反转
<code class="hljs rsl has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">-(void)invertAnimation{ _demoView.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">transform</span> = CGAffineTransformIdentity; [UIView animateWithDuration:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f animations:^{ <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//矩阵反转</span> _demoView.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">transform</span> = CGAffineTransformInvert(CGAffineTransformMakeScale(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>)); }]; }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>
四、补充
CGAffineTransformIdentity : 单位矩阵变换,一般用于仿射变换的初始化或者还原。CGAffineTransformEqualToTransform(CGAffineTransform t1,
CGAffineTransform t2) : 判断两个变换矩阵是否相等
CGAffineTransformConcat(CGAffineTransform t1,
CGAffineTransform t2) : 得到两个矩阵相加后得到的最终矩阵
CGPoint CGPointApplyAffineTransform(CGPoint point,
CGAffineTransform t) : 某点通过矩阵变换之后的点
CGSize CGSizeApplyAffineTransform(CGSize size, CGAffineTransform t) : 某个size通过矩阵变换之后的size
CGRect CGRectApplyAffineTransform(CGRect rect, CGAffineTransform t) : 某个Rect通过矩阵变换之后的区域
五、Demo下载地址
相关文章推荐
- IOS开发UI篇--仿射变换(CGAffineTransform)使用小结
- iOS开发UI篇—UITableview控件使用小结
- iOS开发UI篇—UITableview控件使用小结
- iOS开发UI篇—UITableview控件使用小结
- iOS开发UI篇—UITableview控件使用小结
- iOS开发UI篇—UITableview控件使用小结
- IOS开发UI篇—UITableview控件使用小结
- iOS开发UI篇—UITableview控件使用小结
- iOS开发UI篇—UITableview控件使用小结
- iOS开发UI篇—UITableview控件使用小结
- iOS开发UI篇—Quartz2D使用(矩阵操作)
- iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
- 【Cocos2d游戏开发之十二】浅析使用C++/C/OC进行iOS游戏混编出现“failed with exit”问题与小结;
- iOS开发UI篇—Quartz2D简单使用(二)
- iOS开发UI篇—使用storyboard创建导航控制器以及控制器的生命周期
- iOS开发UI篇—Quartz2D使用(绘图路径)
- iOS开发UI篇—Quartz2D使用(信纸条纹)
- iOS开发UI篇—Quartz2D简单使用(一)
- iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)
- iOS开发UI篇—Quartz2D使用(图形上下文栈)