當前位置:編程學習大全網 - 編程語言 - iOS 8自定義動畫轉場上手指南

iOS 8自定義動畫轉場上手指南

篇壹:iOS 8自定義動畫轉場上手指南

 iOS 5發布的時候,蘋果針對應用程序界面的設計,提出了壹種全新的,革命性的方法—Storyboard,它從根本上改變了現有的設計理念。iOS 5之前,每個視圖控制器通常都伴有壹個Interface Builder的文件,叫nib或者xib,這個想法比較簡單:每個視圖控制器的界面應該在各自的nib文件中設計,而所有的nib文件壹起構成了整個應用程序的界面。壹方面,這個是很方便的,因為它強迫開發者在界面設計的時候將註意力集中在界面上,但另壹方面,到最後,太多的文件不得不被創建,開發者將不能概覽應用的整體界面。

 隨著storyboard的產生,上面的這些都成為了歷史,因為這種新方法受到了開發者社區的廣泛使用。相比老的技術,storyboards提供了三個重要的優勢:

 整個界面設計只發生在壹個文件裏。項目的總文件數量大大減少了,特別是在大項目裏。當然妳可以使用額外的nib文件,並且允許只創建輔助視圖。

 開發者能即時瀏覽應用的界面和流程。 視圖控制器之間的轉換(界面設計的專業術語叫場景(scene)),以及轉換是如何發生的,在storyboard中已被完美地定義並清楚地呈現給了開發者。

 綜上所述,場景之間的轉換構成storyboard的特殊部分,我們壹般把它叫做轉場(segue)。

 轉場跟應用的導航和處理是密切相關的,因為它明確定義了壹個視圖切換到另壹個視圖的轉換細節。這些細節指定了是否應用動畫,動畫的類型,當然還有實際轉換時的準備和性能。除此之外,轉場也用來將傳遞數據到下壹個視圖控制器裏,這個用法也很常見。

 從編程的角度看,場景是UIStoryboardSegue類的壹個對象,它第壹次在iOS 5中介紹到。和其它類的對象

 不同的是,這種對象不能直接的創建或使用。不過妳可以指定轉場的屬性,然後在轉場即將發生時提供給它以達到目的。UIKit框架提供了壹些帶默認動畫過渡的預定義的轉場,包括:push segues(包括導航控制器的app),帶有動畫選擇的模態轉場(modal segues), popover segues。更高級的情況下,iOS SDK默認的轉場可能不夠用,所以開發者必須實現他們的自定義轉場(custom segues)。 創建壹個自定義轉場並不難,因為它是iOS標準編程技術的組成部分。實際上妳只需要生成UIStoryboardSegue的子類,並重載壹個叫perform的方法即可。這個perform方法中必須實現自定義動畫的邏輯。從壹個視圖控制器轉換到另壹個以及返回操作的觸發,也需要由開發者編程提供,這是壹個標準的步驟。 在本教程中,我的目標是向妳們展示如何實現自定義轉場,並通過壹個簡單的演示應用介紹這個概念的所有方面。擁有創建自定義轉場的知識, 可以將妳導

 向開發更強大的app的道路。此外,對於最大化用戶體驗,並開發引人註目的漂亮應用,自定義轉場也很有幫助。 如果妳有興趣學習我剛剛說的話,就壹起來探索教程裏的`所有細節和自定義轉場的奧秘吧。

 應用程序概述不像我之前幾個教程提供了壹個啟動項目,本教程我們將從頭開始創建app。事實上,我是故意這麽做的,因為,項目中壹些重要部分需要用到Interface Builder,所以我認為從頭開始按部就班的來做,能讓妳看清裏面的細節。

 正如我先前所說,我們將開發壹個非常簡單的app,在這個應用中我們將創建兩個自定義轉場。需要提前說明的是,我們的演示應用將有三個視圖控制器,也就是在Interface Builder中有三個場景和三個相關類。默認情況下,第壹個是由Xcode創建的,因此我們只要再添加兩個。我們將創建的自定義轉場用來導航第壹個視圖控制器到第二個

 (以及返回),以及從第壹個到第三個(以及返回)。第二個和第三個視圖控制器之間我們不添加任何聯系。

 因此,我們需要創建兩個自定義轉場。因為要包括返回,每壹個轉場需要創建兩個對應的類(因此,***四個):第壹個類裏我們將實現從第壹個視圖控制器到另壹個轉換的所有自定義邏輯。第二個類實現返回到第壹個視圖控制器的邏輯,或者換句話說要實現解除轉場(unwind segue)。後面會講到解除轉場,現在只需要記住這就是用來讓我們返回到前壹個視圖控制器的轉場。

 視圖控制器本身沒什麽需要做的。我們會用壹個label註明視圖控制器的名稱,每壹個會有壹個不同的背景顏色,可以讓我們很容易地查看轉換(是的,這將是壹個五顏六色的應用)。第壹個和第二個視圖控制器也會多壹個label,其中從其他視圖控制器傳來的自定義的消息將被顯示出來。

 最後,轉場將在以下的動作發生的時候

篇二:Swift常用UIView Animation API使用

 Swift常用UIView Animation API使用

 本文默認讀者有基礎動畫編寫能力

 參數解釋

 *如解釋有誤,請指出,謝謝*

 1 duration: 動畫執行時間

 2 delay:動畫延遲執行時間

 3 options:

 .Repeat:動畫永遠重復的運行

 .Autoreverse:動畫執行結束後按照相反的行為繼續執行。該屬性只能和.Repeat屬性組合使用

 .CurveLinear:動畫做線性運動

 .CurveEaseIn:動畫緩慢開始,然後逐漸加速

 .CurveEaseOut:動畫迅速開始,在結束時減速

 .CurveEaseInOut:動畫慢慢開始,然後加速,在結束之前減速.TransitionNone:沒有轉場動畫

 .TransitionFlipFromTop :從頂部圍繞水平軸做翻轉動畫 .TransitionFlipFromBottom:從底部圍繞水平軸做翻轉動畫

 .TransitionFlipFromLeft :從左側圍繞垂直軸做翻轉動畫

 .TransitionFlipFromRight:從右側圍繞垂直軸做翻轉動畫

 .TransitionCurlUp:從下往上做翻頁動畫

 .TransitionCurlDown :從上往下做翻頁動畫

 .TransitionCrossDissolve:視圖溶解消失顯示新視圖動畫

 4 usingSpringWithDamping:彈簧阻力,取值範圍為0.0-1.0,數值越小“彈簧”振動效果越明顯。

 5 initialSpringVelocity:動畫初始的速度(pt/s),數值越大初始速度越快。但要註意的是,初始速度取值較高而時間較短時,也會出現反彈情況。普通動畫

 animateWithDuration:delay:options:animations:completion: class func animateWithDuration(_ duration: NSTimeInterval,

 delay delay: NSTimeInterval,

 options options: UIViewAnimationOptions,

 animations animations: () -> Void,

 completion completion: ((Bool) -> Void))

 Animate changes to one or more views using the specified duration, delay, options, and completion handler.

 對壹個或者多個視圖按照相應參數做固定動畫(翻譯純屬個人見解,有錯請指出)

 animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:

 class func animateWithDuration(_ duration: NSTimeInterval,

 delay delay: NSTimeInterval,

 usingSpringWithDamping dampingRatio: CGFloat,

 initialSpringVelocity velocity: CGFloat,

 options options: UIViewAnimationOptions,

 animations animations: () -> Void,

 completion completion: ((Bool) -> Void))

 Performs a view animation using a timing curve corresponding to the motion of a physical spring.

 對壹個視圖按照相應參數做彈性動畫(類似於彈簧,翻譯純屬個人見解,有錯請指出)

 圖片借鑒Renfei Song's Blog,只為更清楚的展示調用兩個API的不同效果

 Spring Animation 和普通的動畫的運動曲線的對比:

 Spring Animation, Ease-Out Animation 和 Linear Animation 的動畫效果:

 轉場動畫

 transitionWithView:duration:options:animations:completion: class func transitionWithView(_ view: UIView,

 duration duration: NSTimeInterval,

 options options: UIViewAnimationOptions,

 animations animations: (() -> Void),

 completion completion: ((Bool) -> Void))

 Creates a transition animation for the specified container view.為指定的視圖構建壹個過渡動畫(翻譯純屬個人見解,有錯請指出)transitionFromView:toView:duration:options:completion:

 class func transitionFromView(_ fromView: UIView,

 toView toView: UIView,

 duration duration: NSTimeInterval,

 options options: UIViewAnimationOptions,

 completion completion: ((Bool) -> Void))

 Creates a transition animation between the specified views using the given parameters.

 在兩個給定視圖之間構建過渡動畫(翻譯純屬個人見解,有錯請指出)

 以上為UIView Animation的基礎動畫API,使用其實很簡單,就是要理解不同參數的意義。

篇三:iOS開發學習之核心動畫

 核心動畫基本概念

 基礎動畫(CABasicAnimation)

 關鍵幀動畫(CAKeyframeAnimation)

 動畫組

 轉場動畫-CATransition

 UIView的轉場動畫-雙視圖

壹、核心動畫基本概念

 1.導入QuartzCore.framework框架

 開發步驟

 1).初始化壹個動畫對象(CAAnimation)並且設置壹些動畫相關屬性

 2).CALayer中很多屬性都可以通過CAAnimation實現動畫效果,包括:opacity、position、transform、bounds、contents等(可以在API文檔中搜索:CALayer Animatable Properties)

 3).添加動畫對象到層(CALayer)中,開始執行動畫

 4).通過調用CALayer的addAnimation:forKey增加動畫到層(CALayer)中,這樣就能觸發動畫。通過調用removeAnimationForKey可以停止層中的動畫

 5).Core Animation的動畫執行過程都是後臺操作的,不會阻塞主線程

 2.屬性

 1).duration:動畫的持續時間

 2).repeatCount:重復次數(HUGE_VALF、MAX FLOAT無限重復)

 3).repeatDuration:重復時間(用的很少)

 4).removedOnCompletion:默認為Yes。動畫執行完後默認會從圖層刪除掉

 5).fillMode

 6).biginTime

 7).timingFunction:速度控制函數,控制動畫節奏

 8).delegate

二、基礎動畫(CABasicAnimation)

如果只是實現簡單屬性變化的動畫效果,可以使用UIView的塊動畫替代基本動畫

 1.屬性說明

 -fromValue:keyPath相應屬性值的初始值

 -toValue:keyPath相應屬性的結束值

 2.動畫過程說明:

 -隨著動畫的就行,在duration的持續時間內,keyPath相應的屬性值從fromValue漸漸變為toValue

 -keyPath內容是CALayer的可動畫Animation屬性

 -如果fillMode=kCAFillModeForwards同時removedOnCompletion=NO,那麽在動畫執行完畢後,圖層會保持顯示動畫執行後的狀態,但在實質上,圖層的屬性值還是動畫執行前的初始值,並沒有真正改變

 3.代碼實現

 位移需要考慮目標點設定的問題

 1.將動畫的所有方法封裝到壹個類裏面

 MyCAHelper.h

 #import

 #import

 #define kCAHelperAlphaAnimation @"opacity"; ?// 淡入淡出動畫 #define kCAHelperScaleAnimation @"transform.scale";// 比例縮放動畫

 #define kCAHelperRotationAnimation @"transform.rotation";// 旋轉動畫

 #define kCAHelperPositionAnimation @"position"; // 平移位置動畫

 @interface MyCAHelper : NSObject

 #pragma mark - 基本動畫統壹調用方法

 + (CABasicAnimation *)myBasicAnimationWithType:(NSString *)animationTypeduration:(CFTimeInterval)duration from:(NSValue *)from

 to:(NSValue *)to

 autoRevereses:(BOOL)autoRevereses;

 #pragma mark - 關鍵幀動畫方法

 #pragma mark 搖晃動畫

 + (CAKeyframeAnimation

 *)myKeyShakeAnimationWithDuration:(CFTimeInterval)duration

 angle:(CGFloat)angle

 repeatCount:(CGFloat)repeatCount;

 #pragma mark 貝塞爾路徑動畫

 + (CAKeyframeAnimation *)myKeyPathAnimationWithDuration:(CFTimeInterval)durationpath:(UIBezierPath *)path;

 #pragma mark 彈力仿真動畫

 + (CAKeyframeAnimation *)myKeyBounceAnimationFrom:(CGPoint)from

 to:(CGPoint)to

 duration:(CFTimeInterval)duration;

 @end

 MyCAHelper.m

 #import "MyCAHelper.h"

 @implementation MyCAHelper

 #pragma mark - 基本動畫統壹調用方法

 + (CABasicAnimation *)myBasicAnimationWithType:(NSString *)animationTypeduration:(CFTimeInterval)duration

 from:(NSValue *)from

 to:(NSValue *)to

 autoRevereses:(BOOL)autoRevereses

 {

 // 1. 實例化壹個CA動畫對象

 CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:animationType];

 // 2. 設置動畫屬性

 [anim setDuration:duration];

 [anim setFromValue:from];

 [anim setToValue:to];

 [anim setAutoreverses:autoRevereses];

 return anim;

 }

 #pragma mark - 關鍵幀動畫方法

 #pragma mark 搖晃動畫

 + (CAKeyframeAnimation

 *)myKeyShakeAnimationWithDuration:(CFTimeInterval)duration

 angle:(CGFloat)angle

 repeatCount:(CGFloat)repeatCount

 {

 // 1. 初始化動畫對象實例

 CAKeyframeAnimation *anim = [CAKeyframeAnimation

 animationWithKeyPath:@"transform.rotation"];

 // 2. 設置動畫屬性

 [anim setDuration:duration];

 [anim setValues:@[@(angle), @(-angle), @(angle)]];

 [anim setRepeatCount:repeatCount];

 return anim;

 }

 #pragma mark 貝塞爾路徑動畫

 + (CAKeyframeAnimation *)myKeyPathAnimationWithDuration:(CFTimeInterval)duration path:(UIBezierPath *)path

 {

 // 1. 初始化動畫對象實例

 CAKeyframeAnimation *anim = [CAKeyframeAnimation

 animationWithKeyPath:@"position"];

 // 2. 設置動畫屬性

 [anim setDuration:duration];

  • 上一篇:我的作品作文
  • 下一篇:KAMPROVIDEO註冊過商標嗎?還有哪些分類可以註冊?
  • copyright 2024編程學習大全網