1. 程式人生 > >核心動畫(關鍵幀動畫)

核心動畫(關鍵幀動畫)

一.簡單介紹
是CAPropertyAnimation的子類,跟CABasicAnimation的區別是:CABasicAnimation只能從一個數值(fromValue)變到另一個數值(toValue),而CAKeyframeAnimation會使用一個NSArray儲存這些數值。
屬性解析:
values:就是上述的NSArray物件。裡面的元素稱為”關鍵幀”(keyframe)。動畫物件會在指定的時間(duration)內,依次顯示values陣列中的每一個關鍵幀。
path:可以設定一個CGPathRef\CGMutablePathRef,讓層跟路徑移動。path只對CALayer的anchorPoint和position起作用。如果你設定了path,那麼values將被忽略
keyTimes:可以為對應的關鍵幀指定對應的時間點,其取值範圍為0到1.0,keyTimes中的每一個時間值都對應values中的每一幀。當keyTimes沒有設定的時候,各個關鍵幀的時間是平分的。
說明:
CABasicAnimation可看做最多隻有2個關鍵幀的CAKeyframeAnimation。

二.程式碼示例
第一種方式

@interface ViewController ()

@property(nonatomic,strong) UIView *customView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _customView = [[UIView alloc] initWithFrame:CGRectMake(0,
                                                           100
, 100, 100)]; _customView.backgroundColor = [UIColor yellowColor]; [self.view addSubview:_customView]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated.
} - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ //建立核心動畫 CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animation]; //平移 keyAnimation.keyPath = @"position"; //告訴系統要執行什麼動畫 NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)]; NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(200, 100)]; NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(200, 200)]; NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(100, 200)]; NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(100, 100)]; keyAnimation.values = @[value1,value2,value3,value4,value5]; //設定動畫完畢後,不刪除動畫 keyAnimation.removedOnCompletion = NO; //設定保持動畫的最新狀態 keyAnimation.fillMode = kCAFillModeForwards; //設定動畫執行的時間 keyAnimation.duration = 4.0; //設定動畫的節奏 keyAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; //設定代理,開始-結束 keyAnimation.delegate = self; //新增核心動畫 [_customView.layer addAnimation:keyAnimation forKey:nil]; } #pragma mark Core Animation Delegate - (void)animationDidStart:(CAAnimation *)anim{ NSLog(@"開始動畫"); } - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{ NSLog(@"結束動畫"); } @end

第二種方式(使用path)讓layer在指定的路徑上移動

@interface ViewController ()

@property(nonatomic,strong) UIView *customView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _customView = [[UIView alloc] initWithFrame:CGRectMake(0,
                                                           100,
                                                           100,
                                                           100)];
    _customView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:_customView];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //建立核心動畫
    CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animation];
    keyAnimation.keyPath = @"position";
    //告訴系統要執行什麼動畫
    //建立一條路徑
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));
    keyAnimation.path = path;

    //有create就一定要有release
    CGPathRelease(path);

    //設定動畫執行完畢後,不刪除動畫
    keyAnimation.removedOnCompletion = NO;
    //設定儲存動畫的最新狀態
    keyAnimation.fillMode = kCAFillModeForwards;
    //設定動畫執行的時間
    keyAnimation.duration = 5.0;
    //設定動畫的節奏
    keyAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    //設定代理,開始-結束
    keyAnimation.delegate = self;
    //新增核心動畫
    [_customView.layer addAnimation:keyAnimation forKey:nil];
}

#pragma mark Core Animation Delegate
- (void)animationDidStart:(CAAnimation *)anim{
    NSLog(@"開始動畫");
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    NSLog(@"結束動畫");
}

@end

說明:可以通過path屬性,讓layer在指定的路徑上運動。
停止動畫:

//新增核心動畫
[self.customView.layer addAnimation:keyAnima forKey:@"wendingding"];
//停止self.customView.layer上名稱標示為wendingding的動畫
[self.customView.layer removeAnimationForKey:@"wendingding"];

三.圖示抖動

#import "ViewController.h"

