animation - 3

原创 2015年07月08日 14:32:34

经过前面的两篇对于相关概念的介绍,我们正式进入iOS的animation的学习。

也一样,先从官方文档开始:

Important: This is a preliminary document for an API or technology in development. Apple is supplying this information to help you plan for the adoption of the technologies and programming interfaces described herein for use on Apple-branded products. This information is subject to change, and software implemented according to this document should be tested with final operating system software and final documentation. Newer versions of this document may be provided with future betas of the API or technology.

这个是预备文件对于一个API或者是技术在开发中。苹果提供这份信息来帮助你规划来适应这个技术活着编程接口的描述因此才能用在相关的苹果产品。这份信息如有变化,和根据这份文档的软件实现上应该用最后的操作系统软件和终端文件来测试。关于这份文件更新的版本的测试的API或者是技术可能将会在未来被提供。


Animation is an integral part of the technology for presenting user interfaces on both iOS and OS X. It is also considered an integral part of the user experience for these platforms. In simple terms, animation is the illusion of motion or transformation through the display of a series of images in rapid sequence, with each image differing slightly from the previous one. Although animation enhances the user experience, it is far from mere “eye candy”. Animations give users feedback or context for what is happening in the user interface. For example, in an iPhone productivity application, when a user touches a row in a table view, that view typically slides out of view to the left and a new view slides in from the right to take its place; these animations visually reinforce the connection between the listed item and the detailed presentation of it. iOS and OS X automatically support many of the animations you see, but you can also create animations for other parts of your application’s user interface.

动画是一种技术的整体部分作为展示用户界面于iOS和OS X平台。它也被认为是在这些平台上作为一种整体的部分来作为用户的用户体验。从简单的角度上,动画是通过用较快的速度和顺序展示一系列图像从而显示出运动和转换的假象,在每一张轻微不同于上一张的图片。尽管动画加强了用户体验,而它仅仅只是在蒙骗双眼。动画给了用户一个反馈或者是上下文说明了用户界面发生了什么。例如,在一款iPhone生产应用中,当用户在列表触碰了一行,那一行典型地从视图上滑向左边同时一个新的视图从右边滑向左边来取代它原本的位置;这些动画可视化地加强了列表项目和细节的表现的联系。iOS和OS X自动地提供了大量的动画,但你可以创建一些动画给其它部分应用的用户界面的部分。


Core Animation Powers Animations in the User Interface

The main source of animation capabilities on both platforms is Core Animation. Core Animation is a high-speed, 2D layering engine with Objective-C interfaces for accessing that engine. With Core Animation, after an animation is set up, the execution of that animation is completely automatic. You don’t have to install any loops or timers, you don’t have to draw frame by frame, and you don’t have to track the current state of your animation.

The key technology of Core Animation is the layer. Layers are lightweight objects (CALayer) that, though similar to views, are actually model objects assigned to views. They encapsulate geometry, timing, and visual properties for a view that displays content based on those factors. All you must do is set the layer content, configure the animation properties, and then let Core Animation do its part.

提供动画功能的主要来源是Core Animation。Core Animation是一种高速,基于Objective-C接口的2D层级引擎来连接这个引擎。有了Core Animation,在动画被设置之后,动画的执行会变得完全自动的。你不必去启动任何的loops和计时器(这就是封装的魅力),你也不必逐帧去绘制框架,你也不必要去追踪当前的动画状态。

Core Animation的核心技术是层,层是一个轻量级的对象(CALayer),尽管和view很像,实际上一种分配给视图的模型对象(这种类型很多哦)。它们封装了几何,计时,和可视化属性对于一个视图并且显示基于这种因素。你所要做的就是设置layer内容,配置动画属性,然后就让Core Animation去完成它。


Animations Must Have a Target, a Type, and Timing Details

