iOS之屬性動(dòng)畫(huà)

寫(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)，一起討論。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在iOS實(shí)際開(kāi)發(fā)中常用的動(dòng)畫(huà)無(wú)非是以下四種：UIView動(dòng)畫(huà)，核心動(dòng)畫(huà)，幀動(dòng)畫(huà)，自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。 1.UIView...
    請(qǐng)叫我周小帥閱讀 3,313評(píng)論 1贊 23
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果，實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜，今天將帶大家一窺iOS動(dòng)畫(huà)全貌。在這里你可以看...
    F麥子閱讀 5,262評(píng)論 5贊 13
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果，實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜，今天將帶大家一窺ios動(dòng)畫(huà)全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,688評(píng)論 6贊 30
  • 先看看CAAnimation動(dòng)畫(huà)的繼承結(jié)構(gòu) CAAnimation｛ CAPropertyAnimation { ...
    時(shí)間不會(huì)倒著走閱讀 1,795評(píng)論 0贊 1
  • 動(dòng)畫(huà)的繼承結(jié)構(gòu) CAAnimation{CAPropertyAnimation{CABasicAnimation{...
    早起的蟲(chóng)兒子被鳥(niǎo)吃閱讀 957評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容