Implementing Smooth Paper‑Plane Animations with CSS3, Canvas and Bezier Curves in a Mini‑Program

Author : Jiang Tai, a front‑end architecture engineer with over 14 years of development experience.

Requirement source : JD second‑hand team built a mini‑program called “Nearby has idle”. When a user publishes a purchase request named “Paper Plane”, a paper‑plane animation should appear.

Animation design requirements :

Smooth movement of the paper plane.

Multiple flight paths to satisfy design.

1. Position vs. Transform

Using left/top changes layout and triggers repaint, while transform: translate leverages GPU acceleration for much smoother rendering.

2. Basic CSS3 animation

@keyframes move {
  from { transform: translateX(0px); }
  to   { transform: translateX(1000px); }
}
#plane { animation: move 10s linear; width: 100px; height: 500px; }

This moves the plane straight from 0 px to 1000 px in 10 seconds.

To add a diagonal trajectory, extend the keyframes with translateY :

@keyframes move {
  from { transform: translate(0px, 0px); }
  to   { transform: translate(1000px, 500px); }
}

3. Composite motion

By nesting two div s ( #plane and #entity ) we can animate vertical falling with easing:

#entity {
  animation: falling 10s ease-in;
  width: 50px; height: 50px;
}
@keyframes falling {
  from { transform: translateY(0px); }
  to   { transform: translateY(500px); }
}

Changing the animation to animation: falling 5s ease-in-out alternate 2; makes it bounce twice.

4. Canvas implementation

A reusable Game class (named game.class.js ) abstracts the canvas logic for the mini‑program:

var context = wx.createCanvasContext('aeroplane', this); // create canvas
var game = new Game.main(context); // instantiate game
game.setPlane(plane); // set plane data
game.launch(bezier); // start animation with Bézier data

The plane data object contains the image URL and dimensions:

plane: {
  url: '/static/images/3.png',
  width: 80,
  height: 77.6
}

5. Bézier curve data

Quadratic Bézier (three points) and cubic Bézier (four points) are stored as arrays of point objects:

cube: [
  { x: -20, y: 600, z: 1 },
  { x: 200, y: 500, z: 1 },
  { x: 250, y: 300, z: 1 },
  { x: 300, y: 50,  z: 1 }
]

square: [
  { x: 0,   y: 200, z: 1 },
  { x: 100, y: 0,   z: 1 }
]

These points are fed to the Game class, which interpolates the position using the Bézier formula.

6. Function parsing (calculating a point on a cubic Bézier)

Given control points p0, p1, p2, p3 and a parameter t ∈ [0,1] , the position is computed as:

x = (1‑t)^3 * p0.x + 3*(1‑t)^2*t * p1.x + 3*(1‑t)*t^2 * p2.x + t^3 * p3.x;
y = (1‑t)^3 * p0.y + 3*(1‑t)^2*t * p1.y + 3*(1‑t)*t^2 * p2.y + t^3 * p3.y;

Sample calculations for t = 0.1 and t = 0.5 are shown in the original source.

7. Rotation using inverse trigonometric function

To keep the plane oriented along the tangent of the curve, compute the angle with Math.atan2 :

let r = Math.atan2(p.y - yt, p.x - xt);
_context.rotate(r);

Using atan2 ensures the full 360° range.

Conclusion

By defining the desired flight path with Bézier control points, converting them to a series of positions, and applying CSS3 or canvas animations with proper easing and rotation, developers can quickly produce sophisticated paper‑plane effects while keeping the implementation modular and reusable.

Recruitment notice (non‑technical)

JD Mall – Second‑hand team is hiring senior front‑end engineers (web or app). Location: JD Group headquarters, near subway, with shuttle service. Email: [email protected].