原视频：https://www.youtube.com/watch?v=laPsceJ4tTY&t=1s

什么是移动端优先的动画

受原生应用的设计范式启发，尤其是对手势的使用。
在移动设备上开发，并且有意地设计为在移动浏览器环境中工作，而非桌面端。
即使在配置较低的设备上也有很好的性能。

一些设计范式

水平滑动

我们只使用 CSS 就可以应用它。

.tab-panels-container {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
  width: 100vw;
  display: flex;
}

.tab-panel {
  scroll-snap-align: start;
  /* only supported in Chrome */
  scroll-snap-stop: always;
}

滑动消失

一个使用 React-Spring 和 React-Use-Gesture 实现的例子。

有关触摸动画的深刻见解

让我们来学习一下移动端基础的触摸动画，来看看有哪些深刻的见解可以被我们采用。

立即响应

如果你引入了一些延迟，将会极大地破坏用户体验。会产生额外的心智负担，让用户感觉他们的行为与动画有很强的割裂感。

滚动衰减

衰减函数不是像弹簧一样提前确定端点，而是简单地逐渐降低速度，直到达到 0。
iOS 有两个默认的衰减率：『快』（0.99）和『默认』（0.998）。

// 从苹果『Designing Fluid Interfaces』演讲中获得
const projection = startVelocity => (startVelocity * 0.998) / (1 - 0.998)

// 使用示例
const velocityY = 1.2 // in px/ms
const projectedEndPoint = projection(velocityY) // 679px

回弹动画（Rubberbanding）

const clamp = (min, max, val) => Math.max(Math.min(val, max), min)

const rubberBand = (distance, dimension, constant = 0.55) =>
    (distance * dimension * constant) /
    (dimension * constant * distance)

const rubberBandClamp = (min, max, delta, constant) => delta < min
    ？ -rubberBand(min - delta, max - min, constant) + min
    : delta > max
        ? rubberBand(delta - max, max - min, constant) + max
        : delta

触摸取消

event.preventDefault()？

touch-action

touch-action: all;

浏览器处理所有的手势（默认）。

touch-action: none;

禁止元素在浏览器中的所有手势处理。

touch-action: pan-x;

禁止浏览器中的垂直、y 轴手势。

touch-action: pan-y;

禁止浏览器中的水平、x 轴手势。

移动端浏览器概要

利用迟滞来确保用户不会无意中触发动画。
使用 touch-action CSS 属性禁止浏览器的默认表现。
注意移动浏览器有很多不同之处，既有默认的手势表现，也有对 touch-action 等属性的支持。

性能

只使用 transform 和 opacity

限制自己仅使用这两个能够使用 GPU 进行加速的 CSS 属性，可以在移动设备上获得每秒 60 帧的最佳效果。

简化：更简单的动画意味着更好的性能

让动画开始时间保持在 100ms 以下

“在此时间内响应用户操作，用户会觉得效果是及时的。再过一段时间，用户行为和交互反应之间的联系就会断开。”

如何诊断

使用 Chrome 开发者工具，执行性能分析。
使用 React 开发这工具，发现没有必要的 React 组件调度。

总结

请直接在移动设备上开发——如果你关注性能，最好使用一个性能差一点的手机。
从简单的设计模式开始，从移动端原生应用的设计模式中汲取灵感。
当添加一个触摸动画，考虑使用迟滞和触摸取消技术。

SyMind / learning

渐进式 Web 动画 #31