(译)快速指南:用UIViewPropertyAnimator做动画
翻译自: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
, pauseAnimation
和 stopAnimation
函数来实现的。调用这些方法我们可以更新状态的值,使之能在active
,inactive
和stopped
之间转换。
当动画开始或者暂停时,动画的状态就是活跃状态
;当动画已被初始化但是还未开始或者动画已完成,它就是非活跃状态
。需要注意的是 在活跃状态
和停止态
之间有一点点不同。当动画因停止命令而完成或者它真的已经完成后,状态会变成停止态
,动画器内部会调用方法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
, pauseAnimation
和 stopAnimation
轻松地与动画流交互。动画的默认流(从起始点到结束点),能通过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做动画的更多相关文章
- [译] MongoDB Java异步驱动快速指南
导读 mongodb-java-driver是mongodb的Java驱动项目. 本文是对MongoDB-java-driver官方文档 MongoDB Async Driver Quick Tour ...
- Emacs 快速指南(中文翻译)
Emacs 快速指南 目录 1. 小结(SUMMARY) 2. 基本的光标控制(BASIC CURSOR CONTROL) 3. 如果 EMACS 失去响应(IF EMACS STOPS RESP ...
- Emacs 快速指南 - 原生中文手册
Emacs 快速指南 -折叠目录 1. 小结(SUMMARY) 2. 基本的光标控制(BASIC CURSOR CONTROL) 3. 如果 EMACS 失去响应(IF EMACS STOPS RES ...
- 让CALayer的shadowPath跟随bounds一起做动画改变-b
在iOS开发中,我们经常需要给视图添加阴影效果,最简单的方法就是通过设置CALayer的shadowColor.shadowOpacity.shadowOffset和shadowRadius这几个属性 ...
- 【SFA官方翻译】使用 Kubernetes、Spring Boot 2.0 和 Docker 的微服务快速指南
[SFA官方翻译]使用 Kubernetes.Spring Boot 2.0 和 Docker 的微服务快速指南 原创: Darren Luo SpringForAll社区 今天 原文链接:https ...
- 如何快速上手基础的CSS3动画
前言 说起CSS3动画,就必须说说 transform,translate,transition,animation这4个属性,transform主要定义元素的动作,比如旋转.倾斜.位移等,trans ...
- 从 C++ 到 Objective-C 的快速指南
简介 当我开始为iOS写代码的时候,我意识到,作为一个C++开发者,我必须花费更多的时间来弄清楚Objective-C中怪异的东西.这就是一个帮助C++专家的快速指南,能够使他们快速的掌握Apple的 ...
- 零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形动画
原文:零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形动画 零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形 ...
- 使用requestAnimationFrame做动画效果二
3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于 ...
随机推荐
- 如何彻底解决MySQL更改默认字符集以及字符乱码问题!!!
在我们使用MySQL数据库时,字符乱码,对我们来说是一个很头疼的问题.今天笔者就来教大家如何彻底解决更改默认字符集以及字符乱码问题. 当我们使用压缩包进行MySQL安装后,系统会使用默认的字符集,这时 ...
- C++的三大特性:封装、继承和多态性的详解
封装 所谓封装就是将某些东西包装盒隐藏起来,让外界无法直接使用,只能通过某些特定的方式才能访问.封装的目的是增强安全性和简化编程,使用者不必了解具体的实现细节,而只是通过外部接口以及特定的访问权限来使 ...
- WPF Uri
场景:自定义控件Generic.xaml样式引用资源字典Dictionary1.xaml. 方式:绝对路径. 方式1: <ResourceDictionary> <ResourceD ...
- Spring-cloud(四)服务发现与消费:ribbon的使用
说明: ribbon是spring-cloud中作为服务消费者的一种角色,客户端可以通过它来对服务提供者的服务进行消费, 比如本例中是服务提供者注册到注册中心,服务提供者提供了一个服务接口,返回一个h ...
- Spring MVC基础学习
SpringMVC是Spring框架的一个模块,无需通过中间层整合在一起.SpringMVC是一个基于MVC设计模式web框架,MVC-model-view-controller:MVC将服务器端分为 ...
- js数据结构之栈、队列(数据结构与拉火车游戏)
1.js实现队列的数据结构(先进先出) function Queue (array) { if(Object.prototype.toString.call(array)!="[object ...
- nginx 安装及简单配置(适用 小白)
一.nginxNginx是一个异步框架的 Web服务器,也可以用作反向代理,负载平衡器 和 HTTP缓存,Nginx可以部署在网络上使用FastCGI脚本.SCGI处理程序.WSGI应用服务器或Phu ...
- 【实验吧】CTF_Web_简单的SQL注入之2
直接输入11'报语法错误,然后输入1' and '1'='1 报SQLi detected!,说明有防护,输入1'and'1'='1回显ID: 1'and'1'='1 name: baloteli ...
- [HAOI 2006]旅行comf
Description 题库链接 给你一个 \(n\) 个点, \(m\) 条边的无向图.并给出一个点对 \((s,t)\) ,求 \(s,t\) 间的一条路径,使得路径上最大边和最小边的比值最小. ...
- POJ1743 Musical Theme(二分+后缀数组)
题目大概是给n个数组成的串,求是否有多个“相似”且不重叠的子串的长度大于等于5,两个子串相似当且仅当长度相等且每一位的数字差都相等. 这题是传说中楼教主男人八题之一,虽然已经是用后缀数组解决不可重叠最 ...