你好，歡迎來到IOS教程網
設為首頁加入收藏

首頁
IOS基礎知識
IOS使用技巧
IOS編程開發
IOS教程
IOS訊息
 Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> 實例講授iOS運用UI開辟之基本動畫的創立

實例講授iOS運用UI開辟之基本動畫的創立

編輯：IOS開發綜合

1、簡略引見

CAPropertyAnimation的子類

屬性解析:

fromValue：keyPath響應屬性的初始值

toValue：keyPath響應屬性的停止值

跟著動畫的停止，在長度為duration的連續時光內，keyPath響應屬性的值從fromValue逐漸地變成toValue

假如fillMode=kCAFillModeForwards和removedOnComletion=NO，那末在動畫履行終了後，圖層會堅持顯示動畫履行後的狀況。但在本質上，圖層的屬性值照樣動畫履行前的初始值，並沒有真正被轉變。

好比，CALayer的position初始值為(0,0)，CABasicAnimation的fromValue為(10,10)，toValue為(100,100)，固然動畫履行終了後圖層堅持在(100,100)這個地位，本質上圖層的position照樣為(0,0)

 

2、平挪動畫

代碼示例：

//
//  YYViewController.m
//  07-焦點動畫（基本動畫）
//
//  Created by apple on 14-6-21.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"

@interface YYViewController ()
@property(nonatomic,strong)CALayer *myLayer;
@end


@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
   
    //創立layer
    CALayer *myLayer=[CALayer layer];
    //設置layer的屬性
    myLayer.bounds=CGRectMake(0, 0, 50, 80);
    myLayer.backgroundColor=[UIColor yellowColor].CGColor;
    myLayer.position=CGPointMake(50, 50);
    myLayer.anchorPoint=CGPointMake(0, 0);
    myLayer.cornerRadius=20;
    //添加layer
    [self.view.layer addSublayer:myLayer];
    self.myLayer=myLayer;
}

//設置動畫（基本動畫）
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.創立焦點動畫
    //    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]
    CABasicAnimation *anima=[CABasicAnimation animation];
   
    //1.1告知體系要履行甚麼樣的動畫
    anima.keyPath=@"position";
    //設置經由過程動畫，將layer從哪兒挪動到哪兒
    anima.fromValue=[NSValue valueWithCGPoint:CGPointMake(0, 0)];
    anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];
   
    //1.2設置動畫履行終了以後不刪除動畫
    anima.removedOnCompletion=NO;
    //1.3設置保留動畫的最新狀況
    anima.fillMode=kCAFillModeForwards;

    //2.添加焦點動畫到layer
    [self.myLayer addAnimation:anima forKey:nil];

}
　　@end

代碼解釋：

 第42行設置的keyPath是@"position"，解釋要修正的是CALayer的position屬性，也就是會履行平挪動畫

 第44，45行，這裡的屬性吸收的時id類型的參數，是以其實不能直接應用CGPoint這類構造體類型，而是要先包裝成NSValue對象後再應用。

 默許情形下，動畫履行終了後，動畫會主動從CALayer上移除，CALayer又會回到本來的狀況。為了堅持動畫履行後的狀況，可以參加第48，50行代碼

byValue和toValue的差別，前者是在以後的地位上增長若干，後者是到指定的地位。
 

履行後果：

https://www.ios5.online/ios/UploadFiles_8070/201703/2017031615452863.png (348×532)

設置署理：設置動畫的署理，可以監聽動畫的履行進程，這裡設置掌握器為署理。

代碼示例：

#import "YYViewController.h"

@interface YYViewController ()
@property(nonatomic,strong)CALayer *myLayer;
@end

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
   
    //創立layer
    CALayer *myLayer=[CALayer layer];
    //設置layer的屬性
    myLayer.bounds=CGRectMake(0, 0, 50, 80);
    myLayer.backgroundColor=[UIColor yellowColor].CGColor;
    myLayer.position=CGPointMake(50, 50);
    myLayer.anchorPoint=CGPointMake(0, 0);
    myLayer.cornerRadius=20;
    //添加layer
    [self.view.layer addSublayer:myLayer];
    self.myLayer=myLayer;
}

