iOS UIView动画
2018-06-01 本文已影响114人
Maj_sunshine
一个APP的制作的漂亮程度绝大部分取决于动画的加入，在iOS中动画的形式有很多种，包括UIView动画，核心动画，帧动画，自定义转场动画，现在从最简单的UIView动画入手准备研究一下。
能实现UIView动画的一些属性。
- frame 位置大小
- bounds 拉伸
- center 中心
- transform 变换
- alpha 透明度
- backgroundColor 背景颜色
UIView动画的类方法
// 动画制作开始的标志， animationID是动画的标识
+ (void)beginAnimations:(nullable NSString *)animationID context:(nullable void *)context; // additional context info passed to will start/did stop selectors. begin/commit can be nested
// 提交动画，动画制作结束
+ (void)commitAnimations; // starts up any animations when the top level animation is commited
// no getters. if called outside animation block, these setters have no effect.
// 设置动画的代理
+ (void)setAnimationDelegate:(nullable id)delegate; // default = nil
//动画即将开始执行selector
+ (void)setAnimationWillStartSelector:(nullable SEL)selector; // default = NULL. -animationWillStart:(NSString *)animationID context:(void *)context
//动画结束执行selector
+ (void)setAnimationDidStopSelector:(nullable SEL)selector; // default = NULL.
-animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context
//动画的执行总时间
+ (void)setAnimationDuration:(NSTimeInterval)duration; // default = 0.2
//动画的延迟
+ (void)setAnimationDelay:(NSTimeInterval)delay; // default = 0.0
// 动画的开始时间
+ (void)setAnimationStartDate:(NSDate *)startDate; // default = now ([NSDate date])
// 动画的运动曲线
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve; // default = UIViewAnimationCurveEaseInOut
// 动画的重复次数
+ (void)setAnimationRepeatCount:(float)repeatCount; // default = 0.0. May be fractional
// 执行反方向的动画
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses; // default = NO. used if repeat count is non-zero
// 动画是否从当前状态执行
+ (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState; // default = NO. If YES, the current view position is always used for new animations -- allowing animations to "pile up" on each other. Otherwise, the last end state is used for the animation (the default).
// 视图的过渡效果，制作场景动画
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache; // current limitation - only one per begin/commit block
// 设置动画失效的属性
+ (void)setAnimationsEnabled:(BOOL)enabled; // ignore any attribute changes
认识两个系统枚举
运动速度
typedef NS_ENUM(NSInteger, UIViewAnimationCurve) {
UIViewAnimationCurveEaseInOut, // 慢-快-慢
UIViewAnimationCurveEaseIn, // 先慢后快
UIViewAnimationCurveEaseOut, // 先快后慢
UIViewAnimationCurveLinear, // 匀速
};
转场动画形式
typedef NS_ENUM(NSInteger, UIViewAnimationTransition) {
UIViewAnimationTransitionNone, //无动画
UIViewAnimationTransitionFlipFromLeft, // 从左到右翻页
UIViewAnimationTransitionFlipFromRight, // 从右到左翻页
UIViewAnimationTransitionCurlUp, // 从上到下 卷着翻页
UIViewAnimationTransitionCurlDown, // 从下到上 卷着翻页
};
不同属性创建动画
frame动画
- (void)frameAnimation {
[UIView beginAnimations:@"frameAnimation" context:nil];
[UIView setAnimationDuration:2];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDelay:1];
[UIView setAnimationRepeatCount:MAXFLOAT];
[UIView setAnimationRepeatAutoreverses:NO];
[UIView setAnimationDelegate:self];
_animationView.frame = CGRectMake(100, 100, 100, 100);
[UIView commitAnimations];
}
bounds动画
// bounds动画
- (void)boundsAnimation {
[UIView beginAnimations:@"boundsAnimation" context:nil];
[UIView setAnimationDuration:2];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDelay:1];
[UIView setAnimationRepeatAutoreverses:NO];
[UIView setAnimationDelegate:self];
_animationView.bounds = CGRectMake(0, 0, 150, 150);
[UIView commitAnimations];
}
center动画
// center动画
- (void)centerAnimation {
[UIView beginAnimations:@"centerAnimation" context:nil];
[UIView setAnimationDuration:2];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIView setAnimationDelay:1];
[UIView setAnimationRepeatAutoreverses:YES];
[UIView setAnimationDelegate:self];
_animationView.center = CGPointMake(200, 200);
[UIView commitAnimations];
}
平移动画
// 平移动画
- (void)TranslationAnimation {
[UIView beginAnimations:@"translation" context:nil];
[UIView setAnimationDuration:2];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDelegate:self];
[UIView setAnimationRepeatCount:MAXFLOAT];
CGAffineTransform transform1 = CGAffineTransformMakeTranslation(100, 0);
CGAffineTransform transform2 = CGAffineTransformTranslate(transform1, 0, 100);
CGAffineTransform transform3 = CGAffineTransformTranslate(transform2, 100, 0);
_animationView.transform = transform3;
[UIView commitAnimations];
}
缩放动画
// 缩放动画
- (void)scaleAnimation {
[UIView beginAnimations:@"scale" context:nil];
[UIView setAnimationDuration:2];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDelegate:self];
[UIView setAnimationRepeatCount:MAXFLOAT];
CGAffineTransform transform1 = CGAffineTransformMakeScale(2, 2);
_animationView.transform = transform1;
[UIView commitAnimations];
}
旋转动画
// 旋转动画
- (void)rotationAnimation {
[UIView beginAnimations:@"rotation" context:nil];
[UIView setAnimationDuration:2];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDelegate:self];
[UIView setAnimationRepeatCount:MAXFLOAT];
CGAffineTransform transform1 = CGAffineTransformMakeRotation(M_PI_2);
CGAffineTransform transform2 = CGAffineTransformTranslate(transform1, 0, 100);
_animationView.transform = transform2;
[UIView commitAnimations];
}
透明度动画
// 透明度动画
- (void)alphaAnimation {
[UIView beginAnimations:@"alpha" context:nil];
[UIView setAnimationDuration:2];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDelegate:self];
_animationView.alpha = 0.1;
[UIView commitAnimations];
}
背景色动画
// 背景色动画
- (void)backGroundColorAnimation {
[UIView beginAnimations:@"backGroundColor" context:nil];
[UIView setAnimationDuration:2];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDelegate:self];
CGAffineTransform transform1 = CGAffineTransformMakeScale(2, 2);
[UIView setAnimationRepeatCount:MAXFLOAT];
_animationView.transform = transform1;
_animationView.backgroundColor = [UIColor colorWithRed:(CGFloat)(arc4random() % 255) /255.f green:(CGFloat)(arc4random() % 255) /255.f blue:(CGFloat)(arc4random() % 255) /255.f alpha:1];
[UIView commitAnimations];
}
转场动画
// 转场动画
- (void)transitionAnimation {
[UIView beginAnimations:@"transition" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDelegate:self];
[UIView setAnimationRepeatCount:MAXFLOAT];
[UIView setAnimationTransition:(UIViewAnimationTransitionCurlUp) forView:_animationView cache:NO];
_animationView.backgroundColor = [UIColor redColor];
[UIView commitAnimations];
}
效果如图
UIView动画.gif
使用Block来实现动画的制作。
-
普通动画
// 可以设置时长，延时，入场速度，动画，完成后回调
[UIView animateWithDuration:2 delay:2 options:(UIViewAnimationOptionCurveEaseInOut) animations:^{
// 动画
} completion:^(BOOL finished) {
// 完成后动作
}];
// 最简单的形式, 时长和设置搭配那个号
[UIView animateWithDuration:2 animations:^{
// 动画
}];
// 多一个回调
[UIView animateWithDuration:2 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 //转场，从下向上旋转翻页
-
Spring弹簧动画
设置动画时间，延时，弹性系数
[UIView animateWithDuration:2 delay:2 usingSpringWithDamping:0.8 initialSpringVelocity:0 options:(UIViewAnimationOptionCurveEaseInOut) animations:^{
// 动画
} completion:^(BOOL finished) {
// 结束回调
}];
spring.gif
-
关键帧动画
- duration：动画的总时长
- delay：延迟启动动画的时间
- options：选择动画的效果。
- animations ：需要执行的动画，里面可以是多个关键帧动画
[UIView animateKeyframesWithDuration:5 delay:0 options:(UIViewKeyframeAnimationOptionCalculationModeLinear) animations:^{
} completion:^(BOOL finished) {
}];
- frameStartTime:帧动画开始的时间，百分比占值，动画开始时间/总时间。
- relativeDuration：帧动画持续的时间，。
+(void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:
(double)frameDuration animations:(void (^)(void))animations NS_AVAILABLE_IOS(7_0);
动画效果的枚举
typedef NS_OPTIONS(NSUInteger, UIViewKeyframeAnimationOptions) {
UIViewAnimationOptionLayoutSubviews：动画过程中保证子视图跟随运动。
UIViewAnimationOptionAllowUserInteraction：动画过程中允许用户交互。
UIViewAnimationOptionBeginFromCurrentState：所有视图从当前状态开始运行。
UIViewAnimationOptionRepeat：重复运行动画。
UIViewAnimationOptionAutoreverse ：动画运行到结束点后仍然以动画方式回到初始点。
UIViewAnimationOptionOverrideInheritedDuration：忽略嵌套动画时间设置。
UIViewAnimationOptionOverrideInheritedOptions ：不继承父动画设置或动画类型。
动画模式设置（同前面关键帧动画动画模式一一对应，可以从其中选择一个进行设置）
UIViewKeyframeAnimationOptionCalculationModeLinear：连续运算模式。
UIViewKeyframeAnimationOptionCalculationModeDiscrete ：离散运算模式。
UIViewKeyframeAnimationOptionCalculationModePaced：均匀执行运算模式。
UIViewKeyframeAnimationOptionCalculationModeCubic：平滑运算模式。
UIViewKeyframeAnimationOptionCalculationModeCubicPaced：平滑均匀运算模式。
}
UIView方法的关键帧动画
keyAnimation.gif
