GeekBand.iOS-UIView动画

2016/4/19 posted in  iOS学习笔记  

这周的两个课程安排都是大坑啊,一周怎么够!

先安利:
- ios核心动画高级技巧
- http://transitiontreasury.com
- awesome-ios-animation

课程知识汇总:

UIKit提供的动画支持

苹果给UIView已经做好了简单的动画操作方法,可以自动的给一些属性的变化添加关键帧,生成动画效果。支持的属性包括:

  • frame
  • bounds
  • center
  • transform
  • alpha
  • backgroundColor
  • contentStretch

动画方法:

+(void)animationWithDuration:(NSTimeInterval) delay:(NSTimeInterval) options:(UIViewAnimationOptions) animations:(void(^)(void)) completion:(void(^__nullable)(BOOL finished));
+(void)animationWithDuration:(NSTimeInterval) animations:(void(^)(void)) completion:(void(^__nullable)(BOOL finished));
+(void)animationWithDuration:(NSTimeInterval) animations:(void(^)(void));

其中可以观察到,duration表述动画的时间,在animation这个block中修改view的可动画属性,系统就会自动添加动画。option是系统提供的各种配置常量,用于不同的动画效果。

keyFrame动画支持

上述的动画操作虽然展示了一些动画效果,但是都比较简单。不能满足我们的日常需要。如果我们需要某个动画,先完成一部分,再完成另一部分。比如将一个view 先从A点移到B点再移到C点,用上面的方法就比较困难。这个时候我们就可以借助。UIView的animateKeyFrame方法。

+(void)animateKeyframesWithDuration:(NSTimeInterval) delay:(NSTimeInterval) options:(UIViewKeyFrameAnimationOptions) animations:(void(^)(void)) completion:(void(^__nullable)(BOOL finished))
//需要在上述方法的animation中加入
+(void)addKeyFrameWithRelativeStartTime:(double) relativeDuration:(double) animations:(void(^)(void))

ps.这里的开始时间,持续时间都是百分比。

Spring Animation

Spring Animation是iOS7.0之后系统新启用的一个动画模式。这里上一篇大神blog作为参考:ios-8-spring-animation.
调用方法如下:

+(void)animationWithDuration:(NSTimeInterval)duration
        delay:(NSTimeInterval)delay
        usingSpringWithDamping:(CGFloat)dampingRatio //阻尼值[0,1.0]
        initialSpringVelocity:(CGFloat)velocity//初速度
        options:(UIViewAnimationOptions)options
        animations:(void(^)(void))animations
        completion:(void(^)(BOOL finished))completion       

AutoLayout环境下的动画

在使用AutoLayout之后,我们对view的frame的属性操作就会失效。这个时候,我们制作动画就应该修改的是view的constraint。步骤如下:
1. 修改constraint
2. -[view setNeedsUpdateConstraints]//设置约束
3. -[view layoutIfNeeded]//在 animation block中调用

Transition动画

上一部分介绍了UIView自带的一些动画效果,但是还有一种动画过程没有介绍。那就是用动画过程完成界面切换。这就是View transition动画。

小变化,子View发生变化

UIView API:

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

大变化,场景转化

从formView切换到toView

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

UIViewAnimationOptions介绍

  • 常规动画属性设置(可以同时选择多个进行设置)
    • UIViewAnimationOptionLayoutSubviews:动画过程中保证子视图跟随运动。
    • UIViewAnimationOptionAllowUserInteraction:动画过程中允许用户交互。
    • UIViewAnimationOptionBeginFromCurrentState:所有视图从当前状态开始运行。
    • UIViewAnimationOptionRepeat:重复运行动画。
    • UIViewAnimationOptionAutoreverse :动画运行到结束点后仍然以动画方式回到初始点。
    • UIViewAnimationOptionOverrideInheritedDuration:忽略嵌套动画时间设置。
    • UIViewAnimationOptionOverrideInheritedCurve:忽略嵌套动画速度设置。
    • UIViewAnimationOptionAllowAnimatedContent:动画过程中重绘视图(注意仅仅适用于转场动画)。  
    • UIViewAnimationOptionShowHideTransitionViews:视图切换时直接隐藏旧视图、显示新视图,而不是将旧视图从父视图移除(仅仅适用于转场动画)
    • UIViewAnimationOptionOverrideInheritedOptions :不继承父动画设置或动画类型。
  • 动画速度控制(可从其中选择一个设置)
    • UIViewAnimationOptionCurveEaseInOut:动画先缓慢,然后逐渐加速。
    • UIViewAnimationOptionCurveEaseIn :动画逐渐变慢。
    • UIViewAnimationOptionCurveEaseOut:动画逐渐加速。
    • UIViewAnimationOptionCurveLinear :动画匀速执行,默认值。
  • 转场类型(仅适用于转场动画设置,可以从中选择一个进行设置,基本动画、关键帧动画不需要设置)
    • UIViewAnimationOptionTransitionNone:没有转场动画效果。
    • UIViewAnimationOptionTransitionFlipFromLeft :从左侧翻转效果。
    • UIViewAnimationOptionTransitionFlipFromRight:从右侧翻转效果。
    • UIViewAnimationOptionTransitionCurlUp:向后翻页的动画过渡效果。    
    • UIViewAnimationOptionTransitionCurlDown :向前翻页的动画过渡效果。    
    • UIViewAnimationOptionTransitionCrossDissolve:旧视图溶解消失显示下一个新视图的效果。    
    • UIViewAnimationOptionTransitionFlipFromTop :从上方翻转效果。    
    • UIViewAnimationOptionTransitionFlipFromBottom:从底部翻转效果。

Core Animation

当进行复杂的动画效果时,需要使用Core Animation System系统进行操作。具体请参考:ios核心动画高级技巧