ios动画开发,iOS动画框架

iOS动画-CAAnimation的说明与简单使用

1.CABasicAnimation

通过设定起始点，终点，时间，动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation

2.CAKeyframeAnimation

Keyframe顾名思义就是关键点的frame，你可以通过设定CALayer的始点、中间关键点、终点的frame，时间，动画会沿你设定的轨迹进行移动

3.CAAnimationGroup

Group也就是组合的意思，就是把对这个Layer的所有动画都组合起来。PS：一个layer设定了很多动画，他们都会同时执行，

4.CATransition

这个就是苹果帮开发者封装好的一些动画，

values 指明整个动画过程中的关键帧点

path 与values属性一样，同样是用于指定整个动画所经过的路径的。需要注意的是，values与path是互斥的，当values与path同时指定时，path会覆盖values，即values属性将被忽略。

keyTimes 是一个数组，用以指定每个子路径(AB,BC,CD)的时间。如果你没有显式地对keyTimes进行设置，则系统会默认每条子路径的时间为：ti=duration/(5-1)，即每条子路径的duration相等，都为duration的1\4。当然，我们也可以传个数组让物体快慢结合。例如，你可以传入{0.0, 0.1,0.6,0.7,1.0}，其中首尾必须分别是0和1，因此tAB=0.1-0, tCB=0.6-0.1, tDC=0.7-0.6, tED=1-0.7.....

timeFunctions 这个属性用以指定时间函数，类似于运动的加速度，有以下几种类型。记住，这是一个数组，你有几个子路径就应该传入几个元素

/** Timing function names. **/

calculationMode 该属性决定了物体在每个子路径下是跳着走还是匀速走，跟timeFunctions属性有点类似

iOS动画效果三：CABAsicAnimation实现平移、旋转和放大

使用CABAsicAnimation来实现动画的放缩和旋转是比较常用的，这篇主要介绍CABasicAnimation实现简单的动画效果

最终的效果图为：

Demo地址

对应的实现文件是SecondViewController

首先，我们先定义一个UIView以及三个button按钮，分别对应平移、放大和旋转

在.h文件中定义相应的属性

之后，在.m文件中实现相应的懒加载

将UIView以及button添加到界面上

之后，我们先来实现平移动画，实现下面的方法

这里面遇到挺多坑的，下面逐条说明一下

接下俩，我们类似添加相应的放大和旋转的动画效果

这样，我们就完成了CABasicAnimation实现平移、放大和旋转的动画效果

这种动画效果使用挺多的

另外，我们阅读苹果开发文档时，我们可以看到协议CAAnimationDelegate，通过这个协议我们可以观察动画的开始和结束。

在平移动画中，让CABasicAnimation遵守这个协议

实现相应的协议方法

比较重要的是，我们通过协议方法可以判断动画是否正常完成还是被打断，这个我以前就碰到过动画过程被UITableView 的reloadData打断，导致动画表现异常，具体可以看下这篇文章

CAnimationGroup动画执行时间比duration小

)

最终效果图为：

Demo地址

我写的同一系列的其他文章

iOS开发中动画效果的探究(一)

iOS动画效果的探究二：UIView Animation实现动画

iOS动画效果三：CABAsicAnimation实现平移、旋转和放大

ios动画效果四：使用Pop框架实现弹簧效果

iOS动画效果五：CABasicAnimation实现绕定点旋转的效果 ]

iOS动画效果六：实现自定义的push转场动画

iOS动画效果七：实现自定义present转场动画效果

iOS动画效果八:实现类似系统的测滑返回效果

iOS 动画方法内容整理

动画在UI交互中是一种增强用户体验的利器，目前看到几乎每一个移动App都会使用到各种动画效果。

在IOS开发中实现动画效果通常有三种方式。

可以用来做什么呢：

设置UIView的属性:例如

frame

bounds

center

transform

alpha

backgroundColor

contentStretch

看一下实例：

我们可以看到self.greenView通过UIView Animation动画将某些属性进行了改变。

现在我们适当的加入一些动画执行的方式【options】

在开发中可以添加特定的options满足不同的动画需要。

弹簧效果：

