iOS 過渡動畫之入門模仿系統

2021-09-11 10:53:53 字數 2668 閱讀 2483

注意:我為過渡動畫寫了兩篇文章: 第一篇:[ios]過渡動畫之簡單模仿系統,主要分析系統簡單的動畫實現原理,以及講解座標系、絕對座標系、相對座標系,座標系轉換等知識,為第二篇儲備理論基礎。最後實現 mac 上的檔案預覽動畫。

第二篇:[ios]過渡動畫之高階模仿 airbnb ,主要基於第一篇的理論來實現複雜的介面過渡,包括進入和退出動畫的串聯。最後將這個動畫的實現部分與當前介面解耦,並封裝為乙個普適(其他類似介面也適用)的工具類。

這兩篇文章將會帶你學到如何實現下圖 airbnb 首頁類似的過渡動畫,同時最重要的,你將學會怎麼分析類似的動畫,並且知道如何動手實現。github 位址在這裡。

好,準備好了嗎?現在開始第一篇。這一篇主要分析系統簡單的動畫實現原理,以及講解座標系、絕對座標系、相對座標系,座標系轉換等知識,為第二篇儲備理論基礎。最後實現 mac 上的檔案預覽動畫。我很多時候做乙個東西的時候,我會先想一下,我們的老東家蘋果有沒有做過類似的?如果有,那肯定蘋果的更靠譜。看到上面那個 airbnb 動畫的時候,我首先想到 mac 上這個檔案預覽的動畫。

你還能想到 iphone 上系統自帶更多的類似的動畫嗎?

這個動畫應該怎麼實現呢?我來描述一下這個過程,你看我說的對不對。

有沒有從這個描述中 get 到幾個關鍵點呢?

如果嘗試把這些關鍵點和動畫過程串起來,是不是就應該是下面這樣?動畫開始,先建立用來做動畫的元素(是新產生,不是拿到資料夾進行動畫,因為你也看到,之前那個資料夾它仍然在那裡沒有動),然後計算起點位置,在把這個元素新增到起點位置,接下來計算終點位置,然後開始做動畫。

在實現之前,我們先來複習一下初中物理。

現在我們要計算這個綠色的矩形的絕對座標,也就是座標系轉換。從下圖計算我們可以很快算出這個值為(100, 160)。

可能你看到這裡會覺得這些都很簡單,還用你再說一遍?而且這些好像也沒什麼用,對吧?

上面說過座標轉換的問題,在實際開發中,我們的檢視 view 都是層層巢狀,所以將乙個點的 frame 從乙個座標系遷移到另外乙個座標系不可能依賴於我們開發者去手動計算。因為系統需要將檢視渲染到螢幕上,所以系統是知道檢視關係的。好在系統提供了兩個 frame 轉換函式。這兩個函式都是 uiview 的物件方法。

- (cgrect)convertrect:(cgrect)rect toview:(nullable uiview *)view;

- (cgrect)convertrect:(cgrect)rect fromview:(nullable uiview *)view;

複製**

cgrect targetframe = [a convertrect:b.frame toview:c];

複製**

cgrect targetframe = [c convertrect:b.frame fromview:a];

複製**

cgrect targetframe =  [a convertrect:b.frame toview:window];

cgrect targetframe = [window convertrect:b.frame fromview:a];

複製**

或者這麼寫:

cgrect targetframe =  [a convertrect:b.frame toview:nil]; // 這個函式中,如果傳個 nil,則代表視窗 window.

複製**

理清楚這些座標轉換是很有必要的,因為等會當檢視關係變得很複雜的時候,假如不能理清楚,可能你自己都不知道在哪個座標系,你會覺得明明自己寫對了,但是**跑起來就是錯的。如果出現這種情況,還是應該回到起點來,理清楚這些座標關係。

##04.動手實現

@inte***ce viewcontroller ()

@property (weak, nonatomic) iboutlet uiimageview *folderimageview;

/** 動畫元素 */

@property(nonatomic, strong)uiimageview *animationimageview;

/** 是否是開啟預覽動畫 */

@property(nonatomic, assign)bool isopenoverview;

@end

複製**

// 將乙個 view 進行截圖

-(uiimage *)snapimageforview:(uiview *)view

複製**

-(void)touchesbegan:(nsset*)touches withevent:(uievent *)event

if (self.isopenoverview) completion:^(bool finished) ];

}else completion:^(bool finished) ];

}self.isopenoverview = !self.isopenoverview;

}複製**

github 位址在這裡。

下面這個鏈結是我所有文章的乙個集合目錄。這些文章凡是涉及實現的,每篇文章中都有 github 位址,github 上都有原始碼。

iOS 模仿系統的抖動動畫

模仿系統的抖動動畫,主要用的是cakeyframeanimation 見之前篇博文 和nstimer,不多說直接上 define degreestoradians x m pi x 180.0 左右搖擺的角度 define radius 3.0f define shaketime 0.5 動畫實現 ...

iOS動畫入門一

在ios中動畫實現技術主要是 core animation。core animation負責所有的滾動 旋轉 縮小和放大以及所有的ios動畫效果。其中uikit類通常都有animated 引數部分,它可以允許是否使用動畫。本文將介紹uiview動畫的實現方式,有基礎方法和block方法。uiview...

CSS3之動畫和過渡

在css3中使元素從一種樣式逐漸變化為另一種樣式的效果被稱作為動畫。1.keyframes 規則是建立動畫。2.keyframes 規則內指定乙個 css 樣式逐步從目前的樣式更改為新的樣式。keyframes move to 也可以百分比來規定改變發生的時間,from 和 to 等價於0 和100...