#define angle2Radian(angle)  ((angle)/180.0*M_PI)

@interface ViewController ()

@property(nonatomic,strong) UIImageView *iconView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _iconView = [[UIImageView alloc] initWithFrame:CGRectMake(160,
                                                              150,
                                                              100,
                                                              100)];
    _iconView.image = [UIImage imageNamed:@"logo_100.jpg"];
    [self.view addSubview:_iconView];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //建立核心動畫
    CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animation];
    keyAnimation.keyPath = @"transform.rotation";
    //設定動畫時間
    keyAnimation.duration = 0.1;
    //把度數轉換為弧度  度數/180*M_PI
    keyAnimation.values = @[@(-angle2Radian(4)),@(angle2Radian(4)),@(-angle2Radian(4))];
    //設定動畫的重複次數(設定為最大值)
    keyAnimation.repeatCount = MAXFLOAT;

    keyAnimation.fillMode = kCAFillModeForwards;
    keyAnimation.removedOnCompletion = NO;
    //新增動畫
    [self.iconView.layer addAnimation:keyAnimation
                               forKey:nil];
}
@end

相關推薦

核心動畫(關鍵動畫)-轉

一.簡單介紹 是CAPropertyAnimation的子類,跟CABasicAnimation的區別是:CABasicAnimation只能從一個數值(fromValue)變到另一個數值(toValue),而CAKeyframeAnimation會使用一個NSArray儲存這些數值。 

iOS開發UI篇—核心動畫(關鍵動畫)

一、簡單介紹 是CApropertyAnimation的子類,跟CABasicAnimation的區別是:CABasicAnimation只能從一個數值(fromValue)變到另一個數值(toValue),而CAKeyframeAnimation會使用一個NSArray儲存這些數值 屬性解析: val

核心動畫(關鍵動畫)

一.簡單介紹 是CAPropertyAnimation的子類,跟CABasicAnimation的區別是:CABasicAnimation只能從一個數值(fromValue)變到另一個數值(toValue),而CAKeyframeAnimation會使用一個N

核心動畫(三)-關鍵動畫

一、簡單介紹 CAKeyframeAnimation是CApropertyAnimation的子類,跟CABasicAnimation的區別是:CABasicAnimation只能從一個數值(fromValue)變到另一個數值(toValue),而CAKeyf

iOS 關鍵動畫

級別:★★☆☆☆ 標籤:「iOS CAKeyframeAnimation」「iOS 關鍵幀動畫」「CAKeyframeAnimation values」「CAKeyframeAnimation path」 作者: Xs·H 審校: QiShare團隊 最近的專案需求涉及到一些動畫效果。對

iOS layer層關鍵動畫

上次介紹了 UIview的block動畫 , 這次說一下 view的layer層的關鍵幀動畫 layer層的動畫相對於 view層的動畫 會更輕量。 直接看程式碼 每一個屬性的詳細說明 見程式碼下面的表格 //先建立一個view用於執行動畫 UIView * my

vue中動畫關鍵keyframes 和 animation 和animate動畫庫

(1)  <style> @keyframes fontScale { 0% { font-size: 30px; } 100% { font-size: 50px; } }

[Xcode10 實際操作]九、實用進階-(20)建立位移關鍵動畫:通過新增運動關鍵點製作位移動畫

本文將演示如何通過新增運動關鍵點的方式,來製作位移動畫 在專案導航區,開啟檢視控制器的程式碼檔案【ViewController.swift】 1 import UIKit 2 3 //新增一個代理協議CAAnimationDelegate 4 class ViewControl

css3——transition動畫過渡(transition動畫過渡可作用的屬性),animation動畫鋪墊和@keyframes動畫關鍵

css3動畫優點:開啟GPU加速,不會產生動畫佇列,即頻繁點選按鈕時,不會有多個動畫在等待執行; 1. transition: property duration timing-function delay; 是個複合屬性,包括: transition-property

