专栏首页進无尽的文章动画| 魔性形变之CGAffineTransform的使用

动画| 魔性形变之CGAffineTransform的使用

前言

在介绍UIView的2D、3D形变之前需要知道一个概念,那就是锚点,各种变换就会按照这个点来运动。所以想达到特殊的效果,可以通过修改锚点的位置来达到。

锚点的位置:默认为(0.5,0.5)。在对图像进行变换时,都是按照这个点来进行缩放,偏移等空间变换的。 一旦修改锚点的位置为:(0,0),那么图像的形变就会基于这个新锚点产生对应的效果。

CGAffineTransform

UIView的transform属性是一个CGAffineTransform类型,用于在二维空间做旋转,缩放和平移。CGAffineTransform是一个可以和二维空间向量(例如CGPoint)做乘法的3X2的矩阵。称为仿射变换,“仿射”的意思是无论变换矩阵用什么值,图层中平行的两条线在变换之后任然保持平行”。

官方定义:
struct CGAffineTransform {
    CGFloat a, b, c, d;
    CGFloat tx, ty;
};

虽然结构体中只有a,b,c,d,tx,ty 6个参数,但其实还有3个固定的参数[0,0,1]来组成3x3的矩阵。如下图所示:

[图片上传失败...(image-1b6485-1522132215759)]

x' = ax + cy + tx y' = xb + yd + ty

常规应用

恢复原状

    self.myView.transform = CGAffineTransformIdentity;

平移

    self.myView.transform = CGAffineTransformIdentity;
    [UIView animateWithDuration:0.3 animations:^{
       self.myView.transform = CGAffineTransformMakeTranslation(100, 100);
    }];
     或者 ************************************
     在某个transform变换的基础上平移
    CGAffineTransform transform = CGAffineTransformIdentity;
    transform =CGAffineTransformTranslate(transform, 100, 100);
     或者 ************************************
    self.showView.transform = CGAffineTransformMake(1, 0, 0, 1, 100, 100);

放缩

    self.myView.transform = CGAffineTransformIdentity;
    [UIView animateWithDuration:0.3 animations:^{
       self.myView.transform = CGAffineTransformMakeScale(.5, .5);
    }];
    或者 ************************************
    在某个transform变换的基础上放缩
    CGAffineTransform transform = CGAffineTransformIdentity;
    transform =CGAffineTransformScale(transform, .5, .5);
    或者 ************************************
    self.showView.transform = CGAffineTransformMake(.5, 0, 0, .5, 0, 0);

旋转

    self.myView.transform = CGAffineTransformIdentity;
    [UIView animateWithDuration:0.3 animations:^{
       self.myView.transform = CGAffineTransformMakeRotation(M_PI_4);
    }];
    或者 ************************************
    在某个transform变换的基础上旋转
    CGAffineTransform transform = CGAffineTransformIdentity;
    transform = CGAffineTransformRotate(transform, M_PI_4);
    反向旋转
   self.showView.transform = CGAffineTransformInvert(transform);
    或者 ************************************
    self.showView.transform = CGAffineTransformMake(cos(M_PI_4), sin(M_PI_4), -sin(M_PI_4), cos(M_PI_4), 0, 0);

其他有意思的方法

       /* 反向旋转 */
    CG_EXTERN CGAffineTransform CGAffineTransformInvert(CGAffineTransform t)
    CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);
    
    /* 合并两个transform :t' = t1 * t2 */
    CG_EXTERN CGAffineTransform CGAffineTransformConcat(CGAffineTransform t1,
                                                        CGAffineTransform t2) CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);
    
    /* 判读两个transform是否相等 */
    CG_EXTERN bool CGAffineTransformEqualToTransform(CGAffineTransform t1,
                                                     CGAffineTransform t2) CG_AVAILABLE_STARTING(__MAC_10_4, __IPHONE_2_0);
    
    /* 得到新的中心:
     p' = p * t
     where p = [ x y 1 ]. */
    CG_EXTERN CGPoint CGPointApplyAffineTransform(CGPoint point,
                                                  CGAffineTransform t) CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);
    
    /* 得到新的size:
     s' = s * t
     where s = [ width height 0 ]. */
    CG_EXTERN CGSize CGSizeApplyAffineTransform(CGSize size, CGAffineTransform t)
    CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);
    
    /* 得到新的rect */
    CG_EXTERN CGRect CGRectApplyAffineTransform(CGRect rect, CGAffineTransform t)
    CG_AVAILABLE_STARTING(__MAC_10_4, __IPHONE_2_0);

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实践 -实现一款中间凸起的TabBar

    这是看到一篇文章后感觉很有意思于是就把自己的效果改了改实现了一下,文末有原文链接。

    進无尽
  • 实践-小细节Ⅶ

    所以网页的y 坐标是 0 ,但是在 iOS 11里面就是无法在 状态栏上显示,iOS11下的系统不会这样会占用 状态栏的位置

    進无尽
  • 移动端APP设计趋势

    移动端APP在2017年经历了诸多的变化, 人工智能、聊天式的界面、响应式设计、虚拟现实(VR)和增强现实(AR)让设计师不断面临新的挑战。研究表明,用户每天耗...

    進无尽
  • CSS3之transition&tran

    http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/

    py3study
  • flink系列(8)-streamGraph

    上一篇我们说完了transformation的产生,这里来具体说一下如何产生streamGraph,下面先来看一下主要的产生逻辑

    yiduwangkai
  • 小加载动画

      在网上学了一个小加载动画,喜欢的话拿一个赞跟我换吧!纯 CSS 没有什么套路,来吧!展示:

    我不是费圆
  • CSS3详解:transform

    近来,HTML5和CSS3的发展速度还是很可观的,国内外不乏一些大站,酷站都在使用最新的技术。面对新的技术,我们该如何正确的把握和使用到今后的项目实战中呢?针对...

    py3study
  • EasyPR--中文车牌识别系统 开发详解(开源)

    一个开源的中文车牌识别系统, Git地址为:https://github.com/liuruoze/EasyPR。   我给它取的名字为EasyPR,也就是Ea...

    朱晓霞
  • EasyPR--中文车牌识别系统 开发详解(开源)

    朱晓霞
  • css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。

    transitions(过渡) 被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值。   主要包括四个属性:     执行变换的属性:...

    用户1197315

扫码关注云+社区

领取腾讯云代金券