iOS 动画入门到精通(1.3):缩放

417 查看

这一节大家可以学到:

 

1. 前面一节的第一,第二点。

2. UIView 如何添加单击和双击功能

3. 什么是 Affine Transform

4. 通过 Affine Transform 来实现缩放动画

 

什么是 Affine Transformation?

 

图像的变形有很多种,一般来说 Affine Transformation 是2维变化,主要满足以下两点:

  1. 任意一个点 A,变形前后都属于同一条线
  2. 每条线的中点变化后还是中点

 

在iOS 和 Mac OS 开发中,只要看到 Affine 就要记住这是跟 2 维图形变形有关的,Affine Transform 是一个视图在2维坐标中的一个状态。大家不用管什么矩阵圆阵的,只要记住这样定义的变量,它的默认值是 CGAffineTransformIdentity, 通过改变这个变量的值可以实现缩放,位移和旋转(下一节介绍)。

 

Affine Transform 缩放

 

每个UIView 都有一个 transform 的属性,它的默认值就是上面提到的。只要在动画 block 中改变它的值就可以产生动画效果。缩放有两个常用的方法:

 

CGAffineTransformMakeScale(sx, sy)

CGAffineTransformScale(t, sx, xy)

 

sx: x 轴(长)缩放值

sy: y 轴(高)缩放值

t:CGAffineTransform 变量

 

在 Transform 方法中,包括以后的 3D Transform,只要方法名字里有 ‘Make’ 就是基于默认值的改变,例如, 以下方法把 aView 基于默认状态变长一倍,变高两倍:

如果把长度变成原来的一半,高度为原来的40%, 可以这样:

要注意,以下两行代码运行后不会把视图 x 和 y 各放大 4 倍,只会各放大 2 倍:

 

因为这是基于默认值放大2倍,不管执行多少次都只是默认值的2倍。

 

那么现在问题来了,如果有一个UIButton, 每次按一下都比之前的x,y各放大1.5倍如何实现。这时候就得用到:CGAffineTransformScale(t, sx, xy)了

 

可以这样实现:

这样每次按button都会比原来放大 1.5×1.5 倍了。

示例代码

好了,基础知识就这么多,来看看代码吧,可以在这里下载:

 

Swift: http://www.xmartcalc.com/ios-animation/codes/1.3/Animation1.3_Swift.zip

Objective-C:  http://www.xmartcalc.com/ios-animation/codes/1.3/Animation1.3_OC.zip

 

这个程序开始后跟上一节的一样,每当你单击屏幕时,紫色的视图就会放大;当你双击屏幕时,就会缩到原来的大小。

 

如果你对小牛哥做的APP感兴趣,可以看看这里:

 

小牛计算器 (打造最牛逼的计算神器:http://www.xmartcalc.com )

https://itunes.apple.com/gb/app/xmart-calculator+/id827740598?mt=8

智能多翻译 (3种语音同时翻译)

https://itunes.apple.com/gb/app/multi-translate/id768642496?mt=8

 

代码正式开始: