(译)快速指南:用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, 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 上分享我的经验!

时间: 2024-10-03 18:01:36

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

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

Emacs 快速指南 -折叠目录 1. 小结(SUMMARY) 2. 基本的光标控制(BASIC CURSOR CONTROL) 3. 如果 EMACS 失去响应(IF EMACS STOPS RESPONDING) 4. 被禁用的命令(DISABLED COMMANDS) 5. 窗格(WINDOWS) 6. 插入与删除(INSERTING AND DELETING) 7. 撤销(UNDO) 8. 文件(FILE) 9. 缓冲区(BUFFER) 10. 命令集扩展(EXTENDING THE C

Emacs 快速指南(中文翻译)

Emacs 快速指南 目录 1. 小结(SUMMARY) 2. 基本的光标控制(BASIC CURSOR CONTROL) 3. 如果 EMACS 失去响应(IF EMACS STOPS RESPONDING) 4. 被禁用的命令(DISABLED COMMANDS) 5. 窗格(WINDOWS) 6. 插入与删除(INSERTING AND DELETING) 7. 撤销(UNDO) 8. 文件(FILE) 9. 缓冲区(BUFFER) 10. 命令集扩展(EXTENDING THE COMM

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

在iOS开发中,我们经常需要给视图添加阴影效果,最简单的方法就是通过设置CALayer的shadowColor.shadowOpacity.shadowOffset和shadowRadius这几个属性可以很方便的为 UIView 添加阴影效果.但是如果单用这几个属性会导致离屏渲染(Offscreen Rendering),而且CoreAnimation在每一帧绘制阴影的时候都需要递归遍历所有sublayer的alpha通道从而精确的计算出阴影的轮廓,这是非常消耗性能的,从而导致了动画的卡顿. 为

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

英文原文:From C++ to Objective-C: A quick guide for practical programmers 标签: Objective-C C/C++ 233人收藏此文章, 我要收藏oschina 推荐于 2年前 (共 11 段, 翻译完成于 05-13) (29评) 参与翻译(4人): leoxu, 无若, nbafifa02, 地狱星星 仅中文 | 中英文对照 | 仅英文 | 打印此文章 简介 当我开始为iOS写代码的时候,我意识到,作为一个C++开发者,我必

Shell 快速指南

目录 Shell 快速指南??概述????什么是 shell????什么是 shell 脚本????Shell 环境??????指定脚本解释器????模式??????交互模式??????非交互模式??Shell 编程????解释器????注释????变量??????局部变量??????环境变量??????位置参数????Shell扩展??????大括号扩展??????命令置换??????算数扩展??????单引号和双引号????数组??????创建数组??????获取数组元素??????获取数组

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

[SFA官方翻译]使用 Kubernetes.Spring Boot 2.0 和 Docker 的微服务快速指南 原创: Darren Luo SpringForAll社区 今天 原文链接:https://dzone.com/articles/quick-guide-to-microservices-with-kubernetes-sprin 作者:Piotr Mińkowski 译者:Darren Luo 在本教程中你将学习如何使用 Kubernetes 和 Docker 快速启动并运行 Sp

Haproxy 快速指南

Haproxy 快速指南快速开始配置 haproxy安装 haproxy yum -y install haproxy 配置 haproxy vi /etc/haproxy/haproxy.cfg global log 127.0.0.1 local0 chroot /var/lib/haproxy pidfile /var/run/haproxy.pid maxconn 10000 user haproxy group haproxy daemon ulimit-n 100000 stats

沿着贝塞尔曲线做动画

效果图如下: 源码: // // RootViewController.m // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "RootViewController.h" #import "YXGCD.h" @interface RootViewController () @property (nonatomic, strong) GCDTimer *timer; @end @impleme

transition和animation做动画(css动画二)

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以改变元素的形状或位置,做出2d或3d效果: transition:过渡,转变:使css属性值在一段时间内平滑的变化,需要有触发条件(如hover等),是animation的简化版: animation:动画:可以设置多帧效果,然后把它们组合变换,按动画效果展示出来: 1. transition 过渡