詳解iOS開(kāi)發(fā)中的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)和組動(dòng)畫(huà)以及UIView封裝動(dòng)畫(huà)
一、轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
CAAnimation的子類(lèi),用于做轉(zhuǎn)場(chǎng)動(dòng)畫(huà),能夠?yàn)閷犹峁┮瞥銎聊缓鸵迫肫聊坏膭?dòng)畫(huà)效果。iOS比Mac OS X的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果少一點(diǎn)
UINavigationController就是通過(guò)CATransition實(shí)現(xiàn)了將控制器的視圖推入屏幕的動(dòng)畫(huà)效果
屬性解析:
type:動(dòng)畫(huà)過(guò)渡類(lèi)型
subtype:動(dòng)畫(huà)過(guò)渡方向
startProgress:動(dòng)畫(huà)起點(diǎn)(在整體動(dòng)畫(huà)的百分比)
endProgress:動(dòng)畫(huà)終點(diǎn)(在整體動(dòng)畫(huà)的百分比)
轉(zhuǎn)場(chǎng)動(dòng)畫(huà)代碼示例
1.界面搭建
2.實(shí)現(xiàn)代碼
//
// YYViewController.m
// 13-轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
//
// 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
@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)畫(huà)
CATransition *ca=[CATransition animation];
//告訴要;執(zhí)行什么動(dòng)畫(huà)
//設(shè)置過(guò)度效果
ca.type=@"cube";
//設(shè)置動(dòng)畫(huà)的過(guò)度方向(向左)
ca.subtype=kCATransitionFromLeft
//設(shè)置動(dòng)畫(huà)的時(shí)間
ca.duration=2.0;
//添加動(dòng)畫(huà)
[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)畫(huà)
CATransition *ca=[CATransition animation];
//1.1告訴要執(zhí)行什么動(dòng)畫(huà)
//1.2設(shè)置過(guò)度效果
ca.type=@"cube";
//1.3設(shè)置動(dòng)畫(huà)的過(guò)度方向(向右)
ca.subtype=kCATransitionFromRight;
//1.4設(shè)置動(dòng)畫(huà)的時(shí)間
ca.duration=2.0;
//1.5設(shè)置動(dòng)畫(huà)的起點(diǎn)
ca.startProgress=0.5;
//1.6設(shè)置動(dòng)畫(huà)的終點(diǎn)
// ca.endProgress=0.5;
//2.添加動(dòng)畫(huà)
[self.iconView.layer addAnimation:ca forKey:nil];
}
@end
點(diǎn)擊上一張,或者下一張的時(shí)候,展示對(duì)應(yīng)的動(dòng)畫(huà)效果。
二、組動(dòng)畫(huà)
CAAnimation的子類(lèi),可以保存一組動(dòng)畫(huà)對(duì)象,將CAAnimationGroup對(duì)象加入層后,組中所有動(dòng)畫(huà)對(duì)象可以同時(shí)并發(fā)運(yùn)行
屬性解析:
animations:用來(lái)保存一組動(dòng)畫(huà)對(duì)象的NSArray
默認(rèn)情況下,一組動(dòng)畫(huà)對(duì)象是同時(shí)運(yùn)行的,也可以通過(guò)設(shè)置動(dòng)畫(huà)對(duì)象的beginTime屬性來(lái)更改動(dòng)畫(huà)的開(kāi)始時(shí)間
分組動(dòng)畫(huà)代碼示例
代碼:
#import "YYViewController.h"
@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *iconView;
@end
@implementation NJViewController
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// 平移動(dòng)畫(huà)
CABasicAnimation *a1 = [CABasicAnimation animation];
a1.keyPath = @"transform.translation.y";
a1.toValue = @(100);
// 縮放動(dòng)畫(huà)
CABasicAnimation *a2 = [CABasicAnimation animation];
a2.keyPath = @"transform.scale";
a2.toValue = @(0.0);
// 旋轉(zhuǎn)動(dòng)畫(huà)
CABasicAnimation *a3 = [CABasicAnimation animation];
a3.keyPath = @"transform.rotation";
a3.toValue = @(M_PI_2);
// 組動(dòng)畫(huà)
CAAnimationGroup *groupAnima = [CAAnimationGroup animation];
groupAnima.animations = @[a1, a2, a3];
//設(shè)置組動(dòng)畫(huà)的時(shí)間
groupAnima.duration = 2;
groupAnima.fillMode = kCAFillModeForwards;
groupAnima.removedOnCompletion = NO;
[self.iconView.layer addAnimation:groupAnima forKey:nil];
}
@end
說(shuō)明:平移-旋轉(zhuǎn)-縮放作為一組動(dòng)畫(huà)一起執(zhí)行。
執(zhí)行效果:
三、UIView封裝動(dòng)畫(huà)
1.UIView動(dòng)畫(huà)(首尾)
(1).簡(jiǎn)單說(shuō)明
UIKit直接將動(dòng)畫(huà)集成到UIView類(lèi)中,當(dāng)內(nèi)部的一些屬性發(fā)生改變時(shí),UIView將為這些改變提供動(dòng)畫(huà)支持
執(zhí)行動(dòng)畫(huà)所需要的工作由UIView類(lèi)自動(dòng)完成,但仍要在希望執(zhí)行動(dòng)畫(huà)時(shí)通知視圖,為此需要將改變屬性的代碼放在[UIView beginAnimations:nil context:nil]和[UIView commitAnimations]之間
常見(jiàn)方法解析:
+ (void)setAnimationDelegate:(id)delegate 設(shè)置動(dòng)畫(huà)代理對(duì)象,當(dāng)動(dòng)畫(huà)開(kāi)始或者結(jié)束時(shí)會(huì)發(fā)消息給代理對(duì)象
+ (void)setAnimationWillStartSelector:(SEL)selector 當(dāng)動(dòng)畫(huà)即將開(kāi)始時(shí),執(zhí)行delegate對(duì)象的selector,并且把beginAnimations:context:中傳入的參數(shù)傳進(jìn)selector
+ (void)setAnimationDidStopSelector:(SEL)selector 當(dāng)動(dòng)畫(huà)結(jié)束時(shí),執(zhí)行delegate對(duì)象的selector,并且把beginAnimations:context:中傳入的參數(shù)傳進(jìn)selector
+ (void)setAnimationDuration:(NSTimeInterval)duration 動(dòng)畫(huà)的持續(xù)時(shí)間,秒為單位
+ (void)setAnimationDelay:(NSTimeInterval)delay 動(dòng)畫(huà)延遲delay秒后再開(kāi)始
+ (void)setAnimationStartDate:(NSDate *)startDate 動(dòng)畫(huà)的開(kāi)始時(shí)間,默認(rèn)為now
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve 動(dòng)畫(huà)的節(jié)奏控制
+ (void)setAnimationRepeatCount:(float)repeatCount 動(dòng)畫(huà)的重復(fù)次數(shù)
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses 如果設(shè)置為YES,代表動(dòng)畫(huà)每次重復(fù)執(zhí)行的效果會(huì)跟上一次相反
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache 設(shè)置視圖view的過(guò)渡效果, transition指定過(guò)渡類(lèi)型, cache設(shè)置YES代表使用視圖緩存,性能較好
(2).代碼示例
//
// YYViewController.m
// 01-uiview封裝動(dòng)畫(huà)
//
// 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
@implementation YYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//打印動(dòng)畫(huà)塊的位置
NSLog(@"動(dòng)畫(huà)執(zhí)行之前的位置:%@",NSStringFromCGPoint(self.customView.center));
//首尾式動(dòng)畫(huà)
[UIView beginAnimations:nil context:nil];
//執(zhí)行動(dòng)畫(huà)
//設(shè)置動(dòng)畫(huà)執(zhí)行時(shí)間
[UIView setAnimationDuration:2.0];
//設(shè)置代理
[UIView setAnimationDelegate:self];
//設(shè)置動(dòng)畫(huà)執(zhí)行完畢調(diào)用的事件
[UIView setAnimationDidStopSelector:@selector(didStopAnimation)];
self.customView.center=CGPointMake(200, 300);
[UIView commitAnimations];
}
-(void)didStopAnimation
{
NSLog(@"動(dòng)畫(huà)執(zhí)行完畢");
//打印動(dòng)畫(huà)塊的位置
NSLog(@"動(dòng)畫(huà)執(zhí)行之后的位置:%@",NSStringFromCGPoint(self.customView.center));
}
@end
執(zhí)行結(jié)果:
打印動(dòng)畫(huà)塊的位置:
(3).UIView封裝的動(dòng)畫(huà)與CALayer動(dòng)畫(huà)的對(duì)比
使用UIView和CALayer都能實(shí)現(xiàn)動(dòng)畫(huà)效果,但是在真實(shí)的開(kāi)發(fā)中,一般還是主要使用UIView封裝的動(dòng)畫(huà),而很少使用CALayer的動(dòng)畫(huà)。
CALayer核心動(dòng)畫(huà)與UIView動(dòng)畫(huà)的區(qū)別:
UIView封裝的動(dòng)畫(huà)執(zhí)行完畢之后不會(huì)反彈。即如果是通過(guò)CALayer核心動(dòng)畫(huà)改變layer的位置狀態(tài),表面上看雖然已經(jīng)改變了,但是實(shí)際上它的位置是沒(méi)有改變的。
代碼示例:
//
// YYViewController.m
// 01-uiview封裝動(dòng)畫(huà)
//
// 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
@implementation YYViewController
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//1.創(chuàng)建核心動(dòng)畫(huà)
CABasicAnimation *anima=[CABasicAnimation animation];
//平移
anima.keyPath=@"position";
//設(shè)置執(zhí)行的動(dòng)畫(huà)
anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];
//設(shè)置執(zhí)行動(dòng)畫(huà)的時(shí)間
anima.duration=2.0;
//設(shè)置動(dòng)畫(huà)執(zhí)行完畢之后不刪除動(dòng)畫(huà)
anima.removedOnCompletion=NO;
//設(shè)置保存動(dòng)畫(huà)的最新?tīng)顟B(tài)
anima.fillMode=kCAFillModeForwards;
// anima.fillMode=kCAFillModeBackwards;
//設(shè)置動(dòng)畫(huà)的代理
anima.delegate=self;
//2.添加核心動(dòng)畫(huà)
[self.customView.layer addAnimation:anima forKey:nil];
}
-(void)animationDidStart:(CAAnimation *)anim
{
//打印動(dòng)畫(huà)塊的位置
// NSLog(@"動(dòng)畫(huà)開(kāi)始執(zhí)行前的位置:%@",NSStringFromCGPoint(self.customView.center));
NSLog(@"動(dòng)畫(huà)開(kāi)始執(zhí)行前的位置:%@",NSStringFromCGPoint( self.customView.layer.position));
}
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
//打印動(dòng)畫(huà)塊的位置
NSLog(@"動(dòng)畫(huà)執(zhí)行完畢后的位置:%@",NSStringFromCGPoint( self.customView.layer.position));
}
@end
打印結(jié)果:
2、block動(dòng)畫(huà)
(1).簡(jiǎn)單說(shuō)明
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
參數(shù)解析:
duration:動(dòng)畫(huà)的持續(xù)時(shí)間
delay:動(dòng)畫(huà)延遲delay秒后開(kāi)始
options:動(dòng)畫(huà)的節(jié)奏控制
animations:將改變視圖屬性的代碼放在這個(gè)block中
completion:動(dòng)畫(huà)結(jié)束后,會(huì)自動(dòng)調(diào)用這個(gè)block
轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
參數(shù)解析:
duration:動(dòng)畫(huà)的持續(xù)時(shí)間
view:需要進(jìn)行轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的視圖
options:轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的類(lèi)型
animations:將改變視圖屬性的代碼放在這個(gè)block中
completion:動(dòng)畫(huà)結(jié)束后,會(huì)自動(dòng)調(diào)用這個(gè)block
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion
方法調(diào)用完畢后,相當(dāng)于執(zhí)行了下面兩句代碼:
// 添加toView到父視圖
[fromView.superview addSubview:toView];
// 把fromView從父視圖中移除
[fromView.superview removeFromSuperview];
參數(shù)解析:
duration:動(dòng)畫(huà)的持續(xù)時(shí)間
options:轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的類(lèi)型
animations:將改變視圖屬性的代碼放在這個(gè)block中
completion:動(dòng)畫(huà)結(jié)束后,會(huì)自動(dòng)調(diào)用這個(gè)block
(2).代碼示例
#import "YYViewController.h"
@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;
@end
@implementation YYViewController
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//block代碼塊動(dòng)畫(huà)
[UIView transitionWithView:self.customView duration:3.0 options:0 animations:^{
//執(zhí)行的動(dòng)畫(huà)
NSLog(@"動(dòng)畫(huà)開(kāi)始執(zhí)行前的位置:%@",NSStringFromCGPoint(self.customView.center));
self.customView.center=CGPointMake(200, 300);
} completion:^(BOOL finished) {
//動(dòng)畫(huà)執(zhí)行完畢后的首位操作
NSLog(@"動(dòng)畫(huà)執(zhí)行完畢");
NSLog(@"動(dòng)畫(huà)執(zhí)行完畢后的位置:%@",NSStringFromCGPoint( self.customView.center));
}];
}
@end
打印結(jié)果:
提示:self.customView.layer.position和self.customView.center等價(jià),因?yàn)閜osition的默認(rèn)值為(0.5,0.5)。
3、補(bǔ)充
(1).UIImageView的幀動(dòng)畫(huà)
UIImageView可以讓一系列的圖片在特定的時(shí)間內(nèi)按順序顯示
相關(guān)屬性解析:
animationImages:要顯示的圖片(一個(gè)裝著UIImage的NSArray)
animationDuration:完整地顯示一次animationImages中的所有圖片所需的時(shí)間
animationRepeatCount:動(dòng)畫(huà)的執(zhí)行次數(shù)(默認(rèn)為0,代表無(wú)限循環(huán))
相關(guān)方法解析:
- (void)startAnimating; 開(kāi)始動(dòng)畫(huà)
- (void)stopAnimating; 停止動(dòng)畫(huà)
- (BOOL)isAnimating; 是否正在運(yùn)行動(dòng)畫(huà)
(2).UIActivityIndicatorView
是一個(gè)旋轉(zhuǎn)進(jìn)度輪,可以用來(lái)告知用戶(hù)有一個(gè)操作正在進(jìn)行中,一般用initWithActivityIndicatorStyle初始化
方法解析:
- (void)startAnimating; 開(kāi)始動(dòng)畫(huà)
- (void)stopAnimating; 停止動(dòng)畫(huà)
- (BOOL)isAnimating; 是否正在運(yùn)行動(dòng)畫(huà)
UIActivityIndicatorViewStyle有3個(gè)值可供選擇:
UIActivityIndicatorViewStyleWhiteLarge //大型白色指示器
UIActivityIndicatorViewStyleWhite //標(biāo)準(zhǔn)尺寸白色指示器
UIActivityIndicatorViewStyleGray //灰色指示器,用于白色背景
- IOS實(shí)戰(zhàn)之自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)詳解
- IOS輕松幾步實(shí)現(xiàn)自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
- 實(shí)例講解iOS中的CATransition轉(zhuǎn)場(chǎng)動(dòng)畫(huà)使用
- 深入學(xué)習(xí)iOS7自定義導(dǎo)航轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
- iOS實(shí)現(xiàn)類(lèi)似格瓦拉電影的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
- IOS登錄頁(yè)面動(dòng)畫(huà)、轉(zhuǎn)場(chǎng)動(dòng)畫(huà)開(kāi)發(fā)詳解
- iOS swift實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的方法示例
- iOS如何自定義控制器轉(zhuǎn)場(chǎng)動(dòng)畫(huà)push詳解
- 詳解IOS圖層轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
- iOS實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的3種方法示例
相關(guān)文章
iOS開(kāi)發(fā)實(shí)現(xiàn)圖片瀏覽功能
這篇文章主要為大家詳細(xì)介紹了iOS開(kāi)發(fā)實(shí)現(xiàn)圖片瀏覽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01詳解iOS中position:fixed吸底時(shí)的滑動(dòng)出現(xiàn)抖動(dòng)的解決方案
這篇文章主要介紹了詳解iOS中position:fixed吸底時(shí)的滑動(dòng)出現(xiàn)抖動(dòng)的解決方案,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12iOS開(kāi)發(fā)教程之UIView和UIViewController的生命周期詳解
UIViewController是IOS程序中的一個(gè)重要組成部分,下面這篇文章主要給大家介紹了關(guān)于iOS開(kāi)發(fā)教程之UIView和UIViewController的生命周期的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-04-04iOS仿支付寶芝麻信用分?jǐn)?shù)儀表盤(pán)動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了iOS仿支付寶芝麻信用分?jǐn)?shù)儀表盤(pán)動(dòng)畫(huà)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09iOS開(kāi)發(fā)之WKWebViewJavascriptBridge Xcode9中導(dǎo)致crash的解決
大家都知道WebViewJavascriptBridge它主要幫助我們優(yōu)雅的實(shí)現(xiàn)OC與JS的交互,下面這篇文章主要給大家介紹了關(guān)于iOS開(kāi)發(fā)之WKWebViewJavascriptBridge Xcode9中導(dǎo)致crash的解決方法,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-10-10iOS中UITableView使用的常見(jiàn)問(wèn)題總結(jié)
這篇文章主要總結(jié)了iOS中UITableView使用的常見(jiàn)問(wèn)題,其中包括如何設(shè)置headerView以及其高度、去掉多余cell的分割線 以及如何設(shè)置section數(shù)、行數(shù)等一系列的問(wèn)題,文中介紹的更詳細(xì),需要的朋友們下面來(lái)一起看看詳細(xì)介紹吧。2017-03-03淺談Unity中IOS Build Settings選項(xiàng)的作用
下面小編就為大家分享一篇淺談Unity中IOS Build Settings選項(xiàng)的作用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01