iOS Swift3.0 UIView動畫詳解
iOS Swift3.0 UIView動畫詳解
[TOC]
在IOS開發中為了做一些比較炫的效果有時候免不了使用動畫。雖然蘋果自帶了CoreAnimation和Facebook的Pop等動畫框架,這些的確是程式設計師開發的利器,但是我們在做一些比較簡單的動畫時,我們直接使用UIView就可以了, 先給大家看看效果是不是想要的, 這只是一個學習基礎和入門,需要根據自己的實際情況在做詳細的開發。
縮放動畫
縮放動畫可以讓一個View的大小發生改變,按照一定的比例放大縮小
//animScale 為動畫呼叫的方法
UIView.animate(withDuration: 2, animations: animScale)
//縮小為原來的0.5倍或者還原為原來的大小;
func animScale(){
self.Image.transform = CGAffineTransform(scaleX: scale, y: scale)
if scale == 0.5 {
scale = 1
}else{
scale = 0.5
}
}
旋轉動畫
旋轉動畫可以讓一個View繞原點進行旋轉
//animSpin 為動畫呼叫的方法
@IBAction func spinAnimation(_ sender: AnyObject) {
UIView.animate(withDuration: 10, delay: 0, options: .curveLinear, animations: animSpin, completion: nil)
}
func animSpin(){
//旋轉角度
self.Image.transform = self.Image.transform.rotated(by: CGFloat(360))
}
透明度動畫
透明度動畫可以讓一個View的透明度在0~1之間改變。透明度為0表示全透明,看不見了。透明度為1表示和正常情況下一樣
@IBAction func animAlpha(_ sender: AnyObject) {
UIView.animate(withDuration: 2, animations: animAnimation)//時常為2s;
}
//改變透明度到0.2 或者還原
func animAnimation(){
if alpha == 0.2 {
self.Image.alpha = alpha
alpha = 1
}else {
self.Image.alpha = alpha
alpha = 0.2
}
}
實現這些動畫僅僅是一些簡單的,大家可以通過下載程式碼自己嘗試一下
程式碼地址https://github.com/thesnail/SwiftNotes
相關文章
- iOS UIView基本動畫iOSUIView動畫
- iOS UIView層動畫iOSUIView動畫
- iOS自定義UIView動畫效果iOSUIView動畫
- UIView詳解UIView
- 【iOS開發】iOS 動畫詳解iOS動畫
- UIView動畫簡介UIView動畫
- 動畫篇-從UIView動畫說起動畫UIView
- UIView的動畫相關APIUIView動畫API
- iOS 【如何解決 UIView 在佈局時的"詭異"動畫效果】iOSUIView動畫
- iOS史上最詳細的動畫講解-載入等待動畫(一)iOS動畫
- 優雅地書寫 UIView 動畫UIView動畫
- iOS UIView漸變色iOSUIView
- iOS初始化UIViewiOSUIView
- iOS 動畫詳解(學習動畫看這一篇就夠了)iOS動畫
- iOS動畫專題·UIView二維形變動畫與CAAnimation核心動畫(transform動畫,基礎,關鍵幀,組動畫,路徑動畫,貝塞爾曲線)iOS動畫UIViewORM
- 詳解CALayer 和 UIView的區別和聯絡UIView
- iOS坑:UIView的frame和transfromiOSUIView
- iOS使用xib自定義UIViewiOSUIView
- Flutter 動畫詳解(一)Flutter動畫
- Flutter 動畫詳解(二)Flutter動畫
- Android:動畫詳解Android動畫
- SVG animation動畫詳解SVG動畫
- 【Android 動畫】動畫詳解之屬性動畫(三)Android動畫
- 【Android 動畫】動畫詳解之補間動畫(一)Android動畫
- 【Android 動畫】動畫詳解之屬性動畫(五)Android動畫
- Android 動畫詳解:屬性動畫、View 動畫和幀動畫Android動畫View
- iOS 中 UIView 和 CALayer 的關係iOSUIView
- 「CSS3 」動畫詳解CSSS3動畫
- 【Android 動畫】動畫詳解之插值器(二)Android動畫
- iOS打包詳解iOS
- iOS RunLoop詳解iOSOOP
- iOS GCD詳解iOSGC
- iOS UIScreen詳解iOSUI
- iostat詳解iOS
- Android 三種動畫詳解Android動畫
- Android動畫實現詳解Android動畫
- iOS 動畫iOS動畫
- iOS動畫-按鈕動畫iOS動畫