翻译自:QUICK GUIDE: ANIMATIONS WITH UIVIEWPROPERTYANIMATOR

译者:Haley_Wong

iOS 10 带来了一大票有意思的新特性,像 UIViewPropertyAnimator,它是一个改善动画处理的全新的类。

这个视图属性动画完全颠覆了我们已经习惯的流程,能够为动画逻辑添加更精细的控制。

一个简单的动画

让我们来看看如何通过一个简单的动画改变视图的中心点属性。

let animator = UIViewPropertyAnimator(duration: 1.0, curve: .easeOut){
AView.center = finalPoint
}
animator.startAnimation()

至少有3点需要注意:

1) 这个动画是通过闭包来定义的,与UIView 的动画类很相似“UIView.animation(duration:…)”。

2) 返回一个对象,即动画创建者。

3)这个动画不是立刻开始的,而是通过 startAnimation()方法触发的。

动画状态

我们对一个元素执行动画操作方式的主要变化与以下事实有关:一个属性动画器包含一整套状态机逻辑。通过UIViewAnimating协议实现的功能以一种简单明了的方式管理动画的状态,而这些状态又是通过startAnimation, pauseAnimationstopAnimation函数来实现的。调用这些方法我们可以更新状态的值,使之能在active,inactivestopped之间转换。

当动画开始或者暂停时,动画的状态就是活跃状态;当动画已被初始化但是还未开始或者动画已完成,它就是非活跃状态。需要注意的是 在活跃状态停止态之间有一点点不同。当动画因停止命令而完成或者它真的已经完成后,状态会变成停止态,动画器内部会调用方法finishAnimation(at:) 来标记动画 已完成,将状态设置为非活跃状态,并最终调用完成的代码块。

动画的可选项

可能你已经在前面的例子里注意到,挨着动画的 block,我们定义了两个参数:动画的时长 和动画的曲线,一个UIViewAnimationCurve实例,代表着最常见的曲线(easeIn,easeOut,linear或easeInOut)。

如果你需要对动画取消有更多的控制,你可以用由两个控制点定义的贝塞尔曲线。

