动画篇----UIView动画
2017-07-20 本文已影响16人
小白进城
一、UIView动画介绍
UIView动画实质上是对Core Animation的封装，提供简洁的动画接口。
我们可以同过UIView的动画类别来改变控件的frame、bounds、transform、alpha等等，使用界面看起来跟流畅优雅，增加用户交互上等体验。
二、UIView 类方法动画
1、方法解析：
// 动画开始。animationID：动画标识、context：附加参数在设置了代理的情况下，此参数将发送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法。大部分情况下，我们设置为nil即可。
+ (void)beginAnimations:(nullable NSString *)animationID context:(nullable void *)context;
// 提交动画。动画的相关设置必须在开始设置动画和结束动画之间，否则无效
+ (void)commitAnimations;
// 设置动画的代理
+ (void)setAnimationDelegate:(nullable id)delegate;
// 动画开始触发的方法
+ (void)setAnimationWillStartSelector:(nullable SEL)selector;
// 动画结束触发的方法
+ (void)setAnimationDidStopSelector:(nullable SEL)selector;
// 动画持续时间
+ (void)setAnimationDuration:(NSTimeInterval)duration;
// 动画执行前的延迟时间
+ (void)setAnimationDelay:(NSTimeInterval)delay;
// 动画开始的日期
+ (void)setAnimationStartDate:(NSDate *)startDate;
// 动画的速率类型，有四种类型
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;
// 动画重复的次数
+ (void)setAnimationRepeatCount:(float)repeatCount;
// 动画是否继续执行相反的动画
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;
// 是否从当前状态开始播放动画
+ (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState;
// 是否禁用动画效果（对象属性依然会被改变，只是没有动画效果）
+ (void)setAnimationsEnabled:(BOOL)enabled;
// 设置视图的过渡效果
/*
第一个参数：UIViewAnimationTransition的枚举值如下
UIViewAnimationTransitionNone, //不使用动画
UIViewAnimationTransitionFlipFromLeft, //从左向右旋转翻页
UIViewAnimationTransitionFlipFromRight, //从右向左旋转翻页
UIViewAnimationTransitionCurlUp, //从下往上卷曲翻页
UIViewAnimationTransitionCurlDown, //从上往下卷曲翻页
第二个参数：需要过渡效果的View
第三个参数：是否使用视图缓存，YES：视图在开始和结束时渲染一次；NO：视图在每一帧都渲染
*/
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;
2、使用示例，以frame为例
// 说明需要执行动画
[UIView beginAnimations:nil context:nil];
// 设置动画时间
[UIView setAnimationDuration:1.0];
// 设置速度
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
// 设置动画代理
[UIView setAnimationDelegate:self];
// 动画开始执行某个函数
[UIView setAnimationWillStartSelector:@selector(aniStart)];
// 动画结束执行某个函数
[UIView setAnimationDidStopSelector:@selector(aniStop)];
// 设置动画延迟执行
// [UIView setAnimationDelay:1.0];
// 重复次数
// [UIView setAnimationRepeatCount:2.0];
// 是否反方向执行动画
// [UIView setAnimationRepeatAutoreverses:YES];
// 相关属性设置
self.testView.transform = CGAffineTransformMakeScale(1.2, 2.0);
// 提交动画
[UIView commitAnimations];
----------
-(void)aniStart{
NSLog(@"动画开始了");
}
-(void)aniStop{
NSLog(@"动画结束了");
NSLog(@"testView改变后的frame为：%@",NSStringFromCGRect(self.testView.frame));
}
三、UIview Block动画
iOS4.0以后，增加了Block动画块，提供更简洁的方式来实现动画。
方法解析
1、基础动画
a、可设置延迟时间和过渡效果的Block动画
[UIView animateWithDuration:(NSTimeInterval) // 动画执行时间
delay:(NSTimeInterval) // 延迟时间
options:UIViewAnimationOptions) // 动画的效果
animations:^{
// 你的code
} 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 //转场，从下向上旋转翻页
b、带有动画完成回调的Block动画
// delay = 0.0, options = 0
[UIView animateWithDuration:(NSTimeInterval) //动画持续时间
animations:^{
//执行的动画
} completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
c、最简洁的Block动画：只包含时间和动画
// delay = 0.0, options = 0, completion = NULL
[UIView animateWithDuration:(NSTimeInterval) //动画持续时间
animations:^{
//执行的动画
}];
简单使用
// 缩放控件的frame
[UIView animateWithDuration:1.0 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
self.testView.transform = CGAffineTransformMakeScale(0.8, 1.5);
} completion:^(BOOL finished) {
NSLog(@"frame动画--执行完毕!!");
}];
2、Spring动画（iOS7.0后新增Spring动画）
[UIView animateWithDuration:(NSTimeInterval)//动画持续时间
delay:(NSTimeInterval)//动画延迟执行的时间
usingSpringWithDamping:(CGFloat)//阻尼系数，范围0~1
initialSpringVelocity:(CGFloat)//初始速度，数值越大初始速度越快
options:(UIViewAnimationOptions)//动画的过渡效果
animations:^{
//执行的动画
}
completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
简单使用
/ 弹簧式动画块
[UIView animateWithDuration:2.0 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:10 options:UIViewAnimationOptionCurveEaseOut animations:^{
self.testView.y = self.testView.y+100;
} completion:^(BOOL finished) {
DSLog(@"弹簧式动画--执行完毕!!");
}];
3、Keyframes动画（iOS7.0后新增关键帧动画，支持属性关键帧，不支持路径关键帧）
[UIView animateKeyframesWithDuration:(NSTimeInterval)//动画持续时间
delay:(NSTimeInterval)//动画延迟执行的时间
options:(UIViewKeyframeAnimationOptions)//动画的过渡效果
animations:^{
//执行的关键帧动画
}
completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
UIViewKeyframeAnimationOptions的枚举值如下，可组合使用：
UIViewAnimationOptionLayoutSubviews //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewAnimationOptionRepeat //无限重复执行动画
UIViewAnimationOptionAutoreverse //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置
UIViewKeyframeAnimationOptionCalculationModeLinear //运算模式 :连续
UIViewKeyframeAnimationOptionCalculationModeDiscrete //运算模式 :离散
UIViewKeyframeAnimationOptionCalculationModePaced //运算模式 :均匀执行
UIViewKeyframeAnimationOptionCalculationModeCubic //运算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //运算模式 :平滑均匀
增加关键帧的方法：
[UIView addKeyframeWithRelativeStartTime:(double)//动画开始的时间（占总时间的比例）
relativeDuration:(double) //动画持续时间（占总时间的比例）
animations:^{
//执行的动画
}];
简单使用，改变颜色
// 关键帧动画
[UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
//新建关键帧
[UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{
self.centerShow.backgroundColor = [UIColor colorWithRed:0.9475 green:0.1921 blue:0.1746 alpha:1.0];
}];
//新建关键帧
[UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{
self.centerShow.backgroundColor = [UIColor colorWithRed:0.1064 green:0.6052 blue:0.0334 alpha:1.0];
}];
//新建关键帧
[UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{
self.centerShow.backgroundColor = [UIColor colorWithRed:0.1366 green:0.3017 blue:0.8411 alpha:1.0];
}];
//新建关键帧
[UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{
self.centerShow.backgroundColor = [UIColor colorWithRed:0.619 green:0.037 blue:0.6719 alpha:1.0];
}];
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
4、转场动画
a、 从旧视图转到新视图的动画效果
[UIView transitionFromView:(nonnull UIView *)
toView:(nonnull UIView *)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
在该动画过程中，fromView 会从父视图中移除，并将 toView 添加到父视图中，注意转场动画的作用对象是父视图（过渡效果体现在父视图上）。
调用该方法相当于执行下面两句代码：
[fromView.superview addSubview:toView];
[fromView removeFromSuperview];
b、单个视图的过渡效果
[UIView transitionWithView:(nonnull UIView *)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
animations:^{
//执行的动画
}
completion:^(BOOL finished) {
//动画执行完毕后的操作
}];
简单使用
// 单个视图的过渡效果
[UIView transitionWithView:self.centerShow duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
self.centerShow.image = [UIImage imageNamed:@"Service"];
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
----------
// 从旧视图转到新视图的动画效果
UIImageView * newCenterShow = [[UIImageView alloc]initWithFrame:self.centerShow.frame];
newCenterShow.image = [UIImage imageNamed:@"Service"];
[UIView transitionFromView:self.centerShow toView:newCenterShow duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
四、转载地址
