一.封裝動畫方法
1.用CATransition實現動畫的封裝方法如下,每句代碼是何意思,請看註釋之。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
#pragma - { //創建CATransition對象 CATransition //設置運動時間 animation.duration //設置運動type animation.type if (subtype //設置子類 animation.subtype } //設置運動速度 animation.timingFunction [view.layer "animation" ]; } |
代碼說明:
CATransition常用的屬性如下:
-
duration:設置動畫時間
-
type:稍後下面會詳細的介紹運動類型
-
subtype:和type匹配使用,指定運動的方向,下面也會詳細介紹
-
timingFunction :動畫的運動軌跡,用於變化起點和終點之間的插值計算,形象點說它決定了動畫運行的節奏,比如是均勻變化(相同時間變化量相同)還是先快後慢,先慢後快還是先慢再快再慢。
動畫的開始與結束的快慢,有五個預置分別爲(下同):
-
kCAMediaTimingFunctionLi near 線性,即勻速 -
kCAMediaTimingFunctionEa seIn 先慢後快 -
kCAMediaTimingFunctionEa
seOut 先快後慢 -
kCAMediaTimingFunctionEa
seInEaseOut 先慢後快再慢 -
kCAMediaTimingFunctionDe fault 實際效果是動畫中間比較快.
2.用UIView的block回調實現動畫的代碼封裝
1
2
3
4
5
6
7
8
|
#pragma - { [UIView [UIView [UIView }]; } |
3.改變View的背景圖,便於切換時觀察
1
2
3
4
5
|
#pragma -(void)addBgImageWithImageName:(NSString { self.view.backgroundColor }
|
1.我們在View上添加多個Button,給不同的Button設置不同的Tag值,然後再ViewController中綁定同一個方法,點擊不同的button實現不同的頁面切換效果。storyBoard上的控件效果如下圖所示:
2.下面我們就開始編寫點擊button要回調的方法
(1).定義枚舉來標示按鈕所對應的動畫類型,代碼如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
typedef Fade //淡入淡出 Push, //推擠 Reveal, //揭開 MoveIn, //覆蓋 Cube, //立方體 SuckEffect, //吮吸 OglFlip, //翻轉 RippleEffect, //波紋 PageCurl, //翻頁 PageUnCurl, //反翻頁 CameraIrisHollowOpen, //開鏡頭 CameraIrisHollowClose, //關鏡頭 CurlDown, //下翻頁 CurlUp, //上翻頁 FlipFromLeft, //左翻轉 FlipFromRight, //右翻轉 } |
(2),獲取Button的Tag值:
1
2
|
UIButton AnimationType |
(3).每次點擊button都改變subtype的值,包括上,左,下,右
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
NSString switch (_subtype) case 0: subtypeString break ; case 1: subtypeString break ; case 2: subtypeString break ; case 3: subtypeString break ; default : break ; } _subtype if (_subtype _subtype } |
1
2
3
4
|
switch (animationType) { //各種Case,此處代碼下面會給出 } |
3.調用我們封裝的運動方法,來實現動畫效果
(1)淡化效果
1
2
3
|
case Fade: [self break ; |
(2).Push效果
1
2
3
|
case Push: [self break ; |
效果如下:
(3).揭開效果:
1
2
3
|
case Reveal: [self break ; |
效果圖如下:
(4).覆蓋效果
1
2
3
|
case MoveIn: [self break ; |
效果圖如下:
(5).立方體效果
1
2
3
|
case Cube: [self "cube" WithSubtype:subtypeString break ; |
效果如下:
(6).吮吸效果
1
2
3
|
case SuckEffect: [self "suckEffect" WithSubtype:subtypeString break ; |
效果如下:
(7).翻轉效果
1
2
3
|
case OglFlip: [self "oglFlip" WithSubtype:subtypeString break ; |
圖如下:
(8).波紋效果
1
2
3
|
case RippleEffect: [self "rippleEffect" WithSubtype:subtypeString break ; |
(9).翻頁和反翻頁效果
1
2
3
4
5
6
7
|
case PageCurl: [self "pageCurl" WithSubtype:subtypeString break ; case PageUnCurl: [self "pageUnCurl" WithSubtype:subtypeString break ; |
(10).相機打開效果
1
2
3
4
5
6
7
|
case CameraIrisHollowOpen: [self "cameraIrisHollowOpen" WithSubtype:subtypeString break ; case CameraIrisHollowClose: [self "cameraIrisHollowClose" WithSubtype:subtypeString break ; |
(11).調用上面封裝的第二個動畫方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
case CurlDown: [self break ; case CurlUp: [self break ; case FlipFromLeft: [self break ; case FlipFromRight: [self break ; |
上面的Demo的源碼放在GitHub上,其地址爲:https://github.com/lizelu/CATransitionDemo.git