(iOS, Swift)用 CGAffineTransform 和 CATransform3D 做旋转,平移,缩放变换

CGAffineTransform

平面单次变换:

        // 缩放
        self.captainLabel.transform = CGAffineTransform(scaleX: 2, y: 2)
        // 旋转
        self.captainLabel.transform = CGAffineTransform(rotationAngle: CGFloat.pi / 2)
        // 平移
        self.captainLabel.transform = CGAffineTransform(translationX: 100, y: 100)


平面持续变换:

即每次都在原有基础上再变换:


需要使用到 CGAffineTransform 的 concatenating(_:) 方法

    /* 用来让 CGAffineTransform实例 关联我们指定的 CGAffineTransform 实例 */
    /* 通过关联我们上次变换后的CGAffineTransform实例, 就可以实现每次都在上次变换的基础上再进行变换 */
    /* 其实是向量相乘 */
    /* Concatenate `t2' to `t1' and return the result:
         t' = t1 * t2 */
    
    @available(iOS 2.0, *)
    public func concatenating(_ t2: CGAffineTransform) -> CGAffineTransform

事例代码

        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { (_) in
            UIView.animate(withDuration: 1) {
                // 缩放
                self.captainLabel.transform = CGAffineTransform(scaleX: 2, y: 2).concatenating(self.captainLabel.transform)
                // 旋转
                self.captainLabel.transform = CGAffineTransform(rotationAngle: CGFloat.pi / 2).concatenating(self.captainLabel.transform)
                // 平移
                self.captainLabel.transform = CGAffineTransform(translationX: 100, y: 100).concatenating(self.captainLabel.transform)
            }
        }


平面反向动画:

比如逆时针旋转:


需要使用到 CGAffineTransform 的 inverted() 方法

    /* Invert `t' and return the result. If `t' has zero determinant, then `t'
       is returned unchanged. */
    /* 对 调用该方法的 CGAffineTransform实例 进行取反 并返回 */
    @available(iOS 2.0, *)
    public func inverted() -> CGAffineTransform

事例代码:

        // 逆时针旋转
        self.captainLabel.transform = CGAffineTransform(rotationAngle: CGFloat.pi / 2).inverted()
        // 缩小
        self.captainLabel.transform = CGAffineTransform(scaleX: 2, y: 2).inverted()
        // 向左边平移50
        self.captainLabel.transform = CGAffineTransform.init(translationX: 100, y: 0).inverted()


CATransform3D

3D单次变换:

以向量(1, 1, 1)为轴, 旋转90度
        // y 轴方向放大两倍
        self.captainLabel.layer.transform = CATransform3DMakeScale(1, 2, 1)
        // 以向量(1, 1, 1)为轴, 旋转90度
        self.captainLabel.layer.transform = CATransform3DMakeRotation(CGFloat.pi / 2, 1, 1, 1)
        // 向x轴平移50, 向y轴平移50, 向z轴平移50
        self.captainLabel.layer.transform = CATransform3DMakeTranslation(50, 50, 50)


3D持续变换:

即每次都在原有基础上再变换:

持续以向量(1, 1, 1)为轴旋转, 每次旋转90度

第一种方法

        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { (_) in
            UIView.animate(withDuration: 1) {
                // 持续以向量(1, 1, 1)为轴旋转, 每次旋转90度
                self.captainLabel.layer.transform = CATransform3DRotate(self.captainLabel.layer.transform, CGFloat.pi / 2, 1, 1, 1)
                // x轴和y轴方向每次放大到原来的1.2倍
                self.captainLabel.layer.transform = CATransform3DScale(self.captainLabel.layer.transform, 1.2, 1.2, 1)
                // 每次向x轴方向移动10, 向y轴方向移动10
                self.captainLabel.layer.transform = CATransform3DTranslate(self.captainLabel.layer.transform, 10, 10, 0)
            }
        }

第二种方法
需要使用到 CATransform3DConcat(::) 方法

/* 用来关联两个 CATransform3DConcat 实例 */
/* 通过关联我们上次变换后的CATransform3DConcat实例, 就可以实现每次都在上次变换的基础上再进行变换 */
/* 其实是向量相乘 */
/* Concatenate 'b' to 'a' and return the result: t' = a * b. */

