寫(xiě)這些之前逸尖，我想說(shuō)一下古沥，該文章只是我的筆記，希望對(duì)需要的人有幫助娇跟。
屬性動(dòng)畫(huà)
通過(guò)改變圖層或者視圖上面的屬性值（支持動(dòng)畫(huà)的屬性）產(chǎn)生的動(dòng)畫(huà)
屬性動(dòng)畫(huà)的常用方法屬性
1.初始化 + (instancetype)animationWithKeyPath:(nullable NSString *)path
path：需要產(chǎn)生動(dòng)畫(huà)的屬性
如：中心點(diǎn) -> 移動(dòng)
2.keyPath 描述 動(dòng)畫(huà)的屬性
改變動(dòng)畫(huà)的屬性：
transform.scale = 比例轉(zhuǎn)換
transform.scale.x
transform.scale.y
transform.rotation.z
opacity = 透明度
zPosition
backgroundColor 背景顏色
cornerRadius 拐角
borderWidth 邊框的寬度
bounds
contents 內(nèi)容
contentsRect
frame
hidden
masksToBounds
opacity
position
shadowColor
shadowOffset
shadowOpacity
shadowRadius
基礎(chǔ)動(dòng)畫(huà)
CABasicAnimation：基礎(chǔ)動(dòng)畫(huà)
介紹：
通過(guò)改變某個(gè)屬性的值 到某個(gè)值 ->只能設(shè)置兩個(gè)值
fromValue 開(kāi)始值
toValue 結(jié)束值
byValue 通過(guò)哪個(gè)值
CAAnimation:核心動(dòng)畫(huà) 是所有動(dòng)畫(huà)的父類(lèi)
1岩齿、CAMediaTiming 媒體時(shí)間類(lèi)協(xié)議
AMediaTiming中的協(xié)議內(nèi)容
1》beginTime 動(dòng)畫(huà)開(kāi)始的時(shí)間 默認(rèn)為0
2、duration 動(dòng)畫(huà)的持續(xù)時(shí)間 默認(rèn)為0 持續(xù)時(shí)間 受速度的影響
實(shí)際的動(dòng)畫(huà)完成時(shí)間 = 持續(xù)時(shí)間/速度
3.speed 動(dòng)畫(huà)播放的速度 默認(rèn)為1 速度設(shè)置成0 可以暫停動(dòng)畫(huà)
speed 2秒 duration 60秒 動(dòng)畫(huà)真正播放完成的時(shí)間 30秒
4苞俘、timeOffset 動(dòng)畫(huà)播放時(shí)間的偏移量
5盹沈、repeatCount 動(dòng)畫(huà)的循環(huán)次數(shù) 默認(rèn)是0 只播放一次
6、repeatDuration 動(dòng)畫(huà)循環(huán)的持續(xù)時(shí)間 只能設(shè)置其中的一個(gè)屬性 repeatCount/repeatDuration
7吃谣、autoreverses 是否以動(dòng)畫(huà)的形式 返回到播放之前的狀態(tài)
8乞封、fillMode 設(shè)置當(dāng)前對(duì)象在非活動(dòng)時(shí)間段的行為 要想fillMode有效 需設(shè)置removedOnCompletion = NO
KCAFillModeForwards 當(dāng)動(dòng)結(jié)束后做裙，Layer會(huì)一直保持著動(dòng)畫(huà)最后的狀態(tài)
kCAFillModeBackwards 立即進(jìn)入動(dòng)畫(huà)的初始狀態(tài)并等待動(dòng)畫(huà)開(kāi)始
kCAFillModeBoth 動(dòng)畫(huà)加入后開(kāi)始之前 layer處于動(dòng)畫(huà)初始狀態(tài) 動(dòng)畫(huà)結(jié)束后layer保持動(dòng)畫(huà)最后的狀態(tài)
kCAFillModeRemoved 默認(rèn)值 動(dòng)畫(huà)結(jié)束后 layer會(huì)恢復(fù)到之前的狀態(tài)
2、CAAnimationd動(dòng)畫(huà)屬性方法介紹
0.初始化 animation
1.timingFunction 速度控制類(lèi)控制動(dòng)畫(huà)運(yùn)行的節(jié)奏
初始化：functionWithName：
kCAMediaTimingFunctionLinear 勻速
kCAMediaTimingFunctionEaseIn 慢進(jìn)快出
kCAMediaTimingFunctionEaseOut 快進(jìn)慢出
kCAMediaTimingFunctionEaseInEaseOut 慢進(jìn)慢出 中間加速
kCAMediaTimingFunctionDefault 默認(rèn)
2.delegate
3.removedOnCompletion 動(dòng)畫(huà)完成的時(shí)候 是否移除動(dòng)畫(huà)效果
4.代理方法
- (void)animationDidStart:(CAAnimation *)anim
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
案例：
我們首先創(chuàng)建懶加載歌亲，為了方便使用菇用；
//背景
@property (nonatomic,strong) CALayer *layer;
//花瓣
@property (nonatomic,strong) CALayer *petalLayer;
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor blackColor];
[self.view.layer addSublayer:self.layer];
[self.view.layer addSublayer:self.petalLayer];
}
-(CALayer *)layer{
if (_layer) {
return _layer;
}
_layer = [CALayer layer];
_layer.position = CGPointMake(self.view.center.x, self.view.center.y+100);
UIImage *image = [UIImage imageNamed:@"4"];
_layer.bounds = CGRectMake(0, 0, image.size.width/2, image.size.height/2);
_layer.contents = (id)image.CGImage;
return _layer;
}
-(CALayer *)petalLayer{
if (_petalLayer) {
return _petalLayer;
}
_petalLayer = [CALayer layer];
_petalLayer.position = CGPointMake(self.view.center.x, 50);
UIImage *image = [UIImage imageNamed:@"3"];
_petalLayer.bounds = CGRectMake(0, 0, image.size.width, image.size.height);
_petalLayer.contents = (id)image.CGImage;
return _petalLayer;
}
/*
- (CABasicAnimation *)moveAnimation{
if (_moveAnimation) {
return _moveAnimation;
}
_moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
// CGPoint -> 轉(zhuǎn)id
// CGPoint -> NSValue
_moveAnimation.fromValue = [NSValue valueWithCGPoint:self.petalLayer.position];
_moveAnimation.toValue = [NSValue valueWithCGPoint:toValue];
return _moveAnimation;
}
*/
//移動(dòng)中心點(diǎn)
-(void)demo1:(CGPoint)toValue{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
// CGPoint -> 轉(zhuǎn)id
// CGPoint -> NSValue
animation.fromValue = [NSValue valueWithCGPoint:self.petalLayer.position];
animation.toValue = [NSValue valueWithCGPoint:toValue];
// CAMediaTimingFunction協(xié)議->duration動(dòng)畫(huà)的持續(xù)時(shí)間
animation.duration = 3;
// 動(dòng)畫(huà)執(zhí)行的總時(shí)間 受動(dòng)畫(huà)速度的影響
animation.speed = 2;
// 設(shè)置動(dòng)畫(huà)在完成的時(shí)候 固定在完成的狀態(tài)
// 這個(gè)屬性 必須把remocedOnCompletion 設(shè)置成NO 這個(gè)屬性 才可以效果
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeBoth;
// 速度控制
// 快進(jìn)慢出
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
// CALayer -> addAnimation: forKey:添加動(dòng)畫(huà)
// Animation 動(dòng)畫(huà)
// forKey 表示動(dòng)畫(huà)的字符串 可以通過(guò)key 來(lái)找到這個(gè)動(dòng)畫(huà)
[self.petalLayer addAnimation:animation forKey:@"可以通過(guò)這個(gè)key找到此動(dòng)畫(huà)"];
// 查找某個(gè)可以對(duì)應(yīng)的動(dòng)畫(huà)
// CABasicAnimation *an = (CABasicAnimation *)[self.petalLayer animationForKey:@"可以通過(guò)這個(gè)key找到此動(dòng)畫(huà)"];
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[self demo1:[[touches anyObject]locationInView:self.view]];
}
這時(shí)候我們就設(shè)置了一個(gè)能下落的花瓣捐腿。
12F1DDEF-7C17-4879-BB41-5D1D5CEC40F9.png
下面是設(shè)置一個(gè)心動(dòng)的圖片：
-(void)demo2{
self.view.backgroundColor = [UIColor whiteColor];
UIImage *image = [UIImage imageNamed:@"心跳"];
self.layer.contents = (id)image.CGImage;
self.layer.bounds = CGRectMake(0, 0, image.size.width/10, image.size.height/10);
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds"];
/*
1.放大后還原到原來(lái)的位置 以動(dòng)畫(huà)的方法
2.先慢后快
3.一直循環(huán)
*/
animation.fromValue = [NSValue valueWithCGRect:self.layer.bounds];
animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, image.size.width/7, image.size.height/7)];
animation.repeatCount= HUGE;
animation.duration = 0.5;
// 以動(dòng)畫(huà)的效果 還原到 開(kāi)始的狀態(tài)
animation.autoreverses = YES;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[self.layer addAnimation:animation forKey:@"heartJamp"];
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[self demo2];
}
C71D9B8D033DE0C565DFC5C8FE529A44.jpg
如果有好的建議贸辈，希望提出來(lái)，一起討論鸟废。
