CoreAnimation

前面iOS 開發(fā)動畫 View Animation講的都是基于 UIView 的系統(tǒng)封裝的高級 API。CoreAnimation 是在 Layer層上操作添加動畫岩瘦,可以做出更復雜的動畫。

UIView 和 CALayer 的區(qū)別:

(1) UIView 是繼承自 UIResponse局扶,可以處理響應事件瓜喇,CALayer 是繼承自 NSObject,只負責內(nèi)容的創(chuàng)建和繪制牲尺。
(2) UIView 負責內(nèi)容的管理,CALayer 負責內(nèi)容的繪制。
(3) UIView 的位置屬性frame bounds center 而 CALayer除了這些屬性之外還有 anchorPoint position
(4) CALayer 可以實現(xiàn) UIView 很多無法實現(xiàn)的功能

注意:CoreAnimation 的動畫執(zhí)行過程都是在后臺執(zhí)行的谤碳,不會阻塞主線程溃卡。

CABaseAnimation

常用的屬性
animation.keyPath    // 動畫操作的屬性
animation.toValue     // 屬性值的最終值
animation.duration    // 動畫執(zhí)行的時間
animation.fillMode    // 執(zhí)行后的狀態(tài)
animation.isRemovedOnCompletion // 動畫執(zhí)行后要不要刪除
動畫的類型
1.平移動畫: position  transform.translation.x transform.translation.y transform.translation.z
2.旋轉(zhuǎn)動畫: transform.rotation  transform.rotation.x   transform.rotation  transform.rotation.y
3.縮放動畫: bounds  transform.scale  transform.scale.x  transform.scale.y
4.顏色動畫:backgroundColor borderColor
5.淡入淡出:opacity
6.高級動畫:(圓角)cornerRadius (邊框) borderWidth (陰影)shadowOffse

CABaseAnimation選擇其一 keyPath 作為例子

陰影動畫
override func viewDidLoad() {
super.viewDidLoad()
redView.layer.shadowColor = UIColor.black.cgColor
redView.layer.shadowOpacity = 0.5
let animation = CABasicAnimation()
animation.keyPath = "shadowOffset"
animation.toValue = NSValue(cgPoint: CGPoint(x: 10, y: 10))
animation.duration = 2.0
animation.fillMode = kCAFillModeForwards
animation.isRemovedOnCompletion = false
redView.layer.add(animation, forKey: nil)
}

CAKeyframeAnimation

新增幾個屬性
path:運動的路線
values: 關(guān)鍵幀(如果設置了 path,values 是被忽略的)
keyTimes:為對應的關(guān)鍵幀指定的時間點蜒简,范圍是0~1的

// 1.創(chuàng)建動畫對象
CAKeyframeAnimation * anim = [CAKeyframeAnimation animation];

// 2.設置動畫屬性
anim.keyPath = @"position";

CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, NULL, CGRectMake(100, 100, 200, 200));
anim.path = path;
CGPathRelease(path);

// 動畫的執(zhí)行節(jié)奏
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
anim.duration = 2.0f;
anim.removedOnCompletion = NO;
anim.fillMode = kCAFillModeForwards;
anim.delegate = self;
[self.redView.layer addAnimation:anim forKey:nil];

CASpringAnimation

新增屬性

// 質(zhì)量瘸羡,影響視圖運動時的慣性,mass越大運動時間越長
open var mass: CGFloat
// 彈簧鋼度系數(shù)搓茬,取值0~100犹赖,默認取值100
open var stiffness: CGFloat
// 阻尼系數(shù),影響反彈的次數(shù)卷仑,取值大于0峻村,more取值10
open var damping: CGFloat
// 初始速度,默認為0
open var initialVelocity: CGFloat
// 獲取反彈時的停頓時間锡凝,只讀屬性
open var settlingDuration: CFTimeInterval

 let jump = CASpringAnimation(keyPath: "position.y")
      jump.initialVelocity = 100.0
      jump.mass = 10.0
      jump.stiffness = 1500.0
      jump.damping = 50.0
      jump.fromValue = textField.layer.position.y + 1.0
      jump.toValue = textField.layer.position.y
      jump.duration = jump.settlingDuration
      textField.layer.add(jump, forKey: nil)

轉(zhuǎn)場動畫 CATransition

UINavigationController就是通過CATransition實現(xiàn)了將控制器的視圖推入屏幕的動畫效果

屬性解析:
type:動畫過渡類型
subtype:動畫過渡方向
startProgress:動畫起點(在整體動畫的百分比)
endProgress:動畫終點(在整體動畫的百分比)

代碼:

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (nonatomic, assign) int index;
@end

@implementation ViewController
- (IBAction)prebtn:(id)sender {
self.index--;
if (self.index == -1) {
self.index = 8;
}

NSString * filename = [NSString stringWithFormat:@"%d.jpg", self.index + 1];
self.imageView.image = [UIImage imageNamed:filename];
CATransition * anim = [CATransition animation];
anim.type= @"cube";
anim.subtype = kCATransitionFromLeft;
anim.duration = 0.5;
[self.view.layer addAnimation:anim forKey:nil];

}
- (IBAction)nextbtn:(id)sender {
self.index++;
if (self.index == 9) {
self.index = 0;
}
NSString * filename = [NSString stringWithFormat:@"%d.jpg",self.index+1];
self.imageView.image = [UIImage imageNamed:filename];
CATransition * anim = [CATransition animation];
// 設置過渡類型
anim.type = @"cube";
// 設置過渡方向
anim.subtype = kCATransitionFromRight;
anim.duration = 0.5;
[self.view.layer addAnimation:anim forKey:nil];
}

9.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末粘昨,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子窜锯,更是在濱河造成了極大的恐慌张肾,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件锚扎,死亡現(xiàn)場離奇詭異吞瞪,居然都是意外死亡,警方通過查閱死者的電腦和手機工秩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進店門尸饺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人助币,你說我怎么就攤上這事∶椋” “怎么了眉菱?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長掉分。 經(jīng)常有香客問我俭缓,道長,這世上最難降的妖魔是什么酥郭? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任华坦,我火速辦了婚禮,結(jié)果婚禮上不从,老公的妹妹穿的比我還像新娘惜姐。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布歹袁。 她就那樣靜靜地躺著坷衍,像睡著了一般。 火紅的嫁衣襯著肌膚如雪条舔。 梳的紋絲不亂的頭發(fā)上枫耳,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天,我揣著相機與錄音孟抗,去河邊找鬼迁杨。 笑死,一個胖子當著我的面吹牛凄硼,可吹牛的內(nèi)容都是我干的仑最。 我是一名探鬼主播,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼帆喇,長吁一口氣:“原來是場噩夢啊……” “哼警医!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起坯钦,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤预皇,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后婉刀,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吟温,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年突颊,在試婚紗的時候發(fā)現(xiàn)自己被綠了鲁豪。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡律秃,死狀恐怖爬橡,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情棒动,我是刑警寧澤糙申,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布,位于F島的核電站船惨,受9級特大地震影響柜裸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜粱锐,卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一疙挺、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧怜浅,春花似錦铐然、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽舱殿。三九已至,卻和暖如春险掀,著一層夾襖步出監(jiān)牢的瞬間沪袭,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工樟氢, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留冈绊,地道東北人。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓埠啃,卻偏偏與公主長得像死宣,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子碴开,可洞房花燭夜當晚...
    茶點故事閱讀 42,762評論 2 345

推薦閱讀更多精彩內(nèi)容