在 React 中构建移动端优先的 web 动画

移动端优先动画是指在移动设备上开发的, 旨在在移动浏览器而非桌面浏览器的上下文中工作的动画。它有着类似原生 App 的交互体验, 尤其是体贴的手势交互, 同时即使在中低档设备上其也具有不错的流畅体验。

Types of gestures

  • Navigational gestures
    • Tap
    • Scroll and pan
    • Drag
    • Swipe
    • Pinch
  • Action gestures
    • Tap
    • Long press
    • Swipe
  • Transform gestures
    • Double tap
    • Pinch
    • Compound gestures

Types of gestures

难点罗列

  • scroll、swipe-to-refresh 会受到浏览器默认行为干扰;
  • 触摸反应迟钝, 没有直接操作的感觉;
  • 反物理直觉;
  • 兼容中、低设备;

框架方案

The way to take is usually an animation library with a gesture hooks.

Some Principles

  • Immediate Response: If not response immediately, it feels super disconnected. demo
    • Carousel 组件, 目前 Tab 的滑动存在缺陷;
  • Scroll Decay: The concepts of scroll decay can help us decide how our UIs should respect to users interaction. demo
    • -webkit-overflow-scrolling: touch;(only used in ios > 5, but not success)
    • Picker/DatePicker 组件;
  • Rubberbanding
    • PopOver 组件;

Touch cancellation

  • Use the touch-action CSS property to disable default browser behaviors with precision.

use touch-action before:

use touch-action after:

Passive event listeners

If you decide not to cancel the scroll, you can set the passive in the addEventListener. If that, it can enable the browsers to scroll the page immediately.

Scroll

Problem 1: scroll chaining

When the user reachs a 'scroll boundary', the content behind the drawer or modal starts scrolling!

  • overscroll-behavior
    • auto: default;
    • contain: prevent scroll chaining, keep the overflow effects within the node self;
    • none: prevent scroll chaining, prevent overflow effects within the node self.

Overscroll behavior: read Introducing overscroll-behavior

resource links

Spring Animations

Springs & Gestures

Touch on the web