let animator = UIViewPropertyAnimator(
duration: 1.0,
point1: CGPoint(0.1,0.5),
point2: CGPoint(0.5, 0.2){ AView.alpha = 0.0
}

(如果一条贝塞尔曲线依然不够,那么你甚至可以利用UITimigCurveProvider来指定一条完全自定义的曲线)

另一个可以传给构造器的有意思的参数是 阻尼系数值。用法与UIView 的动画方法类似,你可以定义出弹簧效果,阻尼系数的取值范围是0到1.

let animator = UIViewPropertyAnimator(
duration: 1.0,
dampingRatio:0.4){ AView.center = CGPoint(x:0, y:0)
}

延迟动画的执行也非常的简单,只需要调用 带有afterDelay参数的startAnimation方法即可。

animator.startAnimation(afterDelay:2.5)

动画的block

UIViewPropertyAnimator 采用的是能够为动画器提供很多有趣能力的UIViewImplicitlyAnimating协议。例如,除了在初始化的时候指定的block外,你还可以指定多个动画block。

// Initialization
let animator = UIViewPropertyAnimator(duration: 2.0, curve: .easeOut){
AView.alpha = 0.0
}
// Another animation block
animator.addAnimation{
Aview.center = aNewPosition
}
animator.startAnimation()

你还可以向已在运行的动画添加动画块,该动画块将立即使用剩余时间作为新动画的持续时间来执行。

与动画流交互

正如我们已提过的那样,我们可以通过调用startAnimation, pauseAnimationstopAnimation轻松地与动画流交互。动画的默认流(从起始点到结束点),能通过fractionComplete属性更改。这个值表示动画完成的百分比,取值范围是0 到 1。你能够修改这个值来像你期望的那样驱动流(例如:用户可能会用滑块或滑动手势实时地修改fraction)。

animator.fractionComplete = slider.value

某些情形下,你可能希望在动画运行完毕时执行一些操作。 addCompletion 方法能让你添加一个(当动画完成时会被触发的)代码块。

animator.addCompletion { (position) in
print("Animation completed")
}

position参数是一个 UIViewAnimatingPosition类型的值,它有三个枚举值,分别代表动画是在开始停止,结束后停止,还是当前位置停止。 通常你都会收到结束的枚举值。

(译者注:UIViewAnimatingPosition的三个枚举值分别是end,start,current)

这就是这份快速指南的全部内容啦。

我已经迫不及待地想要用这个新的动画系统来实现一些很酷的UI 效果了。我会在我的Twitter 上分享我的经验!

(译)快速指南:用UIViewPropertyAnimator做动画的更多相关文章

  1. [译] MongoDB Java异步驱动快速指南

    导读 mongodb-java-driver是mongodb的Java驱动项目. 本文是对MongoDB-java-driver官方文档 MongoDB Async Driver Quick Tour ...

  2. Emacs 快速指南(中文翻译)

      Emacs 快速指南 目录 1. 小结(SUMMARY) 2. 基本的光标控制(BASIC CURSOR CONTROL) 3. 如果 EMACS 失去响应(IF EMACS STOPS RESP ...

  3. Emacs 快速指南 - 原生中文手册

    Emacs 快速指南 -折叠目录 1. 小结(SUMMARY) 2. 基本的光标控制(BASIC CURSOR CONTROL) 3. 如果 EMACS 失去响应(IF EMACS STOPS RES ...

  4. 让CALayer的shadowPath跟随bounds一起做动画改变-b

    在iOS开发中,我们经常需要给视图添加阴影效果,最简单的方法就是通过设置CALayer的shadowColor.shadowOpacity.shadowOffset和shadowRadius这几个属性 ...

  5. 【SFA官方翻译】使用 Kubernetes、Spring Boot 2.0 和 Docker 的微服务快速指南

    [SFA官方翻译]使用 Kubernetes.Spring Boot 2.0 和 Docker 的微服务快速指南 原创: Darren Luo SpringForAll社区 今天 原文链接:https ...

  6. 如何快速上手基础的CSS3动画

    前言 说起CSS3动画,就必须说说 transform,translate,transition,animation这4个属性,transform主要定义元素的动作,比如旋转.倾斜.位移等,trans ...

  7. 从 C++ 到 Objective-C 的快速指南

    简介 当我开始为iOS写代码的时候,我意识到,作为一个C++开发者,我必须花费更多的时间来弄清楚Objective-C中怪异的东西.这就是一个帮助C++专家的快速指南,能够使他们快速的掌握Apple的 ...

  8. 零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形动画

    原文:零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形动画 零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形 ...

  9. 使用requestAnimationFrame做动画效果二

    3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于 ...

随机推荐

  1. Apache Spark Jobs 性能调优

    当你开始编写 Apache Spark 代码或者浏览公开的 API 的时候,你会遇到各种各样术语,比如transformation,action,RDD(resilient distributed d ...

  2. 学习React系列(十)——Render Props

    解决问题:将行为封装,供多个组件使用(在多个组件之间分享某段代码) 组件中的props属性中包含一个"render"属性(该属性为一个返回值为元素的方法),然后在该组件的rende ...

  3. [LeetCode] Equal Tree Partition 划分等价树

    Given a binary tree with n nodes, your task is to check if it's possible to partition the tree to tw ...

  4. C语言中关于运算符优先级别

    在一一个表达式中可能有多个不同的运算符结合起来,由于运算符的优先级别不一样,可能会形成得到的结果不同. 优先级从上到下依次递减,最上面具有最高的优先级,逗号操作符具有最低的优先级. 对于相同的优先级, ...

  5. mysql5.5以上 用户的操作

    mysql5.5以上 用户的操作(转)   1.创建用户 create user 'username'@'host' identified by 'password'; 参数说明: username: ...

  6. 机器学习技法:16 Finale

    Roadmap Feature Exploitation Techniques Error Optimization Techniques Overfitting Elimination Techni ...

  7. 计蒜客NOIP模拟赛(3)D2T1 小区划分

    一条街道的两侧各连续坐落着 N 座单元楼.现在要为这些单元楼划分居民校区. 规则如下: 每个小区只能由同一侧连续的若干座单元楼组成.且两侧都恰有 K 个小区(每个小区至少有一栋楼). 两侧的小区划分规 ...

  8. StopAllSounds

    10月3日,在杭州市西湖景区,一只小松鼠不停地接受一道道食物,花生.玉米.饼干,可谓来者不拒,憨态可掬的模样吸引了众多围观者...Description   小松鼠开心地在树之间跳跃着,突然她停了下来 ...

  9. [HNOI2001]求正整数

    题目描述 对于任意输入的正整数n,请编程求出具有n个不同因子的最小正整数m. 例如:n=4,则m=6,因为6有4个不同整数因子1,2,3,6:而且是最小的有4个因子的整数. 输入输出格式 输入格式: ...

  10. 习题7-1 uva 208(剪枝)

    题意:按最小字典序输出a到b 的所有路径. 思路:先处理出个点到目标点b的情况(是否能到达),搜索即可. 最开始我只判了a能否到b,然后给我的是WA,然后看了半天感觉思路没什么问题,然后把所有点都处理 ...