CABasicAnimation 为layer属性提供了基础的帧动画能力，创建一个CABasicAnimation的实例，使用继承自CAPropertyAnimation的animationWithKeyPath:方法，来指定要添加动画的layer属性的keypath

让一个view向左平移，在x方向上从屏幕x中间线型移动到左边消失，耗时1.5秒的动画

KeyPath的改变动画的效果就不一样，开发中改变KeyPath的属性可以实现大多数我们需要的动画执行的效果

用CABasicAnimation执行动画，在动画结束后会回归动画开始前的状态。想要解决的话，必须设置“removedOnCompletion”和“fillMode”这两个属性。

由于在开发过程中光是CABasicAnimation的fromValue、toValue起点和终点设置是无法满足我们希望在动画中途进行更多的变化的需求，所以我们需要认识一下CAKeyframeAnimation

从上面的继承图我们看出CAKeyframeAnimation 比CABasicAnimation多了更多的可设置属性

关键帧动画其实通过一组动画类型的值（或者一个指定的路径）和这些值对应的时间节点以及各时间节点的过渡方式来控制显示的动画。关键帧动画可以通过path属性和values属性来设置动画的关键帧。

可以保存一组动画CAKeyframeAnimation、CABasicAnimation对象，将CAAnimationGroup对象加入图层后，组中所有动画对象可以同时并发运行。

注意：默认情况下，一组动画对象是同时运行的，也可以通过设置单个动画对象的beginTime属性来更改动画的开始时间，单个动画的执行效果可以与动画组执行效果属性分开设定，根据需要调整改变。

iOS 转场动画：以Push方式实现Present跳转

在iOS开发中，页面跳转一般有两种方式：

在SDK开发中，由于需要减小侵入性，通常会使用modal方式弹出SDK的页面，那么默认唤起的动画就是从下到上。现在有一个需求，需要从右到左唤起SDK的页面，所以我们需要用到转场动画，将present的动画改成从右到左，也就是以Push方式实现Present跳转。

实现模态的转场动画的步骤，大概分以下几步：

下面按照这个步骤来实现功能

创建一个类 WBHCPushAnimatedTransition 来封装转场动画

实现系统的 UIViewControllerAnimatedTransitioning 协议

实现present动画，实际就是使用UIView动画来改变 fromVC 和 toVC 的 view 的位置

实现dismiss动画，和上面的present动画相反，将fromVC 和 toVC 的 view 的位置还原

这样，整个转场动画的封装就完成了，下面来实现代理

在要present出来的vc中实现系统代理 UIViewControllerTransitioningDelegate

这样的话，整个功能就基本实现了

但是，体验上还缺少一点：没有侧滑返回。所以，接下来，我们实现侧滑返回的交互转场

创建一个继承自 UIPercentDrivenInteractiveTransition 的类 WBHCPopInteractiveTransition 来封装交互转场

为传入的vc添加拖动手势

拖动手势是加在全屏上的，我们需要将它限制到屏幕左侧，这样才是侧滑返回，否则是全屏返回

核心是处理手势交互转场的过程，我们需要更新转场百分比 updateInteractiveTransition ，标记 完成转场 finishInteractiveTransition 和取消转场 cancelInteractiveTransition

这样，整个交互转场的封装就完成了，下面来实现代理

在要dismiss消失的vc中实现系统代理 UIViewControllerTransitioningDelegate

这样的话，整个侧滑返回的功能就实现了

至此，我们基本上就实现了以Push方式实现Present跳转，同时可以像原生导航一样进行侧滑返回

iOS动画 —— 自定义View

这种方式是直接对图形上下文进行操作，常用的方法有：

之前的讲解文章：

使用方法一绘制路径后将清空图形上下文，如果我们想保存路径来复用，可以使用Quartz提供的CGPath函数集合来创建可复用的路径对象。

这些函数和上面方法一的一一对应，可代替之使用。

UIBezierPath存在于UIKit中，是对路径绘制的封装，和CGContextRef类似，优点是更面向对象，我们可以像操作普通对象一样对其进行操作。

在自定义View的时候，一般使用UIBezierPath来创建路径就能基本满足我们的需求，推荐使用。

之前的讲解文章：

iOS 8自定义动画转场上手指南

