詳解iOS開發(fā)中的轉(zhuǎn)場動(dòng)畫和組動(dòng)畫以及UIView封裝動(dòng)畫

更新時(shí)間：2015年11月19日 09:56:37 作者：文頂頂

這篇文章主要介紹了iOS開發(fā)中的轉(zhuǎn)場動(dòng)畫和組動(dòng)畫以及UIView封裝動(dòng)畫,主要用到了CAAnimation類和UIView類,需要的朋友可以參考下

一、轉(zhuǎn)場動(dòng)畫

CAAnimation的子類，用于做轉(zhuǎn)場動(dòng)畫，能夠?yàn)閷犹峁┮瞥銎聊缓鸵迫肫聊坏膭?dòng)畫效果。iOS比Mac OS X的轉(zhuǎn)場動(dòng)畫效果少一點(diǎn)

UINavigationController就是通過CATransition實(shí)現(xiàn)了將控制器的視圖推入屏幕的動(dòng)畫效果

屬性解析:

type：動(dòng)畫過渡類型

subtype：動(dòng)畫過渡方向

startProgress：動(dòng)畫起點(diǎn)(在整體動(dòng)畫的百分比)

endProgress：動(dòng)畫終點(diǎn)(在整體動(dòng)畫的百分比)

轉(zhuǎn)場動(dòng)畫代碼示例

1.界面搭建

2015111995221439.png (331×491)

2.實(shí)現(xiàn)代碼

復(fù)制代碼代碼如下:

//
// YYViewController.m
// 13-轉(zhuǎn)場動(dòng)畫
//
// Created by apple on 14-6-21.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"

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

- (IBAction)preOnClick:(UIButton *)sender;
- (IBAction)nextOnClick:(UIButton *)sender;

@end

復(fù)制代碼代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
[super viewDidLoad];
self.index=1;

}

- (IBAction)preOnClick:(UIButton *)sender {
    self.index--;
    if (self.index<1) {
        self.index=7;
    }
    self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]];

    //創(chuàng)建核心動(dòng)畫
    CATransition *ca=[CATransition animation];
    //告訴要;執(zhí)行什么動(dòng)畫
    //設(shè)置過度效果
    ca.type=@"cube";
    //設(shè)置動(dòng)畫的過度方向（向左）
    ca.subtype=kCATransitionFromLeft
    //設(shè)置動(dòng)畫的時(shí)間
    ca.duration=2.0;
    //添加動(dòng)畫
    [self.iconView.layer addAnimation:ca forKey:nil];
}

//下一張
- (IBAction)nextOnClick:(UIButton *)sender {
    self.index++;
    if (self.index>7) {
        self.index=1;
    }
        self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]];

    //1.創(chuàng)建核心動(dòng)畫
    CATransition *ca=[CATransition animation];

    //1.1告訴要執(zhí)行什么動(dòng)畫
    //1.2設(shè)置過度效果
    ca.type=@"cube";
    //1.3設(shè)置動(dòng)畫的過度方向（向右）
    ca.subtype=kCATransitionFromRight;
    //1.4設(shè)置動(dòng)畫的時(shí)間
    ca.duration=2.0;
    //1.5設(shè)置動(dòng)畫的起點(diǎn)
    ca.startProgress=0.5;
    //1.6設(shè)置動(dòng)畫的終點(diǎn)
//    ca.endProgress=0.5;

    //2.添加動(dòng)畫
    [self.iconView.layer addAnimation:ca forKey:nil];
}
@end

點(diǎn)擊上一張，或者下一張的時(shí)候，展示對應(yīng)的動(dòng)畫效果。

2015111995322098.png (348×532)

二、組動(dòng)畫

CAAnimation的子類，可以保存一組動(dòng)畫對象，將CAAnimationGroup對象加入層后，組中所有動(dòng)畫對象可以同時(shí)并發(fā)運(yùn)行

屬性解析：

animations：用來保存一組動(dòng)畫對象的NSArray

默認(rèn)情況下，一組動(dòng)畫對象是同時(shí)運(yùn)行的，也可以通過設(shè)置動(dòng)畫對象的beginTime屬性來更改動(dòng)畫的開始時(shí)間

分組動(dòng)畫代碼示例

代碼：

復(fù)制代碼代碼如下:

#import "YYViewController.h"

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

@end

