学习主题

动画的作用：解说状况改动的过程、招引注意力、元素之间的可变联系、也能够增强一些产品的趣味性。在运用App时，适宜的交互动画组合运用，能带来接连流通、天然友爱的运用体会。

  • 30个酷炫动画：

Animations in iOS: 30 beautiful examples

A guide to Motion Design principles

  • 问题：

  1. 转场和交互规划时，不知道运用什么方法的动画适宜？

  2. 开发过程中，不知道运用哪种方案，完结详细的动画？

  3. 是否有新的交互方法能够探究，更便利用户的运用？

从动画、触感和更多交互探究 三个方面探究学习，

总结和学习优异的动画事例、规划原则或标准，带来更多的规划创意，更好的创造；一同在开发完结中，能快速定位动画的详细的完结方法

学习过程

  1. 动画：（Animation）

创意来源于天然世界，重力、碰击作用等等

  1. UX 提到的概念

  1. 实时交互和非实时交互（跟手和Tap）
  2. 促进易用性支持的四种方法
  • Expectation 可预知 预期一致性
  • Continuity 持续性 连贯 部分的一致能够带来整体的一致
  • Narrative 叙事性 线性阐述从何而来，去往何处的 贯穿一直的体会
  • Relationship 关联性， 从时刻、空间、层级多个方面考虑对象间的联系，协助用户了解发生的成果

UX思考的四要素

  • Principles 场景标准
  • Techniques, Motion完结的可行性、可组合运用
  • Properties, Animatable，可动画特点，包括但不限于： position, opacity, scale, rotation, anchor point, color, stroke-width, shape, etc.
  • Values 值，经过改动值，来控制强度、时刻、改动作用等

  1. Motion

The 12 Principles of UX in Motion

关键词： Usability 易用 Coordinate 和谐

Motion的分类

Timing 时刻相关

Spatial 空间相关

Motion 1: Easing

easing gradient 缓和梯度，快速切换速度能给人 带来必定的运用流通的体会

All of these easing times have their own expectation response they trigger in users.

To summarize: when to use easing? Always.

Motion 2: Offset & Delay

介绍新的元素和场景

上边的两栏是一致的（可能是文字和图片），而最终一栏delay推迟进场（可能是按钮），区分元素是不同的。

Motion 3: Parenting

运用场景：Relationship 联动和和谐，合适实时交互过程中的场景

iOS动画学习

Slider滑块 提示更多信息

Principle 4: Transformation

运用场景：Throughout 贯穿一直的叙事需求，奉告不同状况的改动

iOS动画学习

Principle 5: Value change

运用场景：实时交互发生变化的value 和非实时交互的切换和滚动展现

iOS动画学习

Principle 6: Masking & Obscuration

运用场景：奉告那些元素是不变的，那些是被躲藏的

iOS动画学习

运用场景：增强视觉深度，突出单个特别元素

这里有个.gif

Principle 7: Overlay

运用场景：平面空间展现躲藏更多的操作

iOS动画学习

Principle 8: Cloning

运用场景：“复制”衍生出来新的元素，运用Masking、Cloning和Dimensionality能够增强叙事主线

iOS动画学习

Principle 9: Parallax

运用场景：不同元素之间移动不同的改动，时刻上是同步的 quicker-closer slower-further

iOS动画学习

Principle 10: Dolly & Zoom

运用场景：推镜，远景到近景的过程

iOS动画学习

  1. 运用适宜的动画

动画结构

iOS图形结构

iOS图形处理概论:OpenGL ES，Metal，Core Graphics，Core Image，GPUImage，OpenCV等 –

Core Animation

iOS 动画总结

Lotti动画：可代替关键帧动画

Hero动画: 可代替转场动画

物理仿真作用：

运用涉及到的几个类：

UIDynamicAnimator 相当于动画引擎。它初始化时，需求一个ReferenceView，用它的坐标体系作为参阅坐标系。

UIDynamicBehavior 相当于仿真动画体。创建时，需求附带动画即将作用的视图（即UIDynamicItem）,能够传一个包含多个视图的数组。

UIDynamicItem 就是仿真动画即将作用的视图。

常用的UIDynamicBehavior仿真行为：

UIGravityBehavior 重力行为

UICollisionBehavior 磕碰行为

UIAttachmentBehavior 附着行为 （列表吸附作用）

UIPushBehavior 推动行为

UIDynamicItemBehavior 动力行为

UISnapBehavior 捕获行为

弹力吸附作用：

WWDC 2013 Session笔记 – iOS7中绷簧式列表的制作

交互事例

  • 点按交互

这里有个.video

探究测验：点按展现细节、检查额定信息，滑块Slider

  • 状况切换

标明这里是否，有波纹可展现，播映状况转换

这里有个.video

标明是否，可运用全部

这里有个.video

  • 双指操作

5度启动旋角、多维度值吸附、边界吸附

  • 裁剪操作

旋转、裁切自适应

  • Tab Bar交互：

Animations in iOS: Tab Bar concepts

  • Loading交互：

Everything you need to know about Loading Animations

  • 动画细节优化

iPhone13 Pro 和 iPad Pro等高端机，添加了屏幕刷新率

参阅： Optimizing ProMotion Refresh Rates for iPhone 13 Pro and iPad Pro | Apple Developer Documentation

触感体会：（Haptics）

前提条件：开启体系的Sounds&Haptics中的System Haptics选项

[Haptics.mov]

运用方法：

UIImpactFeedbackGenerator：轻触/吸附触感，可进行强度控制，如：运用吸附、选中新增时

UINotificationFeedbackGenerator：较耗时任务结束后的反应，如：处理操作完结成功、失败时的提示

UISelectionFeedbackGenerator：选中值变化的场景，如：滑动切换标尺、滑动表盘时

运用说明：

防止过度运用触觉： 有时，偶尔体会触觉会感觉恰到好处，但当频频体会时会变得令人厌烦。（频频滤镜选择时）

触觉可选： 假如他们愿意，能够让人们关闭或静音触觉，并保证人们在没有它们的情况下仍然能够享用您的运用程序。（UIFeedbackGenerator+lowBatteryState）

明智地运用，发生别致感： 例如，在提供耐久价值时运用触觉；运用它们来添加别致感会让你的运用程序感觉很花哨。此外，更喜欢将触觉添加到少数重要的、相应的交互中。为很多琐碎的交互播映触觉可能会让人们不知所措。

一直如一地运用，特定运用场景： 触觉反应的一致性有助于人们在某些触觉形式和某些体会之间树立触觉关联。例如，如运用中未能完结任务时播映特定的触觉形式，人们就会学会将该形式与负面成果联系起来。假如完结时运用相同的触觉形式，来表示积极的成果，人们会感到困惑。（相册选中和撤销）

在每个触觉及其触发器之间树立清晰的因果联系： 抱负情况下，人们总是知道为什么您的运用会播映触觉形式。假如触觉不能加强因果联系，它可能会令人困惑并且看起来是平白无故的。

请必须在运用程序中充沛测验： 不同的人对触觉有不同的偏好和敏感程度，因而您需求与尽可能多的人一同测验触觉。

新交互的可能性（User Interaction）

Spatial Interactions（空间交互）

U1芯片玩家

[Spatial.mov]

脑洞主意：两个都在用editor的Vidmaer，操作互享？

创意收集

Dribbble上的UX、UE大神：

Dannniel

Nathan Riley

学习推荐

适宜的动画

动画细节

The ultimate guide to proper use of animation in UX

平台推荐

Medium 和 Dribbble

Medium 规划&技术分享文章和用例Case （国版的简书）

Dribbble 视觉体会和创意收集

动画库

Hero动画库 GitHub、运用引导

Lotti动画

10个让你相见恨晚的iOS Swift动画结构! –

总结：随着技术的开展、加上不断涌现出来的优异事例，也带来很大的学习空间，收集更多的创意。

希望在后边能更好的完善和丰富这个文档

希望经过组合运用，不断强化用户的运用认识

常用动画库

github.com/zf-lab/Awes…

参阅

Haptics – User Interaction – iOS – Human Interface Guidelines – Apple Developer

Animation and Haptics

UIFeedbackGenerator

Trending Animation Designs on Dribbble

The ultimate guide to proper use of animation in UX