For all animations you must specify a target object: a visible object with a property that can be animated (such as its frame). You must also specify what type of animation to perform—for example, whether to move the target, resize or scale it, or fade it in or out. Finally, all animations require timing information, which can involve several factors, including duration of the animation, whether it repeats, and its pacing—that is, whether it slows down or speeds up at either the beginning or end of the animation.

对所有的动画你都必须设置一个target对象:一个可视化有着一个可以被动画驱动的(例如它的frame)。你也必须指明执行哪个动画 — 例如,是否去移动这个target,重新调整大小或者缩放它,或者将它渐变出现或者消失。最后,所有的动画要求一个计时信息,它包括了几个因素,包括动画的持久时间,是否重现,还有它的速度—就是说,它是否在开始或者结尾做了缓慢或者加速的操作。


Implicit Versus Explicit Animations

Every view in iOS or OS X is (or can be) backed by a layer object that optimizes compositing and animation operations for the view. Several layer-backed properties of views, including the view’s frame, color, and opacity, are inherently capable of animation. When you change their values, Core Animation animates the transition from old value to new value. These implicit animations require that you give minimal instructions to the UIKit or AppKit frameworks, but after they receive these instructions, they automatically run the animations.

Even when a view’s properties cannot be animated, you can still explicitly animate the view through those properties. For explicit animations, you must more actively manage the animation and the rendered contents using the facilities of Core Animation.

每一个在iOS 或者 OS X平台上的view都是(或者说可以称为)基于层对象,这优化了视图复合和动画操作。视图有几种基于层的属性,包括视图的frame,颜色和透明度,本质上都是动画的功能。当你修改他们的值,Core Animation会自动用动画展现从旧值到新值的转化。这些隐含的动画要求你给一个最低指示给UIKit和AppKit框架,但是当它们接受完了这些指令,它们自动地运行这些动画。

即使当视图的某些属性无法动画演示,你还是可以明确地通过动画演示这些视图通过它们的属性。对于明确的动画,你必须更加主动地管理相关的动画并且用Core Animation相关的工具来渲染这些内容。


The Platforms Integrate Views and Core Animation Differently

Core Animation is integrated with the UIView class of the UIKit framework anda target="_self" NSView/a class of the AppKit framework, but the nature of that integration is different. A major difference is that UIKit integrates Core Animation into the heart of the view rendering implementation, whereas AppKit requires that you request Core Animation capabilities.

In UIKit, each view (UIView object) is backed by a CALayer object that theUIView class automatically creates when the view is initialized. Because the layer is so closely paired with the view, you can access Core Animation through the methods and properties of theUIView class. You can access the layer object directly through the view’s layer property, but you cannot change the layer after the view is created.

In AppKit, the NSView class is integrated with Core Animation and layers in two ways, both of which require explicit action on your part.

  • Layer-backed viewsare views that use Core Animation layers as their backing store. For this, the application must send aa target="_self" setWantsLayer:/a message to the view with an argument of YES.
  • Layer hosting. In this approach, the application sets a Core Animation layer tree that mirrors the views in a view hierarchy or some part of that hierarchy. The application must manipulate the layers directly to interact with the layer content. You request layer-hosted views by setting the view’s root layer object explicitly (a target="_self" setLayer:/a) followed by a setWantsLayer: call.

The AppKit framework also supports animation proxies, which provide easy-to-use animation support that avoids the need to manipulate layer objects directly. It also offers thea target="_self" NSAnimation/a class and its subclassa target="_self" NSViewAnimation/a for generalized animation support and for the capability for linking multiple animations and animating multiple windows and views.

Core Animation 整合了UIKit框架的UIView类和AppKit框架的target = "_self" NSView类上,但是一体化的性质是不一样的。一个重要的区别是UIKit框架整合了Core Animation在视图实现渲染的核心上,然而AppKit要求你请求Core Animation的功能。