//設置動畫（基本動畫）
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.創立焦點動畫
    //    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]
    CABasicAnimation *anima=[CABasicAnimation animation];
   
    //1.1告知體系要履行甚麼樣的動畫
    anima.keyPath=@"position";
    //設置經由過程動畫，將layer從哪兒挪動到哪兒
    anima.fromValue=[NSValue valueWithCGPoint:CGPointMake(0, 0)];
    anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];
   
    //1.2設置動畫履行終了以後不刪除動畫
    anima.removedOnCompletion=NO;
    //1.3設置保留動畫的最新狀況
    anima.fillMode=kCAFillModeForwards;
    anima.delegate=self;
    //打印
    NSString *str=NSStringFromCGPoint(self.myLayer.position);
    NSLog(@"履行前：%@",str);
    
    //2.添加焦點動畫到layer
    [self.myLayer addAnimation:anima forKey:nil];

}

-(void)animationDidStart:(CAAnimation *)anim
{
    NSLog(@"開端履行動畫");
}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    //動畫履行終了，打印履行終了後的position值
    NSString *str=NSStringFromCGPoint(self.myLayer.position);
    NSLog(@"履行後：%@",str);
}

@end

打印position的屬性值，驗證圖層的屬性值照樣動畫履行前的初始值{50，50}，並沒有真正被轉變為{200，300}。

2015111793357095.png (877×105)

3、縮放動畫

完成縮放動畫的代碼示例：

//
//  YYViewController.m
//  08-焦點動畫平移
//
//  Created by apple on 14-6-21.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"

@interface YYViewController ()
@property(nonatomic,strong)CALayer *myLayer;
@end


@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
   
    //創立layer
    CALayer *myLayer=[CALayer layer];
    //設置layer的屬性
    myLayer.bounds=CGRectMake(0, 0, 150, 60);
    myLayer.backgroundColor=[UIColor yellowColor].CGColor;
    myLayer.position=CGPointMake(50, 50);
    myLayer.anchorPoint=CGPointMake(0, 0);
    myLayer.cornerRadius=40;
    //添加layer
    [self.view.layer addSublayer:myLayer];
    self.myLayer=myLayer;
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.創立動畫
    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"bounds"];
    //1.1設置動畫履行時光
    anima.duration=2.0;
    //1.2設置動畫履行終了後不刪除動畫
    anima.removedOnCompletion=NO;
    //1.3設置保留動畫的最新狀況
    anima.fillMode=kCAFillModeForwards;
    //1.4修正屬性，履行動畫
    anima.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
    //2.添加動畫到layer
    [self.myLayer addAnimation:anima forKey:nil];
}

@end

完成後果：

2015111793435216.png (348×532)

4、扭轉動畫

代碼示例：

//
//  YYViewController.m
//  09-焦點動畫扭轉
//
//  Created by apple on 14-6-21.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"

@interface YYViewController ()
@property(nonatomic,strong)CALayer *myLayer;
@end


@implementation YYViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
   
    //創立layer
    CALayer *myLayer=[CALayer layer];
    //設置layer的屬性
    myLayer.bounds=CGRectMake(0, 0, 150, 60);
    myLayer.backgroundColor=[UIColor yellowColor].CGColor;
    myLayer.position=CGPointMake(50, 50);
    myLayer.anchorPoint=CGPointMake(0, 0);
    myLayer.cornerRadius=40;
    //添加layer
    [self.view.layer addSublayer:myLayer];
    self.myLayer=myLayer;
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.創立動畫
    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"transform"];
    //1.1設置動畫履行時光
    anima.duration=2.0;
    //1.2修正屬性，履行動畫
    anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0)];
    //1.3設置動畫履行終了後不刪除動畫
    anima.removedOnCompletion=NO;
    //1.4設置保留動畫的最新狀況
    anima.fillMode=kCAFillModeForwards;
   
    //2.添加動畫到layer
    [self.myLayer addAnimation:anima forKey:nil];
}
@end

