学习主题

动画的作用：解释状态改变的过程、吸引注意力、元素之间的可变关系、也可以增强一些产品的趣味性。在使用App时，合适的交互动画组合运用，能带来连续流畅、自然友好的使用体验。

问题：

转场和交互设计时，不知道使用什么形式的动画合适？
开发过程中，不知道使用哪种方案，实现具体的动画？
是否有新的交互方式可以探索，更方便用户的使用？

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

目标

总结和学习优秀的动画案例、设计原则或规范，带来更多的设计灵感，更好的创作；同时在开发实现中，能快速定位动画的具体的实现方式

理论知识

1. 动画：（Animation）

灵感来源于自然世界，重力、撞击效果等等

30个酷炫动画：

Animations in iOS: 30 beautiful examples

2. UX

2.1 UX提到的概念

实时交互和非实时交互（跟手和Tap）
促进易用性支持的四种方式
- Expectation 可预知预期一致性
- Continuity 持续性连贯局部的一致可以带来整体的一致
- Narrative 叙事性线性阐述从何而来，去往何处的贯穿始终的体验
- Relationship 关联性，从时间、空间、层级多个方面考虑对象间的关系，帮助用户理解产生的结果

2.1 UX思考的四要素

Principles 场景规范
Techniques, Motion实现的可行性、可组合使用
Properties, Animatable，可动画属性，包括但不限于： position, opacity, scale, rotation, anchor point, color, stroke-width, shape, etc.
Values 值，通过改变值，来控制强度、时间、变化效果等

3. Motion

The 12 Principles of UX in Motion

A guide to Motion Design principles

关键词： 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 联动和协调，适合实时交互过程中的场景

Slider滑块提示更多信息

Principle 4: Transformation

使用场景：Throughout 贯穿始终的叙事需要，告知不同状态的改变

Principle 5: Value change

使用场景：实时交互产生变动的value 和非实时交互的切换和滚动展示

Principle 6: Masking & Obscuration

使用场景：告知那些元素是不变的，那些是被隐藏的

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

这里有个.gif

Principle 7: Overlay

使用场景：平面空间展示隐藏更多的操作

Principle 8: Cloning

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

Principle 9: Parallax

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

Principle 10: Dolly & Zoom

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

4. 使用合适的动画

动画使用规范

动画框架

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）