<big>一、UIView动画简介:</big>
1、UIView动画实质上是对Core Animation的封装,提供简洁的动画接口。
2、UIView动画可以设置的动画属性有:<small>
1、大小变化(frame)
2、拉伸变化(bounds)
3、中心位置(center)
4、旋转(transform)
5、透明度(alpha)
6、背景颜色(backgroundColor)
7、拉伸内容(contentStretch)
</small>
<big>二、UIView的类方法</big>
1、开始动画
[UIView beginAnimations:(nullable NSString *) context:(nullable void *)];
第一个参数:动画标识
第二个参数:附加参数,在设置了代理的情况下,此参数将发送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法。大部分情况下,我们设置为nil即可。
2、结束动画
[UIView commitAnimations];
3、动画的参数设置
// 动画持续时间
[UIView setAnimationDuration:(NSTimeInterval)];
// 动画的代理对象
[UIView setAnimationDelegate:(nullable id)];
// 设置动画将开始时代理对象执行的SEL
[UIView setAnimationWillStartSelector:(nullable SEL)];
// 设置动画结束时代理对象执行的SEL
[UIView setAnimationDidStopSelector:(nullable SEL)];
// 设置动画延迟执行的时间
[UIView setAnimationDelay:(NSTimeInterval)];
// 设置动画的重复次数
[UIView setAnimationRepeatCount:(float)];
// 设置动画的曲线
[UIView setAnimationCurve:(UIViewAnimationCurve)];
UIViewAnimationCurve的枚举值如下:
UIViewAnimationCurveEaseInOut, // 慢进慢出(默认值)
UIViewAnimationCurveEaseIn, // 慢进
UIViewAnimationCurveEaseOut, // 慢出
UIViewAnimationCurveLinear // 匀速
// 设置是否从当前状态开始播放动画
[UIView setAnimationBeginsFromCurrentState:YES];
假设上一个动画正在播放,且尚未播放完毕,我们将要进行一个新的动画:
当为YES时:动画将从上一个动画所在的状态开始播放
当为NO时:动画将从上一个动画所指定的最终状态开始播放(此时上一个动画马上结束)
// 设置动画是否继续执行相反的动画
[UIView setAnimationRepeatAutoreverses:(BOOL)];
// 是否禁用动画效果(对象属性依然会被改变,只是没有动画效果)
[UIView setAnimationsEnabled:(BOOL)];
// 设置视图的过渡效果
[UIView setAnimationTransition:(UIViewAnimationTransition) forView:(nonnull UIView *) cache:(BOOL)];
第一个参数:UIViewAnimationTransition的枚举值如下:
UIViewAnimationTransitionNone, //不使用动画
UIViewAnimationTransitionFlipFromLeft, //从左向右旋转翻页
UIViewAnimationTransitionFlipFromRight, //从右向左旋转翻页
UIViewAnimationTransitionCurlUp, //从下往上卷曲翻页
UIViewAnimationTransitionCurlDown, //从上往下卷曲翻页
第二个参数:需要过渡效果的View
第三个参数:是否使用视图缓存,YES:视图在开始和结束时渲染一次;NO:视图在每一帧都渲染
4、实例代码
#import "ViewController.h"
@interface ViewController (){
int iFlag;
}
@property (nonatomic, strong) UIView *showView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
iFlag = 0;
[self initView];
UITapGestureRecognizer *tapBtn = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clickBgViewEvent)];
[self.view addGestureRecognizer:tapBtn];
}
#pragma mark - method
-(void)initView{
[self.view addSubview:self.showView];
}
-(void)clickBgViewEvent{
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationWillStartSelector:@selector(startAnimation:)];
[UIView setAnimationDidStopSelector:@selector(stopAnimation:)];
[UIView setAnimationRepeatCount:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
if (iFlag == 0) {
iFlag = 1;
self.showView.frame = self.view.frame;
}else if (iFlag == 1){
iFlag = 2;
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.showView cache:true];
self.showView.backgroundColor = [UIColor redColor];
}else{
iFlag = 0;
self.showView.frame = CGRectMake((self.view.frame.size.width - 150) / 2, 150, 150, 150);
self.showView.backgroundColor = [UIColor blueColor];
}
[UIView commitAnimations];
}
- (void)startAnimation:(NSString *)aniID {
NSLog(@"%@ start",aniID);
}
- (void)stopAnimation:(NSString *)aniID {
NSLog(@"%@ stop",aniID);
}
#pragma mark - property
-(UIView *)showView{
if (!_showView) {
_showView = [[UIView alloc] initWithFrame:CGRectMake((self.view.frame.size.width - 150) / 2, 150, 150, 150)];
_showView.backgroundColor = [UIColor blueColor];
}
return _showView;
}
@end
<big>三、UIView Block动画</big>
1、最简洁的Block动画:包含时间和动画
[UIView animateWithDuration:(NSTimeInterval) animations:^{
// 执行的动画
}];
2、带有动画完成回调的Block动画
[UIView animateWithDuration:(NSTimeInterval) animations:^{
// 执行的动画
} completion:^(BOOL finished) {
// 动画执行完毕后的操作
}];
3、可设置延迟时间和过渡效果的Block动画
[UIView animateWithDuration:(NSTimeInterval) // 动画持续时间
delay:(NSTimeInterval) // 动画延迟执行的时间
options:(UIViewAnimationOptions) // 动画的过度效果
animations:^{
// 执行的动画
} completion:^(BOOL finished) {
// 动画执行完毕后的操作
}];
UIViewAnimationOptions的枚举值如下,可组合使用:
UIViewAnimationOptionLayoutSubviews //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewAnimationOptionRepeat //无限重复执行动画
UIViewAnimationOptionAutoreverse //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedCurve //忽略嵌套动画的曲线设置
UIViewAnimationOptionAllowAnimatedContent //转场:进行动画时重绘视图
UIViewAnimationOptionShowHideTransitionViews //转场:移除(添加和移除图层的)动画效果
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置
UIViewAnimationOptionCurveEaseInOut //时间曲线,慢进慢出(默认值)
UIViewAnimationOptionCurveEaseIn //时间曲线,慢进
UIViewAnimationOptionCurveEaseOut //时间曲线,慢出
UIViewAnimationOptionCurveLinear //时间曲线,匀速
UIViewAnimationOptionTransitionNone //转场,不使用动画
UIViewAnimationOptionTransitionFlipFromLeft //转场,从左向右旋转翻页
UIViewAnimationOptionTransitionFlipFromRight //转场,从右向左旋转翻页
UIViewAnimationOptionTransitionCurlUp //转场,下往上卷曲翻页
UIViewAnimationOptionTransitionCurlDown //转场,从上往下卷曲翻页
UIViewAnimationOptionTransitionCrossDissolve //转场,交叉消失和出现
UIViewAnimationOptionTransitionFlipFromTop //转场,从上向下旋转翻页
UIViewAnimationOptionTransitionFlipFromBottom //转场,从下向上旋转翻页
4、Spring动画
iOS7.0后新增Spring动画(iOS系统动画大部分采用Spring Animation,适用于所有可被添加动画效果的属性)
[UIView animateWithDuration:(NSTimeInterval) // 动画持续时间
delay:(NSTimeInterval) // 动画延迟执行的时间
usingSpringWithDamping:(CGFloat) // 震动效果,范围0~1,数值越小震动效果越明显
initialSpringVelocity:(CGFloat) // 初始速度,数值越大初始速度越快
options:(UIViewAnimationOptions) // 动画的过渡效果
animations:^{
// 执行的动画
}
completion:^(BOOL finished) {
// 动画执行完毕后的操作
}];
5、Keyframes动画
iOS7.0后新增关键帧动画,支持属性关键帧,不支持路径关键帧
[UIView animateKeyframesWithDuration:(NSTimeInterval) // 动画持续时间
delay:(NSTimeInterval) // 动画延迟执行的时间
options:(UIViewKeyframeAnimationOptions) // 动画的过渡效果
animations:^{
// 执行的关键帧动画
}
completion:^(BOOL finished) {
// 动画执行完毕后的操作
}];
// 增加关键帧的方法:
[UIView addKeyframeWithRelativeStartTime:(double) // 动画开始的时间(占总时间的比例)
relativeDuration:(double) // 动画持续时间(占总时间的比例)
animations:^{
//执行的动画
}];
UIViewKeyframeAnimationOptions的枚举值如下,可组合使用:
UIViewAnimationOptionLayoutSubviews //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewAnimationOptionRepeat //无限重复执行动画
UIViewAnimationOptionAutoreverse //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置
UIViewKeyframeAnimationOptionCalculationModeLinear //运算模式 :连续
UIViewKeyframeAnimationOptionCalculationModeDiscrete //运算模式 :离散
UIViewKeyframeAnimationOptionCalculationModePaced //运算模式 :均匀执行
UIViewKeyframeAnimationOptionCalculationModeCubic //运算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //运算模式 :平滑均匀
6、转场动画
6.1 从旧视图转到新视图的动画效果
[UIView transitionFromView:(nonnull UIView *) // 将要移除的view
toView:(nonnull UIView *) // 将要添加的view
duration:(NSTimeInterval) // 动画持续时间
options:(UIViewAnimationOptions) // 动画的过渡效果
completion:^(BOOL finished) {
// 动画执行完毕后的操作
}]
在该动画过程中,fromView 会从父视图中移除,并讲 toView 添加到父视图中,注意转场动画的作用对象是父视图(过渡效果体现在父视图上)。
调用该方法相当于执行下面两句代码:
[fromView.superview addSubview:toView];
[fromView removeFromSuperview];
6.2 单个视图的过渡效果
[UIView transitionWithView:(nonnull UIView *) // 操作的view
duration:(NSTimeInterval) // 动画持续时间
options:(UIViewAnimationOptions) // 动画的过渡效果
animations:^{
// 执行的动画
}
completion:^(BOOL finished) {
// 动画执行完毕后的操作
}];