Material Design——Animation

Material Design动画效果概述

概述
  • Android 5.0开始引入Material Design。
  • Material Design是一种设计语言,更是一种规范、风格、原则和理念拟物和扁平设计的结合。
  • Material Design里的物体要体现三维大小(x、y、z轴)、材质(光泽)、轻重(加速减速运动)和弹性。
要求
  • 动画在保留物体的物理特性时,要不失优雅、简约和美丽(安卓提供的例子中有体现)。
  • 动画要有利于集中注意力(让用户知道要实现哪些功能,并且不能乱做动画),并保持连续性(动画功能上不能停顿,用户的注意力是有限的)。
  • 用户反馈要微妙而清晰(用户点到哪个按钮按钮要有悬浮之类的),过度动画要高效而连贯。
  • 动画不止增加美丽效果,更要有建立空间关系、功能指示和系统意向的功能。

Material Design动画效果轨迹

一、优雅、简约、美观和神奇的无缝的用户体验
  • 需要

迅速的加速和平滑的减速会感到自然和愉快。

  • 不需要

线性动作会感到机械,在结束和开始的时候生硬的速度变化意味着物体突然开始运动或停止,这是不贴合现实的。

二、进入和退出的场景

当一个物体进入这个场景时,请确保它在最高速度下移动,这个行为模拟了自然移动。一个物体退出这个场景时,需要维持它的速度,缓慢的离开场景,逐渐的进入和缓慢的离开会把用户的注意力吸引到这个动作上,在大多数情况下,这是你希望的效果。

  • 需要

小球在最大的速度下进入和退出场景,创造了一个确信的过渡效果。

  • 不需要

快速进入和缓慢离开,不要让用户因速度变化转移注意力

Material Design动画

  • Touch feedback(触摸反馈)
  • Reveal effect(揭露效果)
  • Activity transitions(Activity转换效果)
  • Curved motion(曲线运动)
  • View state changes (视图状态改变)
  • Animate Vector Drawables(可绘矢量动画)
动画详解
  • Touch feedback(触摸反馈)

最具代表性的就是波纹动画,比如当点击按钮时会从点击的位置产生类似于波纹的扩散效果。

  • Reveal effect(揭露效果)

就是为了当你在显示或者隐藏一个view的时候为用户提供一个视觉上连续性的动画效果。

  • Activity transitions(Activity转换效果)

Activity Transition是Material Design中提供的一种动画效果。它通过运动和切换不同状态之间的元素来产生各种动画效果。

  • 每一个转场应该包含以下三类元素:
  • 新入元素(Incoming elements): 完全新的元素需要有新手引导,从已有场景中转变而来的元素需要重新被识别
  • 淡出元素(Outgoing elements):与当前场景不相关的元素应当以恰当的方式被移除
  • 通用元素(Shared elements):指那些从转场开始到结束都没有发生变化的元素。可以是细微至单个图标,也可以是显著到占据屏幕的图片展示