完成後果：

2015111793457814.png (348×532)

彌補：

可以經由過程transform（KVC）的方法來停止設置。

代碼示例（平移）：

#import "YYViewController.h"

@interface YYViewController ()
@property(nonatomic,strong)CALayer *myLayer;
@end


@implementation YYViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
   
    //創立layer
    CALayer *myLayer=[CALayer layer];
    //設置layer的屬性
    myLayer.bounds=CGRectMake(0, 0, 150, 60);
    myLayer.backgroundColor=[UIColor yellowColor].CGColor;
    myLayer.position=CGPointMake(50, 50);
    myLayer.anchorPoint=CGPointMake(0, 0);
    myLayer.cornerRadius=40;
    //添加layer
    [self.view.layer addSublayer:myLayer];
    self.myLayer=myLayer;
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.創立動畫
    CABasicAnimation *anima=[CABasicAnimation animation];
    anima.keyPath=@"transform";
    //1.1設置動畫履行時光
    anima.duration=2.0;
    //1.2修正屬性，履行動畫
 
    anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 100, 1)];
    //1.3設置動畫履行終了後不刪除動畫
    anima.removedOnCompletion=NO;
    //1.4設置保留動畫的最新狀況
    anima.fillMode=kCAFillModeForwards;
   
    //2.添加動畫到layer
    [self.myLayer addAnimation:anima forKey:nil];
}

完成後果：

繪制的圖形在y的偏向上挪動100個單元。

https://www.ios5.online/ios/UploadFiles_8070/201703/2017031615452819.png (348×532)

5、症結幀動畫

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

2.代碼示例

第一種方法：

代碼：

//
//  YYViewController.m
//  10-焦點動畫（症結幀動畫1）
//
//  Created by apple on 14-6-21.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;

@end


@implementation YYViewController


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.創立焦點動畫
    CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
    //平移
    keyAnima.keyPath=@"position";
    //1.1告知體系要履行甚麼動畫
    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)];
    keyAnima.values=@[value1,value2,value3,value4,value5];
    //1.2設置動畫履行終了後，不刪除動畫
    keyAnima.removedOnCompletion=NO;
    //1.3設置保留動畫的最新狀況
    keyAnima.fillMode=kCAFillModeForwards;
    //1.4設置動畫履行的時光
    keyAnima.duration=4.0;
    //1.5設置動畫的節拍
    keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaSEOut];
   
    //設置署理，開端—停止
    keyAnima.delegate=self;
    //2.添加焦點動畫
    [self.customView.layer addAnimation:keyAnima forKey:nil];
}

-(void)animationDidStart:(CAAnimation *)anim
{
    NSLog(@"開端動畫");
}

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

解釋：這個項目在storyboard中拖入了一個view，並和掌握器中的custom停止了聯系關系。

後果和打印成果：

https://www.ios5.online/ios/UploadFiles_8070/201703/2017031615452885.png (996×372)

彌補：設置動畫的節拍

https://www.ios5.online/ios/UploadFiles_8070/201703/2017031615452885.png (591×323)

第二種方法（應用path）讓layer在指定的途徑上挪動（畫圓）：

代碼：

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;

@end


@implementation YYViewController


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.創立焦點動畫
    CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
    //平移
    keyAnima.keyPath=@"position";
    //1.1告知體系要履行甚麼動畫
    //創立一條途徑
    CGMutablePathRef path=CGPathCreateMutable();
    //設置一個圓的途徑
    CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));
    keyAnima.path=path;
   
    //有create就必定要有release
    CGPathRelease(path);
    //1.2設置動畫履行終了後，不刪除動畫
    keyAnima.removedOnCompletion=NO;
    //1.3設置保留動畫的最新狀況
    keyAnima.fillMode=kCAFillModeForwards;
    //1.4設置動畫履行的時光
    keyAnima.duration=5.0;
    //1.5設置動畫的節拍
    keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaSEOut];
   
    //設置署理，開端—停止
    keyAnima.delegate=self;
    //2.添加焦點動畫
    [self.customView.layer addAnimation:keyAnima forKey:nil];
}

