• iOS UIKit:animation


          UIView视图的动画功能,可以使在更新或切换视图时有放缓节奏、产生流畅的动画效果,进而改善用户体验。为了当UIView属性值发生改变时就形成动画,需要将这些属性绑定到animation block中。其中在iOS4.0及之后可以使用block对象,而在之前只能使用UIView的animation开始和结束方法了。

    1 动画属性

          动画属性(animation property)是指当在animation块中修改了该属性,就能产生动画。如果修改表 11中的UIView类内置属性,那么将执行动画效果,但并不是说这些UIView属性就能自动生产动画。改变这些值只是立即更新view的属性而没有形成动画,为了一修改属性值就发生动画,必须改变动画块(animation block)中的值。

    表 11 Animatable UIView properties

    Property

    Changes you can make

    frame

    修改这个属性就是改变视图(view)的尺寸(size)和位置(position),在相对于父视图(superview)的坐标系统。(如果transform属性没有包含统一的transform,那么可以修改bounds或center属性来代替修改frame属性)

    bounds

    修改这个属性就是修改视图(view)的size值。

    center

    修改这个值就是改变位置(position)值,在相对于父视图的坐标系统。

    transform

    修改这个值就是对视图(view)进行缩放(scale)、旋转(rotate)、移动(translate)中心点的位置。

    alpha

    修改这个值就是逐步改变视图(view)的透明度。

    backgroundColor

    修改这个值就是改变视图(view)的背景色。

    contentStretch

    修改这个值就是改变视图(view)内容的延展区域.

    2 Block-Based Methods

    在IOS4.0之后的版本,可以使用基于block的类方法来实现动画。其中UIView有如下的动画方法:

    +animateWithDuration:animations:

    +animateWithDuration:animations:completion:

    +animateWithDuration:delay:options:animations:completion:

    • duration:动画执行的时间,是以秒为单位;如果指定的值为负值或为0,那么所做的改变将不执行动画。
    • delay:延迟时间,根据delay所指定的时间之后,开始执行动画。
    • options:是个选项值,指定动画执行方式,参数值可参考 12
    • animations:是个闭包,闭包相当是一个中括号带有返回值的函数。所有对视图所做了修改都放在这个闭包中。
    • completion:是个闭包,不同的是在动画完成后执行,此参数可以为nil。
     

        animateWithDuration方法实现动画效果非常简单,只需在animations块中实现动画属性变化。那么当执行该方法时,立即开始执行动画,并且动画执行是在其它线程执行,从而避免阻塞主线程的执行。

    表 12 animateWithDuration方法options参数值[4]

    类型

    名称

    描述

    常规动画属性设置

    (可选多个值)

    UIViewAnimationOptionLayoutSubviews

    动画过程中保证子视图跟随运动

    UIViewAnimationOptionAllowUserInteraction

    动画过程中允许用户交互

    UIViewAnimationOptionBeginFromCurrentState

    所有视图从当前状态开始运行

    UIViewAnimationOptionRepeat

    重复运行动画

    UIViewAnimationOptionAutoreverse

    动画运行到结束点后仍然以动画方式回到初始点

    UIViewAnimationOptionOverrideInheritedDuration

    忽略嵌套动画时间设置

    UIViewAnimationOptionOverrideInheritedCurve

    忽略嵌套动画速度设置

    UIViewAnimationOptionAllowAnimatedContent

    动画过程中重绘视图(注意仅仅适用于转场动画)

    UIViewAnimationOptionShowHideTransitionViews

    视图切换时直接隐藏旧视图、显示新视图,而不是将旧视图从父视图移除(仅仅适用于转场动画)

    UIViewAnimationOptionOverrideInheritedOptions

    不继承父动画设置或动画类型

    动画速度控制

    (只可选一个值)

    UIViewAnimationOptionCurveEaseInOut

    动画先缓慢,然后逐渐加速

    UIViewAnimationOptionCurveEaseIn

    动画逐渐变慢

    UIViewAnimationOptionCurveEaseOut

    动画逐渐加速

    UIViewAnimationOptionCurveLinear

    动画匀速执行,默认值

    转场类型

    (仅适用于transitionWithView方法,且只可选一个值,基本动画、关键帧动画不需要设置)

    UIViewAnimationOptionTransitionNone

    没有转场动画效果

    UIViewAnimationOptionTransitionFlipFromLeft

    从左侧翻转效果

    UIViewAnimationOptionTransitionFlipFromRight

    从右侧翻转效果

    UIViewAnimationOptionTransitionCurlUp

    向后翻页的动画过渡效果

    UIViewAnimationOptionTransitionCurlDown

    向前翻页的动画过渡效果

    UIViewAnimationOptionTransitionCrossDissolve

    旧视图溶解消失显示下一个新视图的效果

    UIViewAnimationOptionTransitionFlipFromTop

    从上方翻转效果

    UIViewAnimationOptionTransitionFlipFromBottom

    从底部翻转效果

    如下采用animateWithDuration完整方法,设置两个视图的透明度变化:

     1 - (void)viewDidLoad {
     2     [super viewDidLoad];
     3     UIViewController *firstViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"firstView"];
     4     _fisrtView = firstViewController.view;
     5     [self.view addSubview:_fisrtView];
     6     [self.view addSubview:_button];
     7      _button.alpha = 1;  
     8 }
     9 - (IBAction)buttonDown:(id)sender {
    10     [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionAutoreverse animations:^{
    11         _fisrtView.alpha = 0.0;
    12         _button.alpha = 1.0;
    13     } completion:^(BOOL finished){
    14          _fisrtView.alpha = 1;
    15          _button.alpha = 1.0;
    16      }];
    17 }

    3 Begin/Commit Methods

          如果是IOS 3.2之前的版本,那么必须使用UIView的类方法beginAnimations和commitAnimations来实现效果。这两个方法标志着animation blocks的开始和结束,任何想要改变动画属性,都必须放置在这两个方法之间,当执行commitAnimations方法后才发生新值的修改。为了避免主线程的阻塞,所以动画的执行被系统放置在第二线程执行。如下的程序。

    1 [UIView beginAnimations:@"ToggleViews" context:nil];   //开始执行animation块
    2 [UIView setAnimationDuration:1.0];   //设置动画持续的时间
    3 
    4 // Make the animatable changes.
    5 firstView.alpha = 0.0;
    6 secondView.alpha = 1.0;
    7 [UIView commitAnimations];   // Commit the changes and perform the animation. 

    3.1 配置属性

          若需要对动画效果更多的设计,那么采用表 13所示的UIView类方法。这些类方法需在beginAnimations和commitAnimations之间使用,

    表 13 UIView的相关动画方法

    Method

    Usage

    beginAnimations

    开始动画

    commitAnimations

    提交UIView动画

    setAnimationDuration

    设置动画块中的动画持续时间(用秒)

    setAnimationCurve

    设置动画块中的动画属性变化的曲线。动画曲线是动画运行过程中相对的速度。如果在动画块外调用这个方法将会无效。使用 beginAnimations:context:类方法来开始动画块并用commitAnimations来结束动画块。默认动画曲线的值是UIViewAnimationCurveEaseInOut。

    setAnimationDelegate

    设置动画消息的代理。

    setAnimationTransition

    设置动画方式,并指出动画发生的位置

    commitAnimations

     

    setAnimationDelay

    在动画块中设置动画的延迟属性(以秒为单位)

    setAnimationRepeatCount

    设置动画在动画模块中的重复次数

    setAnimationsEnabled

    设置是否激活动画,当动画参数没有被激活那么动画属性的改变将被忽略。默认动画是被激活的。

    areAnimationsEnabled

    返回一个布尔值表示动画是否结束;如果动画结束返回YES,否则NO

    setAnimationStartDate

    设置在动画块内部动画属性改变的开始时间,使用beginAnimations:context:类方法来开始一个动画块并用commitAnimations类方法来结束动画块。默认的开始时间值由CFAbsoluteTimeGetCurrent方法来返回。

    setAnimationWillStartSelector

    当动画开始时发送一条消息到动画代理

    3.2 配置委托

          如果在动画执行前后执行一些操作,那么必须设置委托对象。可以使用 setAnimationDelegate:方法来设置委托对象,使用 setAnimationWillStartSelector: 和 setAnimationDidStopSelector: 方法来设置开始和暂停操作。

    - (void)animationWillStart:(NSString *)animationID context:(void *)context;
    - (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context;

         animationID和context参数与beginAnimations:context:方法使用的参数一样,

    4 转换动画

          视图转换动画(View transitions)可以实现更加动感的动画,包括如下两种情况:

          1) 在视图层次结构中,改变某视图的子视图显示效果;

          2) 在视图层次结构中,用一个视图替换另一个视图。

          注意视图转换动画(View transitions)仅仅影响视图的层次结构,而对视图控制器(view controller)不产生影响。即在执行转换动画之前,视图控制器处于active状态,那么在执行转换动画之后,视图控制器仍处于active状态。

    4.1 改变子视图

          若在视图层次架构中,改变一个存在视图的子视图显示效果,包括子视图的显示、隐藏、添加和移除等操作,那么可以使用transitionWithView方法实现动画效果。若需要合并其它动画改变,那么需要在options参数添加UIViewAnimationOptionAllowAnimatedContent值。

    + (void)transitionWithView:(UIView *)view
                      duration:(NSTimeInterval)duration
                       options:(UIViewAnimationOptions)options
                    animations:(void (^)(void))animations
                    completion:(void (^)(BOOL finished))completion
    options参数可以参考表 1‑2的参数设置;
    在指定的视图中改变视图属性,从而实现动画;

    4.2 替换视图

          有时需要将一个视图替换为另一个视图,那么可以使用transitionFromView方法,该方法是将fromView视图从层次结构移除,并将插入toView视图,所以如果想再次使用fromView视图,那些需要保留该视图的引用。当然如果只是想隐藏fromView视图,而不删除该视图,可以在transitionFromView方法的options参数中加入UIViewAnimationOptionShowHideTransitionViews值。

    + (void)transitionFromView:(UIView *)fromView
                        toView:(UIView *)toView
                      duration:(NSTimeInterval)duration
                       options:(UIViewAnimationOptions)options
                    completion:(void (^)(BOOL finished))completion
    options参数可以参考表 1‑2的参数设置;
    用fromView视图替换toView视图,从而实现动画; 

    5 参考文献

          [1] View Programming Guide for IOS:Animations

         [2] 网络地址

          [3] http://edu.51cto.com/lesson/id-45316.html

          [4] http://www.hangge.com/blog/cache/detail_664.html

         [5] http://blog.sina.com.cn/s/blog_8d1bc23f0102vqs1.html

     

  • 相关阅读:
    jQuery.fn.extend与jQuery.extend到底区别在哪?
    近来随想
    利用less监视模式实时预览样式刷新浏览器
    前端自动化神器LiveReload配合浏览器和less/sass使用方法
    关于opacity透明度子元素继承现象的若干研究以及hack方法
    使用background和background-image对CSS优先级造成影响
    HTML布局篇之双飞翼(圣杯)布局
    IE使用最高版本设置
    Add data when form is submitted
    fixed window.location.origin useless in IE
  • 原文地址:https://www.cnblogs.com/huliangwen/p/5466838.html
Copyright © 2020-2023  润新知