iOS——Core Animation(核心動畫)

時間  2019-11-09
標籤 ios core animation 核心 動畫 欄目 iOS 简体版
原文   原文鏈接

###一、核心動畫的基本概述html

  • CoreAnimation的是 Objective - C 的框架,它經過簡單的動畫編程接口來提供一套高性能的動畫引擎。ios

    • 簡單易用的高性能混合編程模型。
    • 相似視圖同樣,你能夠經過使用圖層來建立複雜的接口。
    • 輕量級的數據結構,它能夠同時顯示並讓上百個圖層產生動畫效果。
    • 一套簡單的動畫接口,可讓你的動畫運行在獨立的線程裏面,並能夠 獨立於主線程以外。
    • 一旦動畫配置完成並啓動,核心動畫徹底控制並獨立完成相應的動畫幀。
    • 提升應用性能。應用程序只當發生改變的時候才重繪內容。再小的應用 程序也須要改變和提供佈局服務層。核心動畫還消除了在動畫的幀速率 上運行的應用程序代碼。
    • 靈活的佈局管理模型。包括容許圖層相對同級圖層的關係來設置相應屬 性的位置和大小。

  • 核心動畫類(CAAnimation)包含CABasicAnimation(基本動畫)、CATransition(轉場動畫)、CAKeyframeAnimation(關鍵幀動畫)、CAAnimationGrup(動畫組),動畫的對象是圖層(layer)。git

    • CABasicAnimation:提供了在圖層的屬性值間簡單的動畫。
    • CAKeyframeAnimation: 提供支持關鍵幀動畫。你指定動畫的一個圖層屬性的關鍵路徑,一個表示在動畫的每一個階段的價值的數組,還有一個關鍵幀時間的數組和時間函數。
    • CATransition:提供了一個影響整個圖層的內容過渡效果。在動畫顯示過程當中採用淡出(fade)、推出(push)、顯露(reveal)圖層的內容。
    • CAAnimationGroup: 容許一系列動畫效果組合在一塊兒,並行顯示動畫。

輸入圖片說明

###二、基本動畫(CABasicAnimation) CABasicAnimation 用於實現layer屬性值從一個值(fromValue)到另一個值(toValue)變化的簡單動畫,好比旋轉、縮放、逐漸透明、移動等。github

  • 基本使用編程

    1. 建立動畫並設置動畫要改變的屬性
    CABasicAnimation *animation = [CABasicAnimation animation];
	[animation setKeyPath:@"transform.scale"];
	// 或者
	CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    1. 設置動畫屬性
    animation.fromValue = @1.0;
	animation.toValue = @0.5;
	animation.duration = 0.5;
	animation.autoreverses = YES;
	animation.repeatCount = 10;
    1. 添加動畫到圖層
    [aniView.layer addAnimation:animation forKey:@"ani_scale"];

  • 動畫的屬性數組

    • fromValue：屬性的起始值,id類型。
    • toValue：屬性的目標值,id類型。
    • byValue：屬性要變化的值，也就是fromValue到toValue所改變的值。
    • duration：動畫的持續時間。
    • autoreverses：動畫是否有恢復動畫。
    • repeatCount：動畫重複次數,設置爲HUGE_VALF表示無限次。
    • removedOnCompletion：是否回到初始狀態,要設置fillMode爲kCAFillModeForwards才起效果。
    • fillMode：非動畫時的狀態。
    • speed：動畫的速度，默認1.0，設爲2.0就是兩倍的速度完成動畫。
    • timingFunction：動畫速度變化控制函數包含(Linear、EaseIn、EaseIn、EaseInEaseOut)。
    • timeOffset：動畫的時間偏移。
    • beginTime：動畫開始的時間，爲CACurrentMediaTime() + 延遲秒數。
    • CACurrentMediaTime()：當前媒體時間，能夠用於動畫暫停和開始的時間記錄。這個絕對時間就是將mach_absolute_time()(mach_absolute_time是一個CPU/總線依賴函數，返回一個基於系統啓動後的時鐘」嘀嗒」數。)轉換成秒後的值.這個時間和系統的uptime有關,系統重啓後CACurrentMediaTime()會被重置。

  • 暫停動畫數據結構