在UIKit框架中,每一个视图(UIView 对象)是基于CALayer对象,这个UIView类自动地创建它(指的是CALayer which is backed)当视图初始化的时候。因为layer与view非常接近一对,你可以通过UIView类的方法和属性来获取Core Animation的功能。你可以直接地获取layer对象通过UIView的layer属性,但是你不能修改layer当视图创建了。


经过官方文档的简单介绍,我们得到几个重要的关键点:UIView animation property , CALayer , Core Animation, Layer-backed等。

先从UIView的Animations入手:

Animations

Animations provide fluid visual transitions between different states of your user interface. In iOS, animations are used extensively to reposition views, change their size, remove them from view hierarchies, and hide them. You might use animations to convey feedback to the user or to implement interesting visual effects.

In iOS, creating sophisticated animations does not require you to write any drawing code. All of the animation techniques described in this chapter use the built-in support provided by Core Animation. All you have to do is trigger the animation and let Core Animation handle the rendering of individual frames. This makes creating sophisticated animations very easy with only a few lines of code.

Animations提供了一个流畅的可视化转化在用户界面的不同的状态。在iOS,animations被广泛地使用在视图的复位,改变它们的大小,从视图层结构移除或者是隐藏。你会使用animations来传递反馈给用户来实现有趣的可视化效果。

在iOS,创建一个复杂而精致的动画并不用要求你去写任何代码。这一章节所介绍的所有关于动画的技术上的描述都是使用了Core Animation框架内建的技术支持。你要做的所有事情只是触发这个动画并且让Core Animation来处理每一帧的渲染。这创建了非凡的动画效果仅仅用了少量的代码。


What Can Be Animated?

Both UIKit and Core Animation provide support for animations, but the level of support provided by each technology varies. In UIKit, animations are performed using UIView objects. Views support a basic set of animations that cover many common tasks. For example, you can animate changes to properties of views or use transition animations to replace one set of views with another.

Table 4-1 lists the animatable properties—the properties that have built-in animation support—of theUIView class. Being animatable does not mean animations happen automatically. Changing the value of these properties normally just updates the property (and the view) immediately without an animation. To animate such a change, you must change the property’s value from inside an animation block, which is described inAnimating Property Changes in a View.

UIKit 和 Core Animation 都提供了动画效果的支持,但是所支持的技术水平有异。在UIKit,动画是由UIView对象来提供的。视图支持基础的动画设置并且覆盖了很多日常的任务。例如,你可以将视图的属性的改变用动画演示出来或者将视图位置的变化转换用动画展现出来。

表 4-1列出了能够提供动画效果的属性 — 拥有内置动画支持的属性 — UIView类的属性。拥有可以动画的功能并不是代表动画是自动地展示。直接地改变这些属性的值仅仅只是更新了它们的值而不会伴随动画。为了用动画展现如此的改变,你必须用animation block内建地改变属性的值,这被称为:Animating Property Changes。


@property(nonatomic) CGAffineTransform transform;   // default is CGAffineTransformIdentity. animatable
@property(nonatomic)                 CGRect            contentStretch NS_DEPRECATED_IOS(3_0,6_0); // animatable. default is unit rectangle {{0,0} {1,1}}. Now deprecated: please use -[UIImage resizableImageWithCapInsets:] to achieve the same effect.
其中这两个可动画的属性最为陌生,第一个其实就是变换矩阵,CGAffineTransform是一个6个参数的结构体,暂时知道怎么配参使用就可以了,以后再考虑它的原理。
第二个参数,这篇教程不错:http://blog.csdn.net/andyddd/article/details/7574885 , 但是iOS6以后就建议抛弃了,提供了一个 [UIImage resizableImageWithCapInsets:]这个方法。


Animated view transitions are a way for you to make changes to your view hierarchy beyond those offered by view controllers. Although you should use view controllers to manage succinct view hierarchies, there may be times when you want to replace all or part of a view hierarchy. In those situations, you can use view-based transitions to animate the addition and removal of your views.

In places where you want to perform more sophisticated animations, or animations not supported by theUIView class, you can use Core Animation and the view’s underlying layer to create the animation. Because view and layer objects are intricately linked together, changes to a view’s layer affect the view itself. Using Core Animation, you can animate the following types of changes for your view’s layer:

Animated view transitions(真的不知道如何翻译好)是一个方法来改变你的视图层级关系超过了它们所在的视图控制器所能提供的。尽管你需要使用视图控制器来管理简明扼要的视图层级关系,有时候你是需要替换掉所有或者一部分的视图层级关系。在这种情况下,你可以使用基于视图的转换来动画演示额外或者是要删除的视图对象。

在你需要实现更多的非凡的动画效果的地方,或者是演示一些并不给UIView类所提供的动画时,你可以使用Core Animation和视图的底层layer来创建这个动画。因为视图或者层对象是错综复杂地互相联系,改变视图的layer影响到了视图本身。使用Core Animation,你可以在你的视图的层上的变化上操作动画:



Animating Property Changes in a View

In order to animate changes to a property of the UIView class, you must wrap those changes inside an animation block. The term animation block is used in the generic sense to refer to any code that designates animatable changes. In iOS 4 and later, you create an animation block usingblock objects. In earlier versions of iOS, you mark the beginning and end of an animation block using special class methods of theUIView class. Both techniques support the same configuration options and offer the same amount of control over the animation execution. However, the block-based methods are preferred whenever possible.

The following sections focus on the code you need in order to animate changes to view properties. For information about how to create animated transitions between sets of views, seeCreating Animated Transitions Between Views.

为了用动画演示UIView类的属性的变化,你必须把它们的变化包裹在一个animation block之中。术语: animation block被用在一般意义上指向的任何指定为可动画操作的变化的代码块。在iOS4或者以后,你创建一个 animation block 使用block对象。在早期的版本中,你标记animation block的开始和结尾用特殊的UIView类方法。这两个技术都支持相同的配置选项并且提供相同数量的控制给动画执行。然而,基于block的方法会更加青睐当任何可能的时候。

接下来的章节将集中在一些你需要去用动画来展示视图属性的变化。


Starting Animations Using the Block-Based Methods

In iOS 4 and later, you use theblock-based class methods to initiate animations. There are several block-based methods that offer different levels of configuration for the animation block. These methods are:

在iOS4或者以后,你使用基于block的方法来初始化动画。这里有几个基于block方法来提供了不同程度的animation block的配置:


Because these are class methods, the animation blocks you create with them are not tied to a single view. Thus, you can use these methods to create a single animation that involves changes to multiple views. For example, Listing 4-1 shows the code needed to fade in one view while fading out another over a one second time period. When this code executes, the specified animations are started immediately on another thread so as to avoid blocking the current thread or your application’s main thread.

因为这都是静态方法(类方法),你所创建的animation blocks并没有联系到单个视图。因此,你可以使用这些方法来创建与多个视图变化相关的单个动画操作。例如,表4-1显示了一些在视图上需要去渐变进入和退出的代码在一秒钟的时间内。当这些代码开始执行后,明确的动画操作马上开始在另外一个线程操作以便防止阻塞当前的线程或者是应用的主线程。

    [UIView animateWithDuration:1.0 animations:^{
    
        firstView.alpha = 0.0;
        secondView.alpha = 1.0;

    }];

The animations in the preceding example run only once using an ease-in, ease-out animation curve. If you want to change the default animation parameters, you must use theanimateWithDuration:delay:options:animations:completion: method to perform your animations. This method lets you customize the following animation parameters:

  • The delay to use before starting the animation
  • The type of timing curve to use during the animation
  • The number of times the animation should repeat
  • Whether the animation should reverse itself automatically when it reaches the end
  • Whether touch events are delivered to views while the animations are in progress
  • Whether the animation should interrupt any in-progress animations or wait until those are complete before starting
在上一个代码的例子中仅仅使用了一个渐进渐出的一个动画曲线(curve不太懂意思)。如果你想要改变默认的动画参数,你可以使用animateWithDuration:delay:options:animations:completion:这个方法来实现你的动画。这个方法让你能够自定义下面的动画参数:

  • 执行动画前的延迟时间
  • 动画过程中的执行时间曲线
  • 这个动画需要重复执行的次数
  • 动画是否需要在将要逆转的时候自动达到终点(这个不懂哦)
  • 在执行过程中是否接受触摸事件的传递
  • 是否定义动画能够在别的动画执行当中收到干扰或者是等待它们执行完毕才开始

Another thing that both theanimateWithDuration:animations:completion: andanimateWithDuration:delay:options:animations:completion: methods support is the ability to specify a completion handler block. You might use a completion handler to signal your application that a specific animation has finished. Completion handlers are also the way to link separate animations together.

Listing 4-2 shows an example of an animation block that uses a completion handler to initiate a new animation after the first one finishes. The first call toanimateWithDuration:delay:options:animations:completion: sets up a fade-out animation and configures it with some custom options. When that animation is complete, its completion handler runs and sets up the second half of the animation, which fades the view back in after a delay.

Using a completion handler is the primary way that you link multiple animations.

另外一件事情是:animateWithDuration:animations:completion:和animateWithDuration:delay:options:animations:completion:都支持的是去明确一个完全的执行block。你可以使用一个completion处理来告诉你的应用当你的动画操作完成了之后需要做什么操作。Completion 操作也是一个很好的方法来连接几个分离的动画。

表4-2演示了一个animation block用一个completion handler(其实说白了就是回调)来初始化一个新的动画在第一个动画完成了之后。第一次对方法animateWithDuration:delay:options:animations:completion: 的调用设置了渐出的动画操作并且用了一些自定义的选项来配置它。当动画的操作执行完毕,它的completion handler(回调操作)执行并且设置这个动画操作的的另外部分,它在一定的延迟时候后渐出视图。

使用回调操作是连接多个动画的关键操作。

    UIView* firstView = [UIView new];
    [firstView setFrame:CGRectMake(0, 0, 100, 100)];
    [firstView setBackgroundColor:[UIColor greenColor]];
    [self.view addSubview:firstView];
    
    [UIView animateWithDuration:1.0
                          delay:0.0
                        options:UIViewAnimationOptionCurveEaseIn
                     animations:^{
                     
                         firstView.alpha = 0.0;
                     }
                     completion:^(BOOL finished){
                     
                         [UIView animateWithDuration:1.0
                                               delay:1.0
                                             options:UIViewAnimationOptionCurveEaseOut
                                          animations:^{
                                              
                                              firstView.alpha = 1.0;
                                          }
                                          completion:nil];
                     
                     }];
上面是一个矩形区域渐变色消去和渐变色进入视图的过程。






版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

ulead gif animation3

  • 2007年09月02日 00:58
  • 8.35MB
  • 下载

CSS3 animation--仿写炫酷的下拉菜单

1.原文地址:15款手机端打开菜单动画过渡特效DEMO15 2.下面我们就仿着他的源码自己尝试写一下。不得不说由于是在移动端,这样的效果 确实是狂酷耍帅吊炸天的漂亮!...

Foundation AS3 Animation(中英文版)

  • 2009年10月12日 11:33
  • 4.87MB
  • 下载

css3动画属性--animation(动画)

CSS3中的animation与HTML5中的Canvas绘制动画又不同,animation只应用在页面上已存在的DOM元素上。 运用animation能创建自己想要的一些动画效果,但是有点粗糙。 ...

CSS3动画animation语音滚动

现的图像动画效果大致是这样的:语音滚动! 【代码效果】 CSS3动画animation语音滚动 html,body { padding: 0; margin: 0; } .r...

Foundation_AS3_Animation_source

  • 2013年05月21日 08:43
  • 145KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:animation - 3
举报原因:
原因补充:

(最多只允许输入30个字)