@available(iOS 2.0, *)
public func CATransform3DConcat(_ a: CATransform3D, _ b: CATransform3D) -> CATransform3D

事例代码

        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { (_) in
            UIView.animate(withDuration: 1) {
                // y 轴方向放大两倍
                let scaleTransform = CATransform3DMakeScale(1, 2, 1)
                self.captainLabel.layer.transform = CATransform3DConcat(self.captainLabel.layer.transform, scaleTransform)
                // 以向量(1, 1, 1)为轴, 旋转90度
                let rotateTransform = CATransform3DMakeRotation(CGFloat.pi / 2, 1, 1, 1)
                self.captainLabel.layer.transform = CATransform3DConcat(self.captainLabel.layer.transform, rotateTransform)
                // 向x轴平移50, 向y轴平移50, 向z轴平移50
                let translateTransform = CATransform3DMakeTranslation(50, 50, 50)
                self.captainLabel.layer.transform = CATransform3DConcat(self.captainLabel.layer.transform, translateTransform)
            }
        }


3D反向动画:

比如逆向针旋转:

持续以向量(1, 1, 1)为轴反向旋转, 每次旋转90度

需要使用到 CATransform3DInvert(_:) 方法

/* Invert 't' and return the result. Returns the original matrix if 't'
 * has no inverse. */
/* 对指定的 CGAffineTransform实例 进行取反 并返回 */
@available(iOS 2.0, *)
public func CATransform3DInvert(_ t: CATransform3D) -> CATransform3D

事例代码

        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { (_) in
            UIView.animate(withDuration: 1) {
                // 持续以向量(1, 1, 1)为轴反向旋转, 每次旋转90度
                let rotateTransform = CATransform3DMakeRotation(CGFloat.pi / 2, 1, 1, 1)
                self.captainLabel.layer.transform = CATransform3DConcat(self.captainLabel.layer.transform, CATransform3DInvert(rotateTransform))
                // x轴和y轴方向每次缩小到原来的1.2倍
                let scaleTransform = CATransform3DMakeScale(1.2, 1.2, 1)
                self.captainLabel.layer.transform = CATransform3DConcat(self.captainLabel.layer.transform, CATransform3DInvert(scaleTransform))
                // 每次向x轴反方向移动10, 向y轴反方向移动10
                let translateTransform = CATransform3DMakeTranslation(10, 10, 0)
                self.captainLabel.layer.transform = CATransform3DConcat(self.captainLabel.layer.transform, CATransform3DInvert(translateTransform))
            }
        }


CATransform3D 的其他方法

CATransform3DMakeAffineTransform(_:)

该方法可以通过 CGAffineTransform 创建 CATransform3D
即通过 平面变换 创建 3D变换

/* Return a transform with the same effect as affine transform 'm'. */

@available(iOS 2.0, *)
public func CATransform3DMakeAffineTransform(_ m: CGAffineTransform) -> CATransform3D

创建后可以结合其他CATransform3D的方法使用, 比如 CATransform3DConcat(::) 等

CATransform3DIsAffine(:)和CATransform3DGetAffineTransform(_:)

CATransform3DIsAffine(:)

判断一个 CATransform3D的实例 是否可以等效转换为 CGAffineTransform的实例

/* Returns true if 't' can be represented exactly by an affine transform. */

@available(iOS 2.0, *)
public func CATransform3DIsAffine(_ t: CATransform3D) -> Bool
CATransform3DGetAffineTransform(_:)

如果一个 CATransform3D的实例 可以等效转换为 CGAffineTransform的实例,则转化为 CGAffineTransform的实例 并返回

/* Returns the affine transform represented by 't'. If 't' can not be
 * represented exactly by an affine transform the returned value is
 * undefined. */

@available(iOS 2.0, *)
public func CATransform3DGetAffineTransform(_ t: CATransform3D) -> CGAffineTransform
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,026评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,655评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,726评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,204评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,558评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,731评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,944评论 2 314
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,698评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,438评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,633评论 2 247
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,125评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,444评论 3 255
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,137评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,103评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,888评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,772评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,669评论 2 271

推荐阅读更多精彩内容