前面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];
}