@implementation NJViewController

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

    // 平移動(dòng)畫
    CABasicAnimation *a1 = [CABasicAnimation animation];
    a1.keyPath = @"transform.translation.y";
    a1.toValue = @(100);
    // 縮放動(dòng)畫
    CABasicAnimation *a2 = [CABasicAnimation animation];
    a2.keyPath = @"transform.scale";
    a2.toValue = @(0.0);
    // 旋轉(zhuǎn)動(dòng)畫
    CABasicAnimation *a3 = [CABasicAnimation animation];
    a3.keyPath = @"transform.rotation";
    a3.toValue = @(M_PI_2);

    // 組動(dòng)畫
    CAAnimationGroup *groupAnima = [CAAnimationGroup animation];

    groupAnima.animations = @[a1, a2, a3];

    //設(shè)置組動(dòng)畫的時(shí)間
    groupAnima.duration = 2;
    groupAnima.fillMode = kCAFillModeForwards;
    groupAnima.removedOnCompletion = NO;

    [self.iconView.layer addAnimation:groupAnima forKey:nil];
}

@end

說明：平移-旋轉(zhuǎn)-縮放作為一組動(dòng)畫一起執(zhí)行。

執(zhí)行效果：

2015111995345002.png (640×960)

三、UIView封裝動(dòng)畫
1.UIView動(dòng)畫（首尾）

（1）.簡單說明

UIKit直接將動(dòng)畫集成到UIView類中，當(dāng)內(nèi)部的一些屬性發(fā)生改變時(shí)，UIView將為這些改變提供動(dòng)畫支持

執(zhí)行動(dòng)畫所需要的工作由UIView類自動(dòng)完成，但仍要在希望執(zhí)行動(dòng)畫時(shí)通知視圖，為此需要將改變屬性的代碼放在[UIView beginAnimations:nil context:nil]和[UIView commitAnimations]之間

常見方法解析:

+ (void)setAnimationDelegate:(id)delegate 設(shè)置動(dòng)畫代理對象，當(dāng)動(dòng)畫開始或者結(jié)束時(shí)會(huì)發(fā)消息給代理對象

+ (void)setAnimationWillStartSelector:(SEL)selector 當(dāng)動(dòng)畫即將開始時(shí)，執(zhí)行delegate對象的selector，并且把beginAnimations:context:中傳入的參數(shù)傳進(jìn)selector

+ (void)setAnimationDidStopSelector:(SEL)selector 當(dāng)動(dòng)畫結(jié)束時(shí)，執(zhí)行delegate對象的selector，并且把beginAnimations:context:中傳入的參數(shù)傳進(jìn)selector

+ (void)setAnimationDuration:(NSTimeInterval)duration 動(dòng)畫的持續(xù)時(shí)間，秒為單位

+ (void)setAnimationDelay:(NSTimeInterval)delay 動(dòng)畫延遲delay秒后再開始

+ (void)setAnimationStartDate:(NSDate *)startDate 動(dòng)畫的開始時(shí)間，默認(rèn)為now

+ (void)setAnimationCurve:(UIViewAnimationCurve)curve 動(dòng)畫的節(jié)奏控制

+ (void)setAnimationRepeatCount:(float)repeatCount 動(dòng)畫的重復(fù)次數(shù)

+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses 如果設(shè)置為YES,代表動(dòng)畫每次重復(fù)執(zhí)行的效果會(huì)跟上一次相反

+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache 設(shè)置視圖view的過渡效果, transition指定過渡類型, cache設(shè)置YES代表使用視圖緩存，性能較好

（2）.代碼示例

復(fù)制代碼代碼如下:

//
// YYViewController.m
// 01-uiview封裝動(dòng)畫
//
// Created by apple on 14-6-22.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"

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

@end

復(fù)制代碼代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
[super viewDidLoad];

}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //打印動(dòng)畫塊的位置
    NSLog(@"動(dòng)畫執(zhí)行之前的位置：%@",NSStringFromCGPoint(self.customView.center));

    //首尾式動(dòng)畫
    [UIView beginAnimations:nil context:nil];
    //執(zhí)行動(dòng)畫
    //設(shè)置動(dòng)畫執(zhí)行時(shí)間
    [UIView setAnimationDuration:2.0];
    //設(shè)置代理
    [UIView setAnimationDelegate:self];
    //設(shè)置動(dòng)畫執(zhí)行完畢調(diào)用的事件
    [UIView setAnimationDidStopSelector:@selector(didStopAnimation)];
    self.customView.center=CGPointMake(200, 300);
    [UIView commitAnimations];

}

-(void)didStopAnimation
{
    NSLog(@"動(dòng)畫執(zhí)行完畢");
    //打印動(dòng)畫塊的位置
    NSLog(@"動(dòng)畫執(zhí)行之后的位置：%@",NSStringFromCGPoint(self.customView.center));
}
@end

執(zhí)行結(jié)果：

2015111995419071.png (320×502) 2015111995436301.png (321×502)

打印動(dòng)畫塊的位置：

2015111995500715.png (881×101)

（3）.UIView封裝的動(dòng)畫與CALayer動(dòng)畫的對比

使用UIView和CALayer都能實(shí)現(xiàn)動(dòng)畫效果，但是在真實(shí)的開發(fā)中，一般還是主要使用UIView封裝的動(dòng)畫，而很少使用CALayer的動(dòng)畫。