- (void)pauseAnimation
{
   CFTimeInterval stopTime = [_aniView.layer convertTime:CACurrentMediaTime() fromLayer:nil]; // 動畫暫停時的媒體時間
    _aniView.layer.timeOffset = stopTime; // 將偏移的時間定格在暫停時
    _aniView.layer.speed = 0.0;  // 將速度設爲0
}
  • 繼續動畫
- (void)recoverAnimation
{
    CFTimeInterval stopTime = _aniView.layer.timeOffset;
    _aniView.layer.timeOffset = 0;  // 重置動畫的時間偏移
    _aniView.layer.speed = 1.0;     // 恢復動畫的速度
    _aniView.layer.beginTime = 0;   // 將beginTime清0
    _aniView.layer.beginTime = [_aniView.layer convertTime:CACurrentMediaTime() fromLayer:nil] - stopTime; // 重新設置beginTime,這個時間就是暫停了多久的秒數。
}

參考：How to pause the animation of a layer treeapp

###三、關鍵幀動畫(CAKeyframeAnimation) CAKeyframeAnimation 能夠給一個圖層提供多個目標值(values)或者一個指定路徑(path)的動畫。關鍵幀動畫有以下幾個重要參數：框架

**values：**指定圖層屬性(position、scale、rotation...)的多個目標值,這個圖層就會由這些指定的值進行動畫。函數

**path：**一個CGPathRef類型的路徑，指定圖層就會沿着這個路徑進行動畫。

**keyTimes：**關鍵幀指定對應的時間點,其取值範圍爲0到1.0。也就是keyTimes中的每個時間值都對應values中的每一幀.當keyTimes沒有設置的時候,各個關鍵幀的時間平分。

**calculationMode：**關鍵幀之間的插值計算模式,有以下幾種：

kCAAnimationLinear(線性的，兩幀之間連續顯示)
    kCAAnimationDiscrete(離散的,只在關鍵幀處顯示)
    kCAAnimationPaced(強制步調一致的，keyTimes和timingFunctions設置無效)
    kCAAnimationCubic(兩幀過分是圓滑曲線的)
    kCAAnimationCubicPaced(圓滑過分而且步調一致)

  • 多個目標值的動畫:

    1. 建立一個改變position的關鍵幀動畫並設置它的基本屬性
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.duration = duration;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.repeatCount = 10;
    1. 指定多個目標點並設置每幀對應的時間點
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(0, TSreenHeight/2)];
NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight/2, 0)];
NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight, TSreenHeight/2)];
NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight/2, TSreenHeight)];
NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(0, TSreenHeight/2)];
NSArray *values = @[value1,value2,value3,value4,value5];
animation.values = values;
animation.keyTimes = @[@0,@.3,@.6,@.7,@1];
    1. 添加動畫到指定的圖層
    [_ballImageView.layer addAnimation:rotationAnim forKey:nil];

  • 指定路徑的動畫:

    1. 建立一個改變position的關鍵幀動畫並設置它的基本屬性
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.duration = duration;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.repeatCount = 10;
    1. 設置一個貝塞爾曲線的動畫路勁path並指定爲動畫的路徑
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, 160)];
    CGPoint endPoint1 = CGPointMake(160, 160);
    CGPoint endPoint2 = CGPointMake(320, 160);
    CGPoint controlPoint = CGPointMake(80, 0);
    CGPoint controlPoint2 = CGPointMake(240, 320);
    [path addQuadCurveToPoint:endPoint1 controlPoint:controlPoint];
    [path addQuadCurveToPoint:endPoint2 controlPoint:controlPoint2];
    animation.path = path;
    1. 添加動畫到圖層
    [imgView.layer addAnimation:keyAnimation forKey:nil];

###四、轉場動畫(CATransition) CATransition 用於視圖的頁面切換、頁面更新時的轉場動畫，提供了多種type和subType轉場效果。

  • type屬性： 轉場動畫效果（API中公開的效果只有fade、moveIn、push、reveal四種，其餘爲私有）。

    1. fade 淡出效果
    2. moveIn 進入效果
    3. push 推出效果
    4. reveal 移出效果
    5. cube 立方體翻轉效果
    6. suckEffect 抽走效果
    7. rippleEffect 水波效果
    8. pageCurl 翻開頁效果
    9. pageUnCurl 關閉頁效果
    10. cameraIrisHollowOpen 相機鏡頭打開效果
    11. cameraIrisHollowClose 相機鏡頭關閉效果

  • subType屬性： 轉場的動畫方向

    1. fromLeft 或 kCATransitionFromLeft 從左過分
    2. fromRight 或 kCATransitionFromRight 從右過分
    3. fromTop 或 kCATransitionFromTop 從上過分
    4. fromBottom 或 kCATransitionFromBottom 從下過分

  • 實例代碼：

    CATransition *animation = [CATransition animation];
	animation.duration = 0.5;
	animation.type = @"moveIn";
	// 或者 animation.type = kCATransitionMoveIn;
	animation.subtype = @"fromLeft";
	// 或者 animation.subtype = kCATransitionFromLeft
	[self.photoView.layer addAnimation:self.animation forKey:nil];

