iOS Animation (二)

方块动画;Cube Animation

怎么简单实现类似于3D动画的样式?

我们可以声明一个新的替代label

funccubeTransition(labellabel:UILabel, text:String, direction:AnimationDirection){

letauxLabel=UILabel(frame: label.frame) auxLabel.text=textauxLabel.font= label.fontauxLabel.textAlignment= label.textAlignmentauxLabel.textColor= label.textColorauxLabel.backgroundColor=UIColor.clearColor()

}

1.label:想要让label实现类似3D动画的label

2.text:显示在Label上的文字

3.direction:显示new label的样式,从上还是从下;

注意事项:

你会发现,新的labelcopy了除了background color以外的所有旧的label属性,因为UIKit有个bug,就是如果你拷贝background color,它会显示不透明的黑色。

你不想在同一位置出现了两个Label,相反,想要让辅助的label不在现有的View上,并且使它最小化。

1、首先要计算辅助label的垂直偏移量;

2、CGFffineTransformMakeTranslation这个转换动画可以移动UIView的位置,这里需要注意它是以初始位置为基础进行移动的,

然后添加动画,oldLabel与auxiliaryLab直接的动画

//方块动画

func cubeTransition(label label: UILabel, text: String, direction:AnimationDirection) {

///创建一个替代label

let auxiliaryLab = UILabel(frame: label.frame)

auxiliaryLab.text = text

auxiliaryLab.font = label.font

auxiliaryLab.textAlignment = label.textAlignment

auxiliaryLab.textColor = label.textColor

//颜色不可以直接复制,UIKit有个Bug

auxiliaryLab.backgroundColor = UIColor.clearColor()

//替代Label的Y偏移量

let auxiliaryLabOffset = CGFloat(direction.rawValue) *

label.frame.size.height / 2

//替代Label的旋转,

//CGAffineTransformMakeScale为按宽高比例,在此为高度的十分之一

//CGFffineTransformMakeTranslation这个转换动画可以移动UIView的位置,这里需要注意它是以初始位置为基础进行移动的

//先将替代

//不同样式可以改变X,有转场的方式从下往上添加,在此可以改变样式

auxiliaryLab.transform = CGAffineTransformConcat(

CGAffineTransformMakeScale(0.5, 0.1),

CGAffineTransformMakeTranslation(0.0, auxiliaryLabOffset))

label.superview!.addSubview(auxiliaryLab)

UIView.animateWithDuration(0.5, delay: 0.0, options: .CurveEaseOut,animations: {

//恢复替代视图的默认状态(每次变换前都要置位,不然你变换用的坐标系统不是屏幕坐标系统(即绝对坐标系统),而是上一次变换后的坐标系统。)

auxiliaryLab.transform = CGAffineTransformIdentity

//将原来的label向上旋转消失(按比例加上位置偏移)

label.transform = CGAffineTransformConcat(

CGAffineTransformMakeScale(1.0,0.1),

CGAffineTransformMakeTranslation(0.0, -auxiliaryLabOffset))

}, completion: {_ in

//恢复默认状态,然后将替代Label的值在此复制给原本的Lable

label.transform =CGAffineTransformIdentity

label.text = auxiliaryLab.text

//remove auxiliaryLable

auxiliaryLab.removeFromSuperview()

})

}

其中关于CGAffineTrans相关的:

矩阵乘法:A B相乘要A的列数等于B的行数才有定义,结果是一个 A行B列的矩阵C,C的每个元素值为A对应的行与B对应的列的元素乘积的和;

原理

CGAffineTransform

CGAffineTransform 的结构如下

struct CGAffineTransform {

CGFloat a;

CGFloat b;

CGFloat c;

CGFloat d;

CGFloat tx;

CGFloat ty;

};

typedef struct CGAffineTransform CGAffineTransform;

它其实表示的是一个矩阵

因为最后一列总是是(0,0,1),所以有用的信息就是前面两列

对一个view进行仿射变化就相当于对view上的每个点做一个乘法

结果就是

基本上就是如果不看c和b的话

a表示x水平方向的缩放,tx表示x水平方向的偏移

d表示y垂直方向的缩放,ty表示y垂直方向的偏移

如果b和c不为零的话,那么视图肯定发生了旋转

常量

CGAffineTransformIdentity

const CGAffineTransformCGAffineTransformIdentity;

这个就是没有变化的最初的样子


创建一个仿射矩阵

CGAffineTransformMake 直接赋值来创建

CGAffineTransformMakeRotation 设置角度来生成矩阵

CGAffineTransformMakeScale  设置缩放,及改变a、d的值

CGAffineTransformMakeTranslation  设置偏移

改变已经存在的放射矩阵

CGAffineTransformTranslate  原始的基础上加上偏移

CGAffineTransformScale加上缩放

CGAffineTransformRotate加上旋转

CGAffineTransformInvert 反向的仿射矩阵比如(x,y)通过矩阵t得到了(x',y')那么通过这个函数生成的t'作用与(x',y')就能得到原始的(x,y)

CGAffineTransformConcat 通过两个已经存在的放射矩阵生成一个新的矩阵t' = t1 * t2

应用仿射矩阵

CGPointApplyAffineTransform 得到新的点

CGSizeApplyAffineTransform  得到新的size

CGRectApplyAffineTransform  得到新的rect

评测矩阵

CGAffineTransformIsIdentity  是否是CGAffineTransformIsIdentity

CGAffineTransformEqualToTransform 看两个矩阵是否相等

应用

放射矩阵一个常用的情形就是根据用户的手势来相应的改变视图的变换

UIPanGestureRecognizer  对应位移

UIPinchGestureRecognizer  对应缩放

UIRotationGestureRecognizer 对应旋转

通常如果需要看到实时的手指移动视图就相应的变换的技巧就是,每次接收到对应的gesture时间就相应的改变view的transform,然后吧这个gesture对应的translation、scale、rotation置为初始值。


参考:iOS Animations by Tutorials

CGAffineTransform 放射变换


更多精彩内容请关注“IT实战联盟”哦~~~

![IT实战联盟.jpg](http://upload-images.jianshu.io/upload_images/326255-f67b0f0dd5fe5874.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500)

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

推荐阅读更多精彩内容

  • >*很不幸,没人能告诉你母体是什么,你只能自己体会* --骇客帝国 在第四章“可视效果”中,我们研究了一些增强图层...
    夜空下最亮的亮点阅读 1,643评论 0 2
  • 书写的很好,翻译的也棒!感谢译者,感谢感谢! iOS-Core-Animation-Advanced-Techni...
    钱嘘嘘阅读 2,289评论 0 6
  • 序言 追求美好是人的天性,这是猿们无法避免的。我们总是追求更为酷炫的实现,如果足够仔细,我们不难发现一个好的动画通...
    姚钦阅读 770评论 0 3
  • 我深深的知道自己如何走到现在。我也深深的不知道,自己为何走到现在。 我深深的知道穷人们为什么穷苦,遇到了哪些不幸。...
    井底的动物阅读 232评论 1 0
  • 醉桃源 银杏叶黄地上画 宛如丹青家 飞墨苍穹点朱砂 虬龙舞月华 天为幕 聚娇娃 非得南山下 此时校园任由他 悠然醉晚霞
    东篱儿阅读 217评论 2 2