iOS 动画篇 - pop动画库

最新推荐文章于 2024-09-10 09:25:19 发布

原创

最新推荐文章于 2024-09-10 09:25:19 发布 · 9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#pop 动画

pop

Pop 是 iOS，tvOS 和 OS X 的可扩展动画引擎。除了基本的静态动画外，他支持弹性和衰减动画动态动画，使其可用于构建逼真的基于物理学的交互。API 允许与现有的 Objective-C 或 Swift 代码库快速集成，并支持 NSObject 上任何属性的动画。它是一个成熟并且经过良好测试的框架。

本文主要着重介绍 Pop 库的使用，并结合实例作相关动画的演示。

文章目录

简单示例

我们先看来一下一个简单的示例：移动一个视图的 center。

// 选择动画类型，并指定需要动画的视图view属性或图层layer属性
POPBasicAnimation* animation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewCenter];
// 指定属性的新值
animation.toValue = [NSValue valueWithCGPoint:self.view.center];
// 设置动画的事件回调
animation.delegate = self;
// 向视图view或图层layer添加动画
[self.blueView pop_addAnimation:animation forKey:@"popViewCenterAnimation"];

移动视图

通过上面的例子，我们发现使用 pop 作动画的过程和 Core Animation 没多少区别，这让我们很容易就能上手。另外，我们注意到，使用 pop 主要有以下几个步骤：

选择动画类型，并指定需动画的属性
执行属性的新值
设置动画事件代理（可选）
应用动画

动画介绍

Pop 是使用 Objective-C++ 编写的，该语言是对 C++ 的扩展，就像Objective-C 是 C 的扩展。而至于为什么他们用 Objective-C++ 而不是纯粹的 Objective-C，原因是他们更喜欢 Objective-C++的语法特性所提供的便利。

Pop 支持四种动画类型：

POPBasicAnimation（基础动画）
POPSpringAnimation（弹性动画）
POPDecayAnimation（衰减动画）
POPCustomAnimation（自定义动画）

我们知道 Core Animation 针对的图层级别的变换，并且变化之后视图的 frame 以及图层的 frame 都不会变化（即使设置 removedOnCompletion 设置为NO，不移除动画，fillMode 填充模式设置为 kCAFillModeForwards）。和 Core Animation 不同的，Pop 所做的动画都真实的改变了 frame，并且都会保持最后一帧的位置。另外一个不同点是，Pop 直接列举了所有可以做的属性动画，并且所针对的对象不再只是图层 CALayer，是视图 UIView 也进行了支持。

动画结构

基础动画

在文章开始的例子就使用了基础动画。这里介绍一下其中的属性和方法。

POPBasicAnimation

初始化

POPBasicAnimation 提供了多种初始化基础动画对象的方法，其中包括无任何设置的动画对象方法、指定动画属性的方法、指定时间速率的方法：

+animation

+animationWithPropertyNamed:

+defaultAnimation

+linearAnimation

+easeInAnimation

+easeOutAnimation

+easeInEaseOutAnimation

duration

动画执行的时间，单位为秒，默认为 0.5 秒。

timingFunction

时间速率，是系统的 CAMediaTimingFunction 类型，支持系统提供的五种类型，对应上面的快捷创建方式。通常用在指定动画属性之后来指定运行的速率。

POPPropertyAnimation 和 POPAnimation

此部分是几种动画的父类，在基础动画、弹性动画和衰减动画中都可以使用。

property：用来设置动画属性
fromValue：动画的起始值
toValue：动画的起始值
name：动画的名称
beginTime：和核心动画中一样，动画的开始时间
delegate：动画过程事件的代理，后面会提到
tracer：跟踪器，收集动画信息，调试时使用的。
removedOnCompletion：和核心动画中一样，动画结束是否移除动画
autoreverses：反转动画
repeatCount：重复次数，0和1表示不重复
repeatForever：无限次的重复，设置为YES，动画不会执行完成事件

示例：我们来继续之前移动视图的例子，不同的是我们设置了时间、速率曲线、重复等效果，并且特地使用核心动画写了一个类似的对比动画。

// pop 动画
POPBasicAnimation* animation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPosition];
animation.toValue = [NSValue valueWithCGPoint:self.view.center];
// 设置动画时间
animation.duration = 1.0;
// 设置动画速率
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
// 设置重复次数
animation.repeatForever = YES;
// 设置动画反转
animation.autoreverses = YES;
[self.blueView.layer pop_addAnimation:animation forKey:@"POPBasicAnimation"];

// Core Animation 动画
CABasicAnimation* ani = [CABasicAnimation animationWithKeyPath:@"position"];
ani.toValue = [NSValue valueWithCGPoint:CGPointMake(self.view.center.x, self.view.center.y+60)];
ani.duration = 1.0;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
ani.repeatCount = MAXFLOAT;
ani.autoreverses = YES;
[self.blueView2.layer addAnimation:ani forKey:@"CABasicAnimation"];