CALayer核心動(dòng)畫與UIView動(dòng)畫的區(qū)別：
UIView封裝的動(dòng)畫執(zhí)行完畢之后不會(huì)反彈。即如果是通過CALayer核心動(dòng)畫改變layer的位置狀態(tài)，表面上看雖然已經(jīng)改變了，但是實(shí)際上它的位置是沒有改變的。

代碼示例：

復(fù)制代碼代碼如下:

//
// YYViewController.m
// 01-uiview封裝動(dòng)畫
//
// Created by apple on 14-6-22.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"

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

@end

復(fù)制代碼代碼如下:

@implementation YYViewController

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
   //1.創(chuàng)建核心動(dòng)畫
    CABasicAnimation *anima=[CABasicAnimation animation];
    //平移
    anima.keyPath=@"position";
    //設(shè)置執(zhí)行的動(dòng)畫
    anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];

    //設(shè)置執(zhí)行動(dòng)畫的時(shí)間
    anima.duration=2.0;
    //設(shè)置動(dòng)畫執(zhí)行完畢之后不刪除動(dòng)畫
    anima.removedOnCompletion=NO;
    //設(shè)置保存動(dòng)畫的最新狀態(tài)
    anima.fillMode=kCAFillModeForwards;
//    anima.fillMode=kCAFillModeBackwards;

    //設(shè)置動(dòng)畫的代理
    anima.delegate=self;

    //2.添加核心動(dòng)畫
    [self.customView.layer addAnimation:anima forKey:nil];
}

-(void)animationDidStart:(CAAnimation *)anim
{
    //打印動(dòng)畫塊的位置
//    NSLog(@"動(dòng)畫開始執(zhí)行前的位置：%@",NSStringFromCGPoint(self.customView.center));
    NSLog(@"動(dòng)畫開始執(zhí)行前的位置：%@",NSStringFromCGPoint( self.customView.layer.position));
}
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    //打印動(dòng)畫塊的位置
    NSLog(@"動(dòng)畫執(zhí)行完畢后的位置：%@",NSStringFromCGPoint( self.customView.layer.position));
}

@end

打印結(jié)果：

2015111995529298.png (881×97)

2、block動(dòng)畫

（1）.簡單說明

復(fù)制代碼代碼如下:

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

參數(shù)解析:

duration：動(dòng)畫的持續(xù)時(shí)間

delay：動(dòng)畫延遲delay秒后開始

options：動(dòng)畫的節(jié)奏控制

animations：將改變視圖屬性的代碼放在這個(gè)block中

completion：動(dòng)畫結(jié)束后，會(huì)自動(dòng)調(diào)用這個(gè)block

轉(zhuǎn)場動(dòng)畫

復(fù)制代碼代碼如下:

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

參數(shù)解析:

duration：動(dòng)畫的持續(xù)時(shí)間

view：需要進(jìn)行轉(zhuǎn)場動(dòng)畫的視圖

options：轉(zhuǎn)場動(dòng)畫的類型

animations：將改變視圖屬性的代碼放在這個(gè)block中

completion：動(dòng)畫結(jié)束后，會(huì)自動(dòng)調(diào)用這個(gè)block

復(fù)制代碼代碼如下:

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

方法調(diào)用完畢后，相當(dāng)于執(zhí)行了下面兩句代碼：

復(fù)制代碼代碼如下:

// 添加toView到父視圖

[fromView.superview addSubview:toView];

// 把fromView從父視圖中移除

[fromView.superview removeFromSuperview];

參數(shù)解析:

duration：動(dòng)畫的持續(xù)時(shí)間

options：轉(zhuǎn)場動(dòng)畫的類型

animations：將改變視圖屬性的代碼放在這個(gè)block中

completion：動(dòng)畫結(jié)束后，會(huì)自動(dòng)調(diào)用這個(gè)block

（2）.代碼示例

復(fù)制代碼代碼如下:

#import "YYViewController.h"

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

@end

復(fù)制代碼代碼如下:

@implementation YYViewController

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //block代碼塊動(dòng)畫
        [UIView transitionWithView:self.customView duration:3.0 options:0 animations:^{
            //執(zhí)行的動(dòng)畫
            NSLog(@"動(dòng)畫開始執(zhí)行前的位置：%@",NSStringFromCGPoint(self.customView.center));
            self.customView.center=CGPointMake(200, 300);
        } completion:^(BOOL finished) {
            //動(dòng)畫執(zhí)行完畢后的首位操作
            NSLog(@"動(dòng)畫執(zhí)行完畢");
            NSLog(@"動(dòng)畫執(zhí)行完畢后的位置：%@",NSStringFromCGPoint( self.customView.center));
        }];
}
@end

打印結(jié)果：

2015111995606155.png (878×90)