篇一：iOS 8自定义动画转场上手指南

iOS 5发布的时候，苹果针对应用程序界面的设计，提出了一种全新的，革命性的方法—Storyboard，它从根本上改变了现有的设计理念。iOS 5之前，每个视图控制器通常都伴有一个Interface Builder的文件，叫nib或者xib，这个想法比较简单：每个视图控制器的界面应该在各自的nib文件中设计，而所有的nib文件一起构成了整个应用程序的界面。一方面，这个是很方便的，因为它强迫开发者在界面设计的时候将注意力集中在界面上，但另一方面，到最后，太多的文件不得不被创建，开发者将不能概览应用的整体界面。

随着storyboard的产生，上面的这些都成为了历史，因为这种新方法受到了开发者社区的广泛使用。相比老的技术，storyboards提供了三个重要的优势：

整个界面设计只发生在一个文件里。项目的总文件数量大大减少了，特别是在大项目里。当然你可以使用额外的nib文件，并且允许只创建辅助视图。

开发者能即时浏览应用的界面和流程。 视图控制器之间的转换（界面设计的专业术语叫场景（scene）），以及转换是如何发生的，在storyboard中已被完美地定义并清楚地呈现给了开发者。

综上所述，场景之间的转换构成storyboard的特殊部分，我们一般把它叫做转场（segue）。

转场跟应用的导航和处理是密切相关的，因为它明确定义了一个视图切换到另一个视图的转换细节。这些细节指定了是否应用动画，动画的类型，当然还有实际转换时的准备和性能。除此之外，转场也用来将传递数据到下一个视图控制器里，这个用法也很常见。

从编程的角度看，场景是UIStoryboardSegue类的一个对象，它第一次在iOS 5中介绍到。和其它类的对象

不同的是，这种对象不能直接的创建或使用。不过你可以指定转场的属性，然后在转场即将发生时提供给它以达到目的。UIKit框架提供了一些带默认动画过渡的预定义的转场，包括：push segues（包括导航控制器的app），带有动画选择的模态转场（modal segues）， popover segues。更高级的情况下，iOS SDK默认的转场可能不够用，所以开发者必须实现他们的自定义转场（custom segues）。 创建一个自定义转场并不难，因为它是iOS标准编程技术的组成部分。实际上你只需要生成UIStoryboardSegue的子类，并重载一个叫perform的方法即可。这个perform方法中必须实现自定义动画的逻辑。从一个视图控制器转换到另一个以及返回操作的触发，也需要由开发者编程提供，这是一个标准的步骤。 在本教程中，我的目标是向你们展示如何实现自定义转场，并通过一个简单的演示应用介绍这个概念的所有方面。拥有创建自定义转场的知识， 可以将你导