-(void)animationDidStart:(CAAnimation *)anim
{
    NSLog(@"開端動畫");
}

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

解釋：可以經由過程path屬性，讓layer在指定的軌跡上活動。

停滯動畫：

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;
- (IBAction)stopOnClick:(UIButton *)sender;

@end


@implementation YYViewController


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.創立焦點動畫
    CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
    //平移
    keyAnima.keyPath=@"position";
    //1.1告知體系要履行甚麼動畫
    //創立一條途徑
    CGMutablePathRef path=CGPathCreateMutable();
    //設置一個圓的途徑
    CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));
    keyAnima.path=path;
   
    //有create就必定要有release
    CGPathRelease(path);
    //1.2設置動畫履行終了後，不刪除動畫
    keyAnima.removedOnCompletion=NO;
    //1.3設置保留動畫的最新狀況
    keyAnima.fillMode=kCAFillModeForwards;
    //1.4設置動畫履行的時光
    keyAnima.duration=5.0;
    //1.5設置動畫的節拍
    keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaSEOut];
   
    //2.添加焦點動畫
    [self.customView.layer addAnimation:keyAnima forKey:@"wendingding"];
}

- (IBAction)stopOnClick:(UIButton *)sender {
    //停滯self.customView.layer上稱號標示為wendingding的動畫
    [self.customView.layer removeAnimationForKey:@"wendingding"];
}
@end

https://www.ios5.online/ios/UploadFiles_8070/201703/2017031615452885.png (434×616)

點擊停滯動畫，法式外部會挪用  [self.customView.layer removeAnimationForKey:@"wendingding"];停滯self.customView.layer上稱號標示為wendingding的動畫。

3.圖標發抖

代碼示例：

//
//  YYViewController.m
//  12-圖標發抖
//
//  Created by apple on 14-6-21.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"
#define angle2Radian(angle)  ((angle)/180.0*M_PI)

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *iconView;

@end


@implementation YYViewController

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.創立焦點動畫
    CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
    keyAnima.keyPath=@"transform.rotation";
    //設置動畫時光
    keyAnima.duration=0.1;
    //設置圖標發抖弧度
    //把度數轉換為弧度  度數/180*M_PI
    keyAnima.values=@[@(-angle2Radian(4)),@(angle2Radian(4)),@(-angle2Radian(4))];
    //設置動畫的反復次數(設置為最年夜值)
    keyAnima.repeatCount=MAXFLOAT;
   
    keyAnima.fillMode=kCAFillModeForwards;
    keyAnima.removedOnCompletion=NO;
    //2.添加動畫
    [self.iconView.layer addAnimation:keyAnima forKey:nil];
}

@end

解釋：圖標向左向右偏轉一個弧度（4），發生發抖的視覺後果。

法式界面：
https://www.ios5.online/ios/UploadFiles_8070/201703/2017031615452891.png (348×532) 

【實例講授iOS運用UI開辟之基本動畫的創立】的相關資料介紹到這裡，希望對您有所幫助！ 提示：不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦！

  1. 上一頁:
  2. 下一頁:
IOS開發綜合
總結IOS中隱藏軟鍵盤的三種方式 一、使用軟鍵盤的 Done 鍵隱藏鍵盤 出發軟鍵盤隱藏最常用
總結iOS開辟中的斷點續傳與理論 媒介 斷點續傳概述 斷點續傳就是從文件前次中止的處所開端從
iOS 從應用中跳轉至系統設置頁面裡的多種設置頁面 我們在開發app過程中很多時候會需要設置系統權限，這時就需要
IOS編程開發
相關文章
+
IOS開發基礎IOS編程技術IOS開發綜合
iOS從零開端學習直播之2.采集
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved