iOS 8自定义动画过渡入门指南

第一章:iOS 8定制动画过渡如何入门在iOS 5发布的时候,苹果针对应用界面的设计提出了一种全新的、革命性的方法——故事板(Storyboard),从根本上改变了现有的设计理念。在iOS 5之前,每个视图控制器通常都附带一个名为nib或xib的界面构建器文件。思路很简单:每个视图控制器的界面都要设计在自己的nib文件中,所有的nib文件一起构成整个应用的界面。一方面,这非常方便,因为这迫使开发人员在设计界面时将注意力集中在界面上,但另一方面,最终不得不创建太多的文件,开发人员将无法获得应用程序整体界面的概览。

随着storyboard的出现,以上都成为了历史,因为这种新方法已经被开发者社区广泛使用。与旧技术相比,故事板提供了三个重要的优势:

整个界面设计只发生在一个文件中。项目的文档总数已经大大减少,尤其是在大型项目中。当然,你可以使用额外的nib文件,只创建辅助视图。

开发者可以即时浏览应用的界面和流程。视图控制器之间的转换(界面设计的技术术语叫场景)以及转换是如何发生的,已经在storyboard中完美的定义并清晰的呈现给开发者。

综上所述,场景之间的转换构成了故事板的一个特殊部分,我们一般称之为segue。

转换与应用程序的导航和处理密切相关,因为它清楚地定义了从一个视图到另一个视图的转换细节。这些细节指定了是否应用动画、动画的类型,当然还有实际转换过程中的准备和执行。此外,转换还用于将数据传输到下一个视图控制器,这也很常见。

从编程的角度来看,场景是UIStoryboardSegue类的对象,这个类是在iOS 5中首次引入的。和其他类别的对象。

不同之处在于,不能直接创建或使用此类对象。但是,您可以指定转换的属性,然后在转换即将发生以实现目标时提供它。UIKit框架提供了一些带有默认动画过渡的预定义过渡,包括:推送过渡(包括导航控制器的应用程序)、带有动画选择的模态过渡和弹出过渡。在更高级的情况下,iOS SDK的默认过渡可能不够,因此开发人员必须实现他们的自定义段。创建自定义过渡并不难,因为它是iOS标准编程技术的一部分。实际上,你只需要生成UIStoryboardSegue的一个子类,重载一个名为perform的方法。自定义动画的逻辑必须在这个perform方法中实现。从一个视图控制器切换到另一个视图控制器并返回操作的触发器也需要由开发人员编程,这是一个标准步骤。在本教程中,我的目标是向您展示如何实现自定义过渡,并通过一个简单的演示应用程序介绍这一概念的各个方面。创建自定义过渡的知识可以指导您。

开发更强大的应用程序之路。此外,自定义过渡也有助于最大限度地提高用户体验,开发引人注目的漂亮应用程序。如果你有兴趣学习我刚才说的,让我们在教程中探索所有的细节和自定义过渡的奥秘。

应用程序概述与我之前提供启动项目的教程不同,本教程将从头开始创建一个应用程序。其实我是故意这么做的,因为项目的一些重要部分需要界面构建器,所以我觉得从一开始就一步一步来做,会让你看到细节。

正如我之前所说,我们将开发一个非常简单的应用程序,其中我们将创建两个自定义过渡。需要提前注意的是,我们的演示应用程序会有三个视图控制器,也就是界面构建器中有三个场景和三个相关的类。默认情况下,第一个是由Xcode创建的,所以我们只需要再添加两个。我们将创建一个自定义转换,将第一个视图控制器导航到第二个视图控制器。

(且归),又从第一个到第三个(且归)。我们没有在第二个和第三个视图控制器之间添加任何连接。

因此,我们需要创建两个自定义转换。因为要包含返回,每个转换需要创建两个相应的类(因此,* * *四个):在第一个类中,我们将实现从第一个视图控制器到另一个视图控制器的转换的所有自定义逻辑。第二个类实现了返回第一个视图控制器的逻辑,换句话说,它实现了一个展开序列。我们稍后将讨论撤消过渡,但现在我们只需要记住,这是用于将我们返回到上一个视图控制器的过渡。

视图控制器本身没有任何关系。我们会用一个标签来表示视图控制器的名称,每一个都有不同的背景颜色,这样可以方便我们看到转换的情况(是的,这将是一个丰富多彩的应用)。第一和第二视图控制器也将具有附加标签,其中将显示来自其他视图控制器的定制消息。

最后,当下列动作发生时,转换将发生

第二条:Swift通用UIView动画API Swift通用UIView动画API使用。

默认情况下,本文的读者有能力编写基本的动画。

参数解释

*如解释有误,请指出,谢谢*

1时长:动画执行时间。

2延迟:动画延迟执行时间。

3个选项:

。重复:动画永远重复运行。

。Autoreverse:动画结束后,继续按照相反的行为执行。此属性只能与。重复属性。

曲线线性:动画做线性运动。

。CurveEaseIn:动画开始很慢,然后逐渐加速。

CurveEaseOut:动画开始时很快,结束时变慢。

。CurveEaseInOut:动画缓慢开始,然后加速,在结束前减速。过渡无:没有过渡动画。

。TransitionFlipFromTop:从顶部绕水平轴翻转动画。TransitionFlipFromBottom:从底部绕水平轴翻转动画。

。TransitionFlipFromLeft:从左侧绕垂直轴翻转动画。

。TransitionFlipFromRight:从右侧绕垂直轴翻转动画。

。TransitionCurlUp:从下到上翻页的动画。

。TransitionCurlDown:从上到下翻页的动画。

。TransitionCrossDissolve:视图溶解并消失,显示新视图动画。

4 usingSpringWithDamping:弹簧阻力,取值范围为0.0-1.0,取值越小,“弹簧”振动效果越明显。

5 initialSpringVelocity:动画的初始速度(pt/s)。该值越大,初始速度越快。但需要注意的是,初速度高,时间短时也会出现反弹。普通动画

animateWithDuration:delay:选项:动画:完成:class func animateWithDuration(_ duration:NSTimeInterval,

delay延迟:NSTimeInterval,

options选项:UIViewAnimationOptions,

动画动画:()-& gt;虚空,

完成完成:((Bool)-& gt;Void))

使用指定的持续时间、延迟、选项和完成处理程序将对一个或多个视图的更改制作成动画。

根据相应参数为一个或多个视图制作固定动画(翻译纯属个人观点,如有错误请指出)。

animateWithDuration:delay:usingspringwithminding:initial spring velocity:选项:动画:完成:

class func animateWithDuration(_ duration:NSTimeInterval,

delay延迟:NSTimeInterval,

使用spring with damping dampen into:CG float,

初始弹簧速度速度:CGFloat,

options选项:UIViewAnimationOptions,

动画动画:()-& gt;虚空,

完成完成:((Bool)-& gt;Void))

使用与物理弹簧运动相对应的计时曲线来执行视图动画。

根据相应参数制作一个视图的弹性动画(类似弹簧,翻译纯属个人观点,如有错误请指出)

图借鉴了宋的博客,只是为了更清晰的展示调用两个API的不同效果。

弹簧动画与普通动画的运动曲线比较:

弹簧动画、易出动画、线性动画的动画效果;

过渡动画

transitionWithView:duration:options:animations:completion:class func transitionWithView(_ view:ui view,

持续时间持续时间:NSTimeInterval,

options选项:UIViewAnimationOptions,

动画动画:(()-& gt;无效),

完成完成:((Bool)-& gt;Void))

为指定的容器视图创建过渡动画。为指定视图构建过渡动画(翻译纯属个人观点,如有错误请指出)TransitionFromview:to view:duration:options:completion:

class func transitionFromView(_ from view:ui view,

toView toView: UIView,

持续时间持续时间:NSTimeInterval,

options选项:UIViewAnimationOptions,

完成完成:((Bool)-& gt;Void))

使用给定参数在指定视图之间创建过渡动画。

构建两个给定视图之间的过渡动画(翻译纯属个人观点,如有错误请指出)

以上是UIView动画的基础动画API,其实用起来很简单,就是理解不同参数的含义。

第三章:iOS的核心动画开发与学习,核心动画的基本概念

基础动画(CABasicAnimation)

关键帧动画(CAKeyframeAnimation)

动画组

过渡动画-过渡

ui view-双视图的过渡动画

一、核心动画的基本概念

1.导入QuartzCore.framework框架。

开发步骤

1).初始化一个动画对象并设置一些动画相关的属性。

CALayer中的很多属性都可以用CAAnimation来制作动画,包括:不透明度、位置、变换、边界、内容等。(可以在API文档中搜索:CALayer Animatable Properties)。

3).将动画对象添加到层(CALayer)并开始动画。

4).通过调用CALayer的addAnimation:forKey为层(CALayer)添加动画,这样就可以触发动画了。您可以通过调用removeAnimationForKey来停止层中的动画。

5).CoreAnimation的动画执行过程是后台操作,不会阻塞主线程。

2.属性

1).持续时间:动画的持续时间。

2).repeatCount:重复的次数(HUGE_VALF,MAX FLOAT无限重复)。

3).重复持续时间:重复时间(很少使用)

4).removedOnCompletion:默认为Yes。默认情况下,动画执行后将从层中删除。

5).填充模式

6).biginTime

7).timingFunction:速度控制功能,控制动画节奏。

8).代表

第二,卡巴西卡动画(Cabasiimagination)

如果只实现简单属性变化的动画效果,可以使用UIView的块动画代替基本动画。

1.属性描述

- fromValue:keyPath的相应属性值的keyPath初始值。

-to value:key path的相应属性的结束值。

2.动画流程描述:

-随着动画,在持续时间的持续时间内,keyPath的对应属性值逐渐从Value变为value。

- keyPath的内容是CALayer的可动画的动画属性。

-如果fillMode=kCAFillModeForwards,removedoncomplementation = No,那么动画结束后,图层会一直显示动画执行后的状态,但本质上,图层的属性值仍然是动画执行前的初始值,并没有真正改变。

3.代码实现

位移需要考虑目标点设置的问题。

1.将动画的所有方法封装到一个类中。

MyCAHelper.h

#导入

#导入

#定义kCAHelperAlphaAnimation @ " opacity ";?//淡入动画#定义kcahelperscaleanization @ " transform . scale ";//缩放动画

#定义kCAHelperRotationAnimation @ " transform . rotation ";//旋转动画

#定义kCAHelperPositionAnimation @ " position ";//平移位置动画

@interface MyCAHelper : NSObject

#pragma标记-基本动画的统一调用方法

+(cabasic animation *)myBasicAnimationWithType:(ns string *)animation type duration:(cftime interval)duration from:(ns value *)from

至:(NSValue *)至

自动回复:(BOOL)自动回复;

#pragma标记-关键帧动画方法

# pragmark晃动动画

+ (CAKeyframeAnimation

*)myKeyShakeAnimationWithDuration:(cftime interval)持续时间

角度:(CGFloat)角度

重复计数:(CGFloat)重复计数;

#杂注标记贝塞尔路径动画

+(CAKeyframeAnimation *)mykeypathanimationwithdration:(cftime interval)duration path:(UIBezierPath *)path;

# pragmark弹性仿真动画

+(CAKeyframeAnimation *)myKeyBounceAnimationFrom:(CG point)from

至:(CGPoint)至

持续时间:(CFTimeInterval)持续时间;

@end

MyCAHelper.m

#导入“MyCAHelper.h”

@实现MyCAHelper

#pragma标记-基本动画的统一调用方法

+(cabasic animation *)myBasicAnimationWithType:(ns string *)animation type duration:(cftime interval)duration

来自:(NSValue *)来自

至:(NSValue *)至

自动回复:(BOOL)自动回复

{

// 1.实例化一个CA动画对象。

cabasic animation * anim =[cabasic animation animation with key path:animation type];

// 2.设置动画属性

[anim set duration:duration];

[anim set from value:from];

【anim setto value:to】;

【anim setAutoreverses:auto revereses】;

回归动漫;

}

#pragma标记-关键帧动画方法

# pragmark晃动动画

+ (CAKeyframeAnimation

*)myKeyShakeAnimationWithDuration:(cftime interval)持续时间

角度:(CGFloat)角度

重复计数:(CGFloat)重复计数

{

// 1.初始化动画对象实例

CAKeyframeAnimation * anim =[CAKeyframeAnimation

animationWithKeyPath:@ " transform . rotation "];

// 2.设置动画属性

[anim set duration:duration];

[anim setValues:@[@(角度),@(-角度),@(角度)]];

[anim setRepeatCount:repeatCount];

回归动漫;

}

#杂注标记贝塞尔路径动画

+(CAKeyframeAnimation *)myKeyPathAnimationWithDuration:(cftime interval)持续时间路径:(UIBezierPath *)路径

{

// 1.初始化动画对象实例

CAKeyframeAnimation * anim =[CAKeyframeAnimation

animationWithKeyPath:@ " position "];

// 2.设置动画属性

[anim set duration:duration];