故事背景
“我们的产品需要来点动效”“好啊好啊”
设计稿产出后...
前端：“什么？这里为什么也要加动效？” 设计：“什么？这里为什么不能实现？”
%&￥#@%*&￥
既然你诚心诚意的发问了，那就大发慈悲的告诉你！
为了防止设计被破坏， 为了守护前端的尊严； 贯彻美与真实的鱼和熊掌不能兼得，可爱又迷人的交互设计师 @砥七 与 前端工程师 @照澄，决定联合写一系列动效设计合作指南~~ 就是这样，喵！
设计师是这么想的
首先，万事起源都会有一个触发点。那么动效的触发点是基于产品不断更新迭代而产生的高级需求。在产品设计中，UI动效设计使用户在使用产品时能够更加舒适、顺畅，在不经意之间还能给用户创造小惊喜，让用户感受到产品的温度和调性。
前期，设计师通过动效案例的归纳及分析，将动效所能呈现表达出的情绪程度划分为三个层次——舒适、愉悦及惊喜。本次主要在舒适层次上对产品体验进行优化。
那么舒适的体验感受是怎样的？
-
首先，动效应该是舒缓的，让用户感受到元件的亲切和可控。
-
其次，应该是符合理解认知的，让用户不会感到疑惑。
-
再次，应该是轻简的，让用户不会觉得杂乱或浮夸。
因此，在舒适层次的基础上，设定了以下动效设计目标：
-
流畅性：元素前后变化连贯且可感知
-
一致性：元素出入场变化一致
-
收敛性：元素变化简单有序
那么怎么体现动效给产品带来了舒适的体验呢，让我们来看一个小蜜场景里的实际栗子：
用户在与小蜜对话时，发出一句话后，会有一个简短的等待时间（技术OS：请求发出后等待响应的时间），然后获得小蜜回答的内容。
之前这段等待时间的处理方式是，首先是 “正在输入...”，然后等请求响应结果返回时再替换掉原来的提示文本。如下图：
在这个过程中，小蜜的加载气泡会突然出现，加载完毕后再突变成语聊气泡。动效需要解决的是气泡前后变化的连贯性，元素之间变化的有序性。
对应的动效处理：
-
新增加载动效
-
加载状态到语聊话术的变化
-
语聊气泡的伸展
最终动效设计如下图：
我们可以感知到的变化有：
- 加载状态转变为话术
-
圆点上下跳动，模拟正在输入的状态，跳动的幅度使用户对状态的感知更明显。
-
转变为话术时，圆点先渐变消失，话术再渐变出现。前后元素变化有顺序，可感知。
- 语聊气泡的伸展
-
气泡从原始状态横向伸展放大，气泡变化有延续性，感受更加顺畅。
这么前后对比，果然看起来舒服了不少呢。那工程师是怎么高度还原实现动效的呢？
前端工程师是这么实现的
准备工作
- 设计校验评估
-
设计是否有必要：是否能够帮助用户理解内容？是否会打断用户的操作行为？
-
动效是否能够带来体验提升：效率提升，情感反馈
-
动效开发成本是否合理：前端功能支持；浏览器 / 客户端兼容，详情查看下面技术检查部分；性能保证
- 合作流程约定
设计师采用 Principle 提供动效设计稿，关于 Principle 更多的了解可以戳这篇：Principle: 做动效，选对软件很重要（http://www.jianshu.com/p/48b871a681a0）
使用 Principle 的优点，同时也是对开发友好的地方有：
-
窗口实时预览
-
导出mov、gif
-
手动获取动画数值
简单来说是一款动效版的 Sketch，设计和前端合作起来的沟通成本就降低了很多。
- 面向技术的检查
虽说前端对动效的支持越来越好了，但是现实很骨感，浏览器更新换代也不是那么快的，所以兼容考虑和性能检测是做动效之前必备的准备工作。
-
兼容检测：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 ：从左侧中间展开气泡
- 编写动画
1. 加载动画的弹跳曲率，用了标准的线性曲率：animation-timing-function: linear
2. 动画次数为无限循环，使用了 animation-iteration-count: infinite
3. 三个圆点依次开始运动，运用到 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
总结
沟通机制
-
设计师需要将动效元素通过设计语言描述且提供详细参数的设计稿。
-
开发工程师需要依据动效检验标准来评估动效是否可实现，共同讨论动效可实现性以及实现方式。
相互理解
-
开发工程师需要理解设计的初衷与思路，更好地理解设计稿的设计意义，才会更有动力原汁原味地实现它。
-
对于设计师来说，理解开发的实现思路以及其实现的环境局限性更有助于动效设计的顺利落地。
即时反馈
-
方案调整：在实际开发过程中，调整动效方案可实现的内容。
-
沉淀总结：自省合作方式，完善沟通机制，提升评估效率。
本篇文章由 @砥七、@照澄 共同撰写，如有雷同，是你抄袭 ；）
