iOS开发:UIView的Animation效果

   所谓动画效果,就是会动的画,到iOS App中来说的话,就是各种UIView的移动。 想想看,如果我们自己来实现所有UIView的动画效果,需要考虑些什么东西呢?

  * 该UIView现在在哪儿?

  * 该UIView最后会动到哪儿?

  * 该UIView以什么样的方式移动到那儿?

  * 该动画持续多长时间?

  * 每次移动的最小时间间隔?

  * 每次最小时间间隔的移动的应该移动到哪儿?

  * ….

  想想这是一个多么杀脑细胞的过程,尤其是每一次的动画过程都要重复这一折磨的过程。

  还好,现实比想象的美好, 苹果公司为开发者思考了上面的问题,通过使用UIKit提供的动画支持,开发者只需要简单的几行代码就能实现各种各样的动画效果。在UIKit中,所有的动画效果支持的方法都在UIView类中。

  首先,在UIView中有很多属性用以描述一个UIView的状态,而动画就是让UIView从一个状态平滑的过渡到另外一个状态的过程。这些属性有:


  通过设置这些属性,基本上就解决了动画中的移动到哪儿的问题。

  接着,苹果公司在UIView中加入很多方法来方便家控制动画的移动时间,以及移动的方式。iOS3.0及之前,UIView支持的Animation方法有如下这么多:

  Object-c代码

  @interface UIView(UIViewAnimation)

  + (void)beginAnimations:(NSString *)animationID context:(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:(id)delegate; // default = nil

  + (void)setAnimationWillStartSelector:(SEL)selector; // default = NULL. -animationWillStart:(NSString *)animationID context:(void *)context

  + (void)setAnimationDidStopSelector:(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 while set.

  + (BOOL)areAnimationsEnabled;

  @end

  这些方法非常的不直观,开发者还是需要花很多时间去思考怎么组合这些方法。但是自从iOS4.0提供块语法支持之后,苹果公司把动画效果的实现封装了一下,效果立杆见影,直观了许多,因此大家完全可以不用去看上面的那些方法,重点关注如下的方法:

  Object-c代码

  @interface UIView(UIViewAnimationWithBlocks)

  + (void)animateWithDuration:(NSTimeInterval)duration

  delay:(NSTimeInterval)delay

  options:(UIViewAnimationOptions)options

  animations:(void (^)(void))animations

  completion:(void (^)(BOOL finished))completion;

  + (void)animateWithDuration:(NSTimeInterval)duration

  animations:(void (^)(void))animations

  completion:(void (^)(BOOL finished))completion

  NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0

  + (void)animateWithDuration:(NSTimeInterval)duration

  animations:(void (^)(void))animations

  NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0, completion = NULL

  + (void)transitionWithView:(UIView *)view

  duration:(NSTimeIntervl)duration

  options:(UIViewAnimationOptins)options

  animations:(void (^)(void)animations

  completion:(void (^)(BOOL finished) completion

  NS_AVAILABLE_IOS(4_0);

  + (void)transitionFromView:(UIView *)fromView

  toView:(UIView *)toView

  duration:(NSTimeInterval)duration

  options:(UIViewAnimationOptions)options

  completion:(void (^)(BOOL finished))completion

  NS_AVAILABLE_IOS(4_0); // toView added to fromView.superview, fromView removed from its superview

  @end

  上面的几个方法从名字上看就非常直观。前三个方法都可以按如下的方式直译,只是后两个使用了一些默认参数而已:

  Java代码

  做一个动画效果,持续时间为duration,

  延迟delay秒开始执行 ,

  以options指定的方式运行这个动画,

  animations块中指定哪些UIView会参加本次动画效果,以及动画效果完成时这些UIView会是一个什么状态,

  动画完成之后,执行completion块进行收尾。

  有了这3个方法,开发者只需要思考,初始值,结果值,持续时间,运行方式就行了,具体的细节移动都交给类库。

  后2个方法是用于UIView相互之间转换的,个人觉得用处不大,因为用上面的三个方法同样可以做到这些效果,因此略过。

  关于UIView的动画效果支持,有2点值得一提

  * 上面所有的方法都是类方法,当调用这些方法之后,系统会新起线程执行动画效果,不会阻塞主线程的执行。

  * UIView的Animation效果只支持一些简单的2D动画效果,复杂的大家还得研究Core Animation。

  一个实战例子

  在我写的一个小游戏的主机界面中,我使用了一点动画的效果,主界面的设计图如下:


  动画后的效果图如下:


  我想要的效果就是,加载主界面后,图片缓缓的展开成扇形,然后游戏的菜单显示供玩家点击。

  代码如下:

  首先,准备动画前状态,让想展示的UIView不可见:

  Object-c代码

  -(void) prepareForIntroAnimation

  {

  self.sImageView.hidden=YES;

  self.nImageView.hidden=YES;

  self.aImageView.hidden=YES;

  self.pImageView.hidden=YES;

  self.jokerImageView.hidden=YES;

  self.hostGameButton.alpha=0.0f;

  self.joinGameButton.alpha=0.0f;

  self.singlePlayerGameButton.alpha=0.0f;

  self.helpButton.alpha=0.0f;

  _buttonsEnabled = NO;

  }

  然后,展示动画效果:

  Object-c代码

  -(void) performAnimation

  {

  //显示UIView

  self.sImageView.hidden=NO;

  self.nImageView.hidden=NO;

  self.aImageView.hidden=NO;

  self.pImageView.hidden=NO;

  self.jokerImageView.hidden=NO;

  [UIView animateWithDuration:0.65f

  delay:0.5f

  options:UIViewAnimationOptionCurveEaseIn

  animations:^

  {

  //确定UIView的的中心位置和偏转角度

  self.sImageView.center = CGPointMake(80.0f, 108.0f);

  self.sImageView.transform = CGAffineTransformMakeRotation(-0.22f);

  self.nImageView.center = CGPointMake(160.0f, 93.0f);

  self.nImageView.transform = CGAffineTransformMakeRotation(-0.1f);

  self.aImageView.center = CGPointMake(240.0f, 88.0f);

  self.pImageView.center = CGPointMake(320.0f, 93.0f);

  self.pImageView.transform = CGAffineTransformMakeRotation(0.1f);

  self.jokerImageView.center = CGPointMake(400.0f, 108.0f);

  self.jokerImageView.transform = CGAffineTransformMakeRotation(0.22f);

  }

  completion:nil];

  [UIView animateWithDuration:0.5f

  delay:1.0f

  options:UIViewAnimationOptionCurveEaseOut

  animations:^

  {

  //透明度设置为1,显示游戏菜单。

  self.hostGameButton.alpha = 1.0f;

  self.joinGameButton.alpha = 1.0f;

  self.singlePlayerGameButton.alpha = 1.0f;

  self.helpButton.alpha = 1.0f;

  }

  completion:^(BOOL finished)

  {

  _buttonsEnabled = YES;

  }];

  }

  另外,动画效果还可以使用completion的回调块做连接,完成多个动画效果的连接。

时间: 2024-11-01 16:26:04

iOS开发:UIView的Animation效果的相关文章

iOS开发--仿新闻首页效果WMPageController的使用详解_IOS

这一篇记录的是iOS开发中第三方库WMPageController控件的使用方法,主要是用来分页显示内容的,可以通过手势滑动来切换页面,也可以通过点击标题部分来切换页面,如下图所示: 使用方法: 新建工程DemoTest1,然后通过cocoapods引入WMPageController到项目中,Podfile文件的内容如下: platform :ios,'7.0' target 'DemoTest1' do pod 'WMPageController', '~> 1.6.4' end 方法一:

iOS开发之左右抖动效果

CAKeyframeAnimation *shakeAnim = [CAKeyframeAnimation animation]; shakeAnim.keyPath = @"transform.translation.x"; shakeAnim.duration = 0.15; CGFloat delta = 10; shakeAnim.values = @[@0 , @(-delta), @(delta), @0]; shakeAnim.repeatCount = 2; [self

iOS开发之各种动画各种页面切面效果

因工作原因,有段时间没发表博客了,今天就发表篇博客给大家带来一些干货,切勿错过哦.今天所介绍的主题是关于动画的,在之前的博客中也有用到动画的地方,今天就好好的总结一下iOS开发中常用的动画.说道动画其中有一个是仿射变换的概念,至于怎么仿射的怎么变换的,原理如何等在本篇博客中不做赘述.今天要分享的是如和用动画做出我们要做的效果. 今天主要用到的动画类是CALayer下的CATransition至于各种动画类中如何继承的在这也不做赘述,网上的资料是一抓一大把.好废话少说切入今天的正题. 一.封装动画

iOS 开发之动画篇 - 从 UIView 动画说起

毋庸置疑的:在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 -- 这对于app而言是非常重要的. 本文作为动画文集的第一篇,最开始是想做个qq下拉刷新的水滴动画的制作讲解,但这几天研读<iOS Animations by Tutorials>一书,对iOS动画开发有了更为深刻的了解,于是决定动画篇将从UIView动画开始讲起,以后还会有Layer.Transitioning等在内的动画,希望本文能抛砖引玉,带给大家不一

iOS开发中常用的各种动画、页面切面效果_IOS

今天主要用到的动画类是CALayer下的CATransition至于各种动画类中如何继承的在这也不做赘述,网上的资料是一抓一大把.好废话少说切入今天的正题. 一.封装动画方法 1.用CATransition实现动画的封装方法如下,每句代码是何意思,请看注释之. #pragma CATransition动画实现 - (void) transitionWithType:(NSString *) type WithSubtype:(NSString *) subtype ForView : (UIVi

iOS开发中Quartz2D控制圆形缩放和实现刷帧效果_IOS

Quartz2D简要回顾一.什么是Quartz2D  Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统  Quartz 2D能完成的工作:   绘制图形 : 线条\三角形\矩形\圆\弧等   绘制文字   绘制\生成图片(图像)   读取\生成PDF   截图\裁剪图片   自定义UI控件 二.Quartz2D在iOS开发中的价值 为了便于搭建美观的UI界面,iOS提供了UIKit框架,⾥⾯有各种各样的UI控件 UILabel:显⽰文字 UIImageView:显示图片 UIBu

Android开发实现带有反弹效果仿IOS反弹scrollview教程详解_Android

首先给大家看一下我们今天这个最终实现的效果图:   这个是ios中的反弹效果.当然我们安卓中如果想要实现这种效果,感觉不会那么生硬,滚动到底部或者顶部的时候.当然 使用scrollview是无法实现的.所以我们需要新建一个view继承ScrollView package davidbouncescrollview.qq986945193.com.davidbouncescrollview; import android.annotation.SuppressLint; import androi

疑问-IOS开发,cell中的UIView上添加的按钮不能响应事件

问题描述 IOS开发,cell中的UIView上添加的按钮不能响应事件 cell 里添加UIView,UIView上添加按钮,但是按钮不能响应点击时间,交互都打开了,怎么回事,求解.. 解决方案 可能是线程卡死,也可能是所有事件全部都集中在了UIView上无法分发时间,这里给你推荐一个博客http://blog.csdn.net/u013243469/article/details/41284027

iOS开发之路--仿网易抽屉效果_IOS

最终效果图: MainStoryBoard示意图: BeyondViewController.h // // BeyondViewController.h // 19_抽屉效果_仿网易 // // Created by beyond on 14-8-1. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import <UIKit/UIKit.h> #import "LeftTableViewControllerD