###五、動畫組(CAAnimationGrup) CAAnimationGrup 能夠爲一個layer添加多個動畫效果，要實現複雜的動畫可使用用動畫組的方式給layer添加動畫。

  • 實例代碼

    1. 建立多個動畫
    // 旋轉動畫
	CABasicAnimation *rotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
rotation.duration = 3;
rotation.byValue = @(2 * M_PI);

// 縮放動畫
	CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scale.duration = 3;
scale.byValue = @2;

// 變透明動畫
CABasicAnimation *opacity = [CABasicAnimation animationWithKeyPath:@"opacity"];
opacity.duration = 3;
opacity.byValue = @-1;

// 圓角變化動畫
CABasicAnimation *cornerRadius = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
cornerRadius.duration = 3;
cornerRadius.byValue = @75;

// 關鍵幀動畫
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
keyAnimation.duration = 3;
NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(0, TSreenHeight/2)];
NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight/2, 0)];
NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight, TSreenHeight/2)];
NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight/2, TSreenHeight)];
NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(0, TSreenHeight/2)];
NSArray *values = @[value1,value2,value3,value4,value5];
keyAnimation.values = values;
keyAnimation.calculationMode = kCAAnimationCubic;
    1. 建立一個動畫組，組合多個動畫
    CAAnimationGroup *aniGroup = [CAAnimationGroup animation];
aniGroup.duration = 3;
aniGroup.repeatCount = HUGE_VALF;    
aniGroup.animations = @[rotation, scale, opacity, cornerRadius, keyAnimation];
[self.aniView.layer addAnimation:aniGroup forKey:nil];

###六、動畫畫軌跡(CAShapeLayer添加動畫)

CAShapeLayer 是 CALayer 的子類，能夠根據設定的path畫出對應的圖形、曲線等，還能夠添加動畫，實現動畫畫圖。

  • CAShapeLayer屬性：

    1. path： 圖像所依賴的路徑，CGPathRef類型
    2. fillColor： 圖形填充顏色
    3. fillRule： 填充的類型
    4. **strokeColor：**描邊的顏色
    5. lineWidth：線條的寬度
    6. lineCap： 線條端點的樣式
    7. lineJoin： 兩個連接點的樣式
    8. miterLimit: 兩條線鏈接時斜接的長度
    9. strokeStart: 繪製的起點，取值範圍[0~1],默認0
    10. strokeEnd： 繪製的終點，取值範圍[0~2],默認1

  • CAShapeLayer畫圖：

// 1.建立條內切圓路徑
 UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
 // 2.建立CAShapeLayer圖層並設置屬性
 CAShapeLayer *shapeLayer = [CAShapeLayer layer];
 shapeLayer.frame = CGRectMake(0, 0, 200, 200);
 shapeLayer.path = path.CGPath;
 shapeLayer.fillColor = [UIColor clearColor].CGColor;
 shapeLayer.strokeColor = [UIColor redColor].CGColor;
 shapeLayer.lineWidth = 10.0f; 
 shapeLayer.lineCap = kCALineCapRound;
 shapeLayer.strokeStart = 0.25;
 shapeLayer.strokeEnd = 1;
 // 3.添加圖層
 [self.view.layer addSublayer:shapeLayer];
  • CAShapeLayer添加動畫：
// 4.給shapeLayer的strokeStart 或者 strokeEnd 屬性添加動畫，就能夠實現動畫畫圖了。
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.duration = 3;
    animation.fromValue = @0;
    animation.toValue = @1;
    [shapeLayer addAnimation:animation forKey:@"ani_strokeStart"];

###七、核心動畫Demo

####Demo下載地址:https://github.com/fuqinglin/CoreAnimationDemos.git

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程