Technical Summary of H5 Animation Techniques for NetEase LOFTER

This article is a technical summary of a recent H5 animation activity developed by NetEase LOFTER, aiming to share common front‑end animation solutions, their principles, usage scenarios, and optimization techniques for H5 activities.

Animation Implementation Comparison

Horizontal Motion Animation

Pure CSS implementation

Sample code:

.animate .p3_d {
  animation: p3D 1s ease-in 0.1s forwards;
}

@keyframes p3D {
  0% { transform: translate3d(24rem, 0, 0); }
  90% { transform: translate3d(7.2rem, 0, 0); }
  100% { transform: translate3d(8.2rem, 0, 0); }
}

The effect is relatively rigid because it relies on fixed keyframes and a simple ease‑in timing function; a custom Bézier curve would provide smoother transitions.

Using dynamics.js

Dynamics.js offers physics‑based animation:

const p30 = document.querySelector('.p3_0');

dynamics.animate(p30, { translateX: '1.7rem' }, {
  type: dynamics.spring,
  frequency: 40,
  friction: 200,
  duration: 1000,
  delay: 0.2
});

The library is easy to use but its source is written in CoffeeScript, which may be hard to modify.

Random Motion Animation

Method 1: Pure CSS (non‑random) – a reference example that uses many keyframes to achieve smooth motion.

Method 2: JavaScript random motion

Generate a random direction and apply it to X/Y axes:

function randomDirection(velocity) {
  const isEven = Math.floor(Math.random() * 10) % 2;
  return isEven == 0 ? velocity : -velocity;
}

const velocityX = randomDirection(0.2);
const velocityY = randomDirection(0.2);

Define a random maximum range:

function randomMax(num) {
  return num - Math.floor(Math.random() * num);
}

randomMax(25);

When the object reaches the boundary, reverse its direction and recalculate the range, creating a more dynamic motion.

Implementation options

Direct DOM manipulation (may cause performance issues on low‑end Android devices).

Canvas drawing (better performance, but higher learning cost).

Frame Animation

Using sprite sheets with drawImage to display sequential frames:

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Lottie Animation

Lottie‑web can render AE‑exported JSON animations with minimal code:

lottie.loadAnimation({
  renderer: 'svg',
  loop: false,
  autoplay: false,
  container: document.querySelector('.p6_a'),
  name: 'p6a',
  animationData: p6aJson
});

It supports translation, scaling, rotation, fade, and SVG animations, but complex interactive effects may be limited.

Video Animation

Background videos can replace hard‑to‑implement effects; they are visually striking but lack interactivity and require careful pre‑loading.

APNG / WebP Animation

APNG offers transparency while WebP provides smaller file size; both have compatibility considerations on Android and iOS.

Mobile Page Adaptation

Although a rem layout is used, special cases (e.g., iPhone 5) need additional adaptation. Media queries can target specific devices, but a flexible solution is preferred.

Flexbox adaptation

Key flex properties:

flex‑grow : growth factor when space is available.

flex‑shrink : shrink factor when space is insufficient.

flex‑basis : initial main‑axis size before free space distribution.

Sample flex layout:

// Page uses flex layout with vertical main axis
.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

// Area 1
.div1 { flex-basis: 0.95rem; flex-shrink: 1; }

// Content area (question display)
.content { flex-shrink: 0; flex-grow: 1; flex-basis: 13.36rem; }

/* other elements follow similar pattern */

Flexbox combined with autoprefixer yields good cross‑browser compatibility.

Video Pre‑loading

Two common approaches:

Pre‑load on the previous page : Insert the next page’s video tag with preload="auto" during the current page’s load (requires fixed navigation order).

Request video data as a Blob using axios and create a blob URL for the video element.

axios({
  method: 'get',
  url: 'video url',
  responseType: 'blob'
}).then(res => {
  const blobUrl = URL.createObjectURL(res);
  // create video element and set src = blobUrl
});

Listen to the canplaythrough event or use video.load() to ensure reliable playback across browsers, especially on iOS WeChat and certain Android devices.

Conclusion

For simple effects, pure CSS is the quickest solution; for more complex or designer‑driven animations, lottie‑web offers high fidelity with minimal development effort. JavaScript‑based animations provide flexibility for random motion and physics simulations, while canvas delivers superior performance for many elements. Frame animation, video, and APNG/WebP each have niche use cases, and the choice should consider performance, interactivity, and compatibility.

For responsive design, flexbox with autoprefixer is recommended over device‑specific media queries, as it scales gracefully across the diverse mobile landscape.