iOS动画学习

学习主题

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

  • 30个酷炫动画:

Animations in iOS: 30 beautiful examples

A guide to Motion Design principles

  • 问题:
  1. 转场和交互设计时,不知道使用什么形式的动画合适?

  2. 开发过程中,不知道使用哪种方案,实现具体的动画?

  3. 是否有新的交互方式可以探索,更方便用户的使用?

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

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

学习过程

动画:(Animation)

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

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 值,通过改变值,来控制强度、时间、变化效果等

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

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

使用场景:推镜,远景到近景的过程

使用合适的动画

动画框架

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

相关推荐
Swift社区19 小时前
使用 MetricKit 监控应用性能
ios·swiftui·swift
LawrenceMssss20 小时前
由于创建一个完整的App涉及到多个层面(如前端、后端、数据库等),并且每种语言通常有其特定的用途(如Java/Kotlin用于Android开发,Swift/Objective-C用于iOS开发,Py
android·java·ios
2501_915921431 天前
如何在苹果手机上面进行抓包?iOS代理抓包,数据流抓包
android·ios·智能手机·小程序·uni-app·iphone·webview
Boyang_1 天前
在 iOS 26 上@property 的一个小 bug
ios
七牛云行业应用1 天前
iOS 19.3 突发崩溃!Gemini 3 导致 JSON 解析失败的紧急修复
人工智能·ios·swift·json解析·大模型应用
初级代码游戏1 天前
iOS开发 SwiftUI 6 :List
ios·swiftui·swift
00后程序员张1 天前
iOS APP 性能测试工具,监控CPU,实时日志输出
android·ios·小程序·https·uni-app·iphone·webview
Digitally1 天前
如何在电脑上轻松使用 iPhone 作为 U 盘
ios·电脑·iphone
2501_915921431 天前
360移动端性能监控实践QDAS-APM(iOS篇)
android·macos·ios·小程序·uni-app·cocoa·iphone
TheNextByte11 天前
如何从进水损坏的 iPhone 中恢复数据?
ios·iphone