翻译自: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做动画的更多相关文章

  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. Python求解啤酒问题(携程2016笔试题)

    问题描述:一位酒商共有5桶葡萄酒和1桶啤酒,6个桶的容量分别为30升.32升.36升.38升.40升和62升,并且只卖整桶酒,不零卖.第一位顾客买走了2整桶葡萄酒,第二位顾客买走的葡萄酒是第一位顾客的 ...

  2. How to preview html file in our browser at sublime text?

    sublime preview html.md open In Browser what should we do if we want to preview html file in our bro ...

  3. Python网络爬虫笔记(五):下载、分析京东P20销售数据

    (一)  分析网页 下载下面这个链接的销售数据 https://item.jd.com/6733026.html#comment 1.      翻页的时候,谷歌F12的Network页签可以看到下面 ...

  4. python 装饰器统计某个函数的运行时间

    import datetime def count_time(func): def int_time(*args, **kwargs): start_time = datetime.datetime. ...

  5. vim 批量注释和批量取消注释

    批量注释 按ctrl+v进入可视块模式, 上下移动选中需要注释的行, 按I, 输入注释符号#, 按两下Esc, 保存   批量取消注释 按ctrl+v进入可视块模式, 上下移动选中需要取消注释的行, ...

  6. [SPOJ 4155]OTOCI

    Description 题库链接 给你 \(n\) 个节点,让你兹磁以下操作,维护一棵树: 动态加边: 修改点权: 询问路径上点权和. \(1\leq n\leq 30000\) Solution 好 ...

  7. [HAOI 2011]向量

    Description 题库链接 给你一对数 \(a,b\) ,你可以任意使用 \((a,b), (a,-b), (-a,b), (-a,-b), (b,a), (b,-a), (-b,a), (-b ...

  8. [HNOI 2017]礼物

    Description 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手 环,一个留给自己,一个送给她.每个手环上各有 n 个装饰物,并且每个装饰物都有一定的亮度.但是在 ...

  9. [SCOI2009]生日快乐

    Description windy的生日到了,为了庆祝生日,他的朋友们帮他买了一个边长分别为 X 和 Y 的矩形蛋糕.现在包括windy ,一共有 N 个人来分这块大蛋糕,要求每个人必须获得相同面积的 ...

  10. hdu5630 BestCoder Round #73 (div.2)

    Rikka with Chess  Accepts: 393  Submissions: 548  Time Limit: 2000/1000 MS (Java/Others)  Memory Lim ...