向开发更强大的app的道路。此外，对于最大化用户体验，并开发引人注目的漂亮应用，自定义转场也很有帮助。 如果你有兴趣学习我刚刚说的话，就一起来探索教程里的`所有细节和自定义转场的奥秘吧。

应用程序概述不像我之前几个教程提供了一个启动项目，本教程我们将从头开始创建app。事实上，我是故意这么做的，因为，项目中一些重要部分需要用到Interface Builder，所以我认为从头开始按部就班的来做，能让你看清里面的细节。

正如我先前所说，我们将开发一个非常简单的app，在这个应用中我们将创建两个自定义转场。需要提前说明的是，我们的演示应用将有三个视图控制器，也就是在Interface Builder中有三个场景和三个相关类。默认情况下，第一个是由Xcode创建的，因此我们只要再添加两个。我们将创建的自定义转场用来导航第一个视图控制器到第二个

（以及返回），以及从第一个到第三个（以及返回）。第二个和第三个视图控制器之间我们不添加任何联系。

因此，我们需要创建两个自定义转场。因为要包括返回，每一个转场需要创建两个对应的类（因此，共四个）：第一个类里我们将实现从第一个视图控制器到另一个转换的所有自定义逻辑。第二个类实现返回到第一个视图控制器的逻辑，或者换句话说要实现解除转场（unwind segue）。后面会讲到解除转场，现在只需要记住这就是用来让我们返回到前一个视图控制器的转场。

视图控制器本身没什么需要做的。我们会用一个label注明视图控制器的名称，每一个会有一个不同的背景颜色，可以让我们很容易地查看转换（是的，这将是一个五颜六色的应用）。第一个和第二个视图控制器也会多一个label，其中从其他视图控制器传来的自定义的消息将被显示出来。

最后，转场将在以下的动作发生的时候

篇二：Swift常用UIView Animation API使用

Swift常用UIView Animation API使用

本文默认读者有基础动画编写能力

参数解释

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

1 duration: 动画执行时间

2 delay:动画延迟执行时间

3 options：

.Repeat：动画永远重复的运行

.Autoreverse：动画执行结束后按照相反的行为继续执行。该属性只能和.Repeat属性组合使用

.CurveLinear：动画做线性运动

.CurveEaseIn：动画缓慢开始，然后逐渐加速

.CurveEaseOut：动画迅速开始，在结束时减速

.CurveEaseInOut：动画慢慢开始，然后加速，在结束之前减速.TransitionNone：没有转场动画

.TransitionFlipFromTop ：从顶部围绕水平轴做翻转动画 .TransitionFlipFromBottom：从底部围绕水平轴做翻转动画

.TransitionFlipFromLeft ：从左侧围绕垂直轴做翻转动画

.TransitionFlipFromRight：从右侧围绕垂直轴做翻转动画

.TransitionCurlUp：从下往上做翻页动画

.TransitionCurlDown ：从上往下做翻页动画

.TransitionCrossDissolve：视图溶解消失显示新视图动画

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

5 initialSpringVelocity：动画初始的速度（pt/s），数值越大初始速度越快。但要注意的是，初始速度取值较高而时间较短时，也会出现反弹情况。普通动画

animateWithDuration:delay:options:animations:completion: class func animateWithDuration(_ duration: NSTimeInterval,

delay delay: NSTimeInterval,

options options: UIViewAnimationOptions,

animations animations: () - Void,

completion completion: ((Bool) - Void))

Animate changes to one or more views using the specified duration, delay, options, and completion handler.

对一个或者多个视图按照相应参数做固定动画(翻译纯属个人见解，有错请指出)

animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:

class func animateWithDuration(_ duration: NSTimeInterval,

delay delay: NSTimeInterval,

usingSpringWithDamping dampingRatio: CGFloat,

initialSpringVelocity velocity: CGFloat,

options options: UIViewAnimationOptions,

animations animations: () - Void,

completion completion: ((Bool) - Void))

Performs a view animation using a timing curve corresponding to the motion of a physical spring.

对一个视图按照相应参数做弹性动画(类似于弹簧，翻译纯属个人见解，有错请指出)

图片借鉴Renfei Song's Blog，只为更清楚的展示调用两个API的不同效果

Spring Animation 和普通的动画的运动曲线的对比：

Spring Animation, Ease-Out Animation 和 Linear Animation 的动画效果：

转场动画

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

duration duration: NSTimeInterval,

options options: UIViewAnimationOptions,

animations animations: (() - Void),

completion completion: ((Bool) - Void))

Creates a transition animation for the specified container view.为指定的视图构建一个过渡动画(翻译纯属个人见解，有错请指出)transitionFromView:toView:duration:options:completion:

class func transitionFromView(_ fromView: UIView,

toView toView: UIView,

duration duration: NSTimeInterval,

options options: UIViewAnimationOptions,

completion completion: ((Bool) - Void))

Creates a transition animation between the specified views using the given parameters.

在两个给定视图之间构建过渡动画(翻译纯属个人见解，有错请指出)

以上为UIView Animation的基础动画API，使用其实很简单，就是要理解不同参数的意义。

篇三：iOS开发学习之核心动画

核心动画基本概念

基础动画（CABasicAnimation）

关键帧动画（CAKeyframeAnimation）

动画组

转场动画－CATransition

UIView的转场动画－双视图

　 　一、核心动画基本概念

1.导入QuartzCore.framework框架

开发步骤

1).初始化一个动画对象（CAAnimation）并且设置一些动画相关属性

2).CALayer中很多属性都可以通过CAAnimation实现动画效果，包括：opacity、position、transform、bounds、contents等（可以在API文档中搜索：CALayer Animatable Properties）

3).添加动画对象到层（CALayer）中，开始执行动画

4).通过调用CALayer的addAnimation：forKey增加动画到层（CALayer）中，这样就能触发动画。通过调用removeAnimationForKey可以停止层中的动画

5).Core Animation的动画执行过程都是后台操作的，不会阻塞主线程

2.属性

1).duration：动画的持续时间

2).repeatCount：重复次数（HUGE_VALF、MAX FLOAT无限重复）

3).repeatDuration：重复时间（用的很少）

4).removedOnCompletion：默认为Yes。动画执行完后默认会从图层删除掉

5).fillMode

6).biginTime

7).timingFunction：速度控制函数，控制动画节奏

8).delegate

　 　二、基础动画（CABasicAnimation）

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

1.属性说明

－fromValue：keyPath相应属性值的初始值

－toValue：keyPath相应属性的结束值

2.动画过程说明：

－随着动画的就行，在duration的持续时间内，keyPath相应的属性值从fromValue渐渐变为toValue

－keyPath内容是CALayer的可动画Animation属性

－如果fillMode＝kCAFillModeForwards同时removedOnCompletion＝NO，那么在动画执行完毕后，图层会保持显示动画执行后的状态，但在实质上，图层的属性值还是动画执行前的初始值，并没有真正改变

3.代码实现

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

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

MyCAHelper.h

#import

#import

#define kCAHelperAlphaAnimation @"opacity";  // 淡入淡出动画 #define kCAHelperScaleAnimation @"transform.scale";// 比例缩放动画

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

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

@interface MyCAHelper : NSObject

#pragma mark - 基本动画统一调用方法

+ (CABasicAnimation *)myBasicAnimationWithType:(NSString *)animationTypeduration:(CFTimeInterval)duration from:(NSValue *)from

to:(NSValue *)to

autoRevereses:(BOOL)autoRevereses;

#pragma mark - 关键帧动画方法

#pragma mark 摇晃动画

+ (CAKeyframeAnimation

*)myKeyShakeAnimationWithDuration:(CFTimeInterval)duration

angle:(CGFloat)angle

repeatCount:(CGFloat)repeatCount;

#pragma mark 贝塞尔路径动画

+ (CAKeyframeAnimation *)myKeyPathAnimationWithDuration:(CFTimeInterval)durationpath:(UIBezierPath *)path;

#pragma mark 弹力仿真动画

+ (CAKeyframeAnimation *)myKeyBounceAnimationFrom:(CGPoint)from

to:(CGPoint)to

duration:(CFTimeInterval)duration;

@end

MyCAHelper.m

#import "MyCAHelper.h"

@implementation MyCAHelper

#pragma mark - 基本动画统一调用方法

+ (CABasicAnimation *)myBasicAnimationWithType:(NSString *)animationTypeduration:(CFTimeInterval)duration

from:(NSValue *)from

to:(NSValue *)to

autoRevereses:(BOOL)autoRevereses

{

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

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:animationType];

// 2. 设置动画属性

[anim setDuration:duration];

[anim setFromValue:from];

[anim setToValue:to];

[anim setAutoreverses:autoRevereses];

return anim;

}

#pragma mark - 关键帧动画方法

#pragma mark 摇晃动画

+ (CAKeyframeAnimation

*)myKeyShakeAnimationWithDuration:(CFTimeInterval)duration

angle:(CGFloat)angle

repeatCount:(CGFloat)repeatCount

{

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

CAKeyframeAnimation *anim = [CAKeyframeAnimation

animationWithKeyPath:@"transform.rotation"];

// 2. 设置动画属性

[anim setDuration:duration];

[anim setValues:@[@(angle), @(-angle), @(angle)]];

[anim setRepeatCount:repeatCount];

return anim;

}

#pragma mark 贝塞尔路径动画

+ (CAKeyframeAnimation *)myKeyPathAnimationWithDuration:(CFTimeInterval)duration path:(UIBezierPath *)path

{

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

CAKeyframeAnimation *anim = [CAKeyframeAnimation

animationWithKeyPath:@"position"];

// 2. 设置动画属性

[anim setDuration:duration];