深入浅出！交互+前端共同撰写的动效设计合作指南

UI动效设计能让用户体验更加舒适顺畅，一直都非常受设计师欢迎。但是如何做出可交付能落地的动效，却成了很多人不得不面对的难题。本系列的动效设计合作指南由交互设计师+前端工程师撰写而成，帮你做出好用能用的动效设计。

故事背景

“我们的产品需要来点动效”
“好啊好啊”设计稿产出后...前端：“什么？这里为什么也要加动效？”
设计：“什么？这里为什么不能实现？”%&￥#@%*&￥既然你诚心诚意的发问了，那就大发慈悲的告诉你！

为了防止设计被破坏，为了守护前端的尊严；贯彻美与真实的鱼和熊掌不能兼得，可爱又迷人的交互设计师 @砥七与前端工程师 @照澄，决定联合写一系列动效设计合作指南~~ 就是这样，喵！

设计师是这么想的

首先，万事起源都会有一个触发点。那么动效的触发点是基于产品不断更新迭代而产生的高级需求。在产品设计中，UI动效设计使用户在使用产品时能够更加舒适、顺畅，在不经意之间还能给用户创造小惊喜，让用户感受到产品的温度和调性。

前期，设计师通过动效案例的归纳及分析，将动效所能呈现表达出的情绪程度划分为三个层次——舒适、愉悦及惊喜。本次主要在舒适层次上对产品体验进行优化。

那么舒适的体验感受是怎样的？

首先，动效应该是舒缓的，让用户感受到元件的亲切和可控。
其次，应该是符合理解认知的，让用户不会感到疑惑。
再次，应该是轻简的，让用户不会觉得杂乱或浮夸。

因此，在舒适层次的基础上，设定了以下动效设计目标：

流畅性：元素前后变化连贯且可感知。
一致性：元素出入场变化一致。
收敛性：元素变化简单有序。

那么怎么体现动效给产品带来了舒适的体验呢，让我们来看一个小蜜场景里的实际例子：

用户在与小蜜对话时，发出一句话后，会有一个简短的等待时间（技术OS：请求发出后等待响应的时间），然后获得小蜜回答的内容。

之前这段等待时间的处理方式是，首先是 “正在输入...”，然后等请求响应结果返回时再替换掉原来的提示文本。如下图：

深入浅出！交互+前端共同撰写的动效设计合作指南

在这个过程中，小蜜的加载气泡会突然出现，加载完毕后再突变成语聊气泡。动效需要解决的是气泡前后变化的连贯性，元素之间变化的有序性。

对应的动效处理：

新增加载动效
加载状态到语聊话术的变化
语聊气泡的伸展

最终动效设计如下图：

深入浅出！交互+前端共同撰写的动效设计合作指南

我们可以感知到的变化有：

- 加载状态转变为话术

圆点上下跳动，模拟正在输入的状态，跳动的幅度使用户对状态的感知更明显。
转变为话术时，圆点先渐变消失，话术再渐变出现。前后元素变化有顺序，可感知。

- 语聊气泡的伸展

气泡从原始状态横向伸展放大，气泡变化有延续性，感受更加顺畅。

这么前后对比，果然看起来舒服了不少呢。那工程师是怎么高度还原实现动效的呢？

前端工程师是这么实现的：

准备工作

1. 设计校验评估

设计是否有必要：是否能够帮助用户理解内容？是否会打断用户的操作行为？
动效是否能够带来体验提升：效率提升，情感反馈
动效开发成本是否合理：前端功能支持；浏览器 / 客户端兼容，详情查看下面技术检查部分；性能保证

2. 合作流程约定

设计师采用 Principle 提供动效设计稿，关于 Principle 更多的了解可以戳这篇：Principle: 做动效，选对软件很重要（http://www.jianshu.com/p/48b871a681a0）

使用 Principle 的优点，同时也是对开发友好的地方有：

窗口实时预览
导出mov、gif
手动获取动画数值

简单来说是一款动效版的 Sketch，设计和前端合作起来的沟通成本就降低了很多。

3. 面向技术的检查

虽说前端对动效的支持越来越好了，但是现实很骨感，浏览器更新换代也不是那么快的，所以兼容考虑和性能检测是做动效之前必备的准备工作。

兼容检测：caniuse 可以查看浏览器支持使用 CSS Animation 或 CSS Transition 的情况。
性能检测：csstriggers 可以了解当前使用的哪些动画属性不会造成浏览器重绘导致页面卡顿。

实现过程

以小蜜语聊气泡为例，我们来说一说前端是怎样将设计稿落地成代码展现的~

绘制静止态

深入浅出！交互+前端共同撰写的动效设计合作指南

将静态气泡先用 HTML+CSS 绘制出来，代码如下：

<div class="chat-bubble">
 <div class="card-loading"> 
 <span class="card-loading-circle"></span> 
 <span class="card-loading-circle"></span> 
 <span class="card-loading-circle"></span> 
 </div>
</div>

.chat-bubble {
 display: inline-block;
 max-width: 300px;
 padding: 8px 15px;
 margin: 15px 10px 5px;
 line-height: 30px;
 min-height: 30px;
 min-width: 40px;
 background-color: #FFF;
 border-radius: 20px 20px 20px 4px;
 overflow: hidden;
}
.card-loading {
 width: 100%;
 height: 100%;
 margin: 0 auto;
}
.card-loading-circle {
 display: inline-block;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 margin: 0 1px;
 background-color: #E1E4E6;
}

形变拆解

1. 加载提示语变成动画，且三个圆点有节奏的弹跳，弹到最下时，会变扁一些，如下图：

深入浅出！交互+前端共同撰写的动效设计合作指南

位移 transform: translateY 处理圆点从上到下的位置变化
旋转 transform: rotateX 处理圆点在落到最下方时，变扁的变化

2. 语聊内容出现时，语聊有从无到有的透明度变化

透明度 opacity：气泡本身的透明度变化
字体颜色 color: rgba(...)：修改字体透明度变化
坐标原点 transform-origin: left center ：从左侧中间展开气泡

编写动画

加载动画的弹跳曲率，用了标准的线性曲率：animation-timing-function: linear
动画次数为无限循环，使用了 animation-iteration-count: infinite
三个圆点依次开始运动，运用到 animation-delay: ${waitTime}s

拼装组合

1. 加载动效圆点动画（SCSS）

@keyframes bubbleLoadingAni {
 0% {
 transform: translateY(0) rotateX(0);
 }
 25% {
 transform: translateY(130%) rotateX(40deg);
 }
 50% {
 transform: translateY(0) rotateX(0);
 }
 75% {
 transform: translateY(-130%);
 }
 100% {
 transform: translateY(0);
 }
}

@mixin loadingItem($num) {
 $waitTime: (-1 + $num) * 0.25;
 animation-delay: #{$waitTime}s;
}

@for $i from 1 to 50 {
 .card-loading-circle:nth-child(#{$i}) {
 @include loadingItem($i);
 }
}

2. 气泡从左到右展开

@keyframes bubble-up-from-left {
 0% {
 opacity: 0;
 color: rgba(0, 0, 0, 0);
 }
 100% {
 opacity: 1;
 color: rgba(0, 0, 0, 1);
 }
}

.bubble-up-from-left {
 transform-origin: 0 50%;
 animation: bubble-up-from-left 260ms cubic-bezier(.42, 0, 1, 1) both;
}

最终的 Demo 效果可以通过 CodePen 查看：https://codepen.io/zchen9/pen/evLaML