iOS CoreAnimation 關鍵動畫 CAKeyframeAnimation

    效果:      關鍵幀動畫, 關鍵幀動畫就是在動畫控制過程中開發者指定主要的動畫狀態, 至於各種狀態間動畫如何進行則由系統自動運算補充(每個兩個關鍵幀之間系統形成的動畫成為補間動畫), 這種動畫的好處就是開發者不用逐個每個動畫幀, 而只關心幾個關鍵幀的狀態即可

AR HUD 1.0中Panel Navi Guide和Panel New Route動畫關鍵總結

一、Panel Navi Guide面板導航指南1、   Panel Navi Guide:Anchored Position  父物件錨點位置   Image Navi Guide Distance Corner Mask:Anchored Position  往角落金吉路

ConstraintSet 約束佈局獨有的 關鍵動畫

關鍵幀動畫:任何動畫要表現運動或變化,至少前後要給出兩個不同的關鍵狀態,而中間狀態的變化和銜接電腦可以自動完成,在Flash中,表示關鍵狀態的幀動畫叫做關鍵幀動畫Constraint 可以配合 ConstraintLayout 實現關鍵幀動畫,只需要給出     “動畫前的x

OpenGL ES 從零開始系列9:動畫基礎和關鍵動畫

Creating a Rotation Matrix from a Quaternion 從一個四元數中建立旋轉矩陣 這另外的一個方法相對簡單些。並且這個基本演算法來自於Matrix FAQ,雖然我需要把它轉換成行優先的順序。 static inline void Matrix3DSetUsingQuater

Houdini低模解算轉成高模關鍵動畫並拆分碎塊UV

    bakeFragDetailsUV.otl可以實現將剛體解算的低模運動狀態轉換成高模的關鍵幀動畫,並將碎塊UV進行表面和內部的分離,以便匯入maya使用,基於軟體版本Houdini FX 15.0.244.16。 節點連線,注意節點的引數設定,相同節點設定可能有所不

CSS關鍵動畫

mil 模式 stat 行為 auto 完成 UNC 復合 獲得 1、@keyframes 設定動畫規則。 2、animation 所有動畫屬性的簡寫屬性,用於設置六個動畫屬性: animation-name/animation-duration/animation-t

【WPF學習】第五十四章 關鍵動畫

  到目前為止,看到的所有動畫都使用線性插值從起點到終點。但如果需要建立具有多個分段的動畫和不規則移動的動畫。例如,可能希望建立一個動畫,快速地將一個元素滑入到檢視中,然後慢慢地將它移到正確位置。可通過建立兩個連續的動畫,並使用BeginTime屬性在第一個動畫之後開始第二個動畫來實現這種效果。然而,還有更簡

uwp 圖片切換動畫 使用動畫

blog 另一個 cond code source 切換 boa git ref 原文:uwp 圖片切換動畫 使用幀動畫上一篇博客使用了Timer來實現圖片的切換,@lindexi_gd討論了一下性能,我本人其實對性能這一方面不太熟,但我覺得還是有必要考慮一下,那麽今天我

Android - 動畫動畫,補間動畫,屬性動畫,以及插值器)

一: 動畫的分類 幀動畫 補間動畫 屬性動畫 二:解析 1. 幀動畫 (1)定義 這些圖片是將一些列的drawable組合在一起,進行連續的播放, 類似於以前電影源用膠捲進行動畫播放 (2)有圖有真相 (3)準備圖片 看著是不是還行,哈哈,

Android中的動畫動畫、補間動畫、屬性動畫

總的來說,安卓動畫可以分為兩類,最初的傳統動畫和Android3.0之後的屬性動畫。 傳統動畫包括:幀動畫( Frame Animation)和補間動畫(Tweened Animation)。 下面來具體說一下各種動畫的使用及特點: 幀動畫:是最容易實

Android開發——View動畫動畫和屬性動畫詳解

0. 前言Android動畫是面試的時候經常被問到的話題。我們都知道Android動畫分為三類:View動畫、幀動畫和屬性動畫。先對這三種動畫做一個概述:View動畫是一種漸進式動畫,定義動畫開始和結束