Implementing Paper Plane Flight Animation with CSS3 and Canvas in Mini Programs

The author, a front‑end architecture engineer with over 14 years of experience, introduces a requirement from JD's second‑hand team to animate a paper‑plane icon when a purchase request is sent.

Two main animation approaches are discussed: using CSS3 animations (keyframes, transition) and using the canvas API with JavaScript.

CSS3 Animation

First, the difference between position (left/top) and transform (translate) is highlighted, noting that transform benefits from GPU acceleration.

Example CSS keyframes for a simple horizontal move:

@keyframes move { from { transform: translateX(0px); } to { transform: translateX(1000px); } }

Applying the animation to an element:

#plane { animation: move 10s linear; width: 100px; height: 500px; }

To achieve diagonal motion, translateY is added:

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

Further variations use easing and alternation, e.g., animation: falling 5s ease-in alternate 2;

Canvas Animation

A reusable Game class is introduced for the mini‑program environment. The canvas context is created with wx.createCanvasContext('aeroplane', this) , a Game instance is instantiated, the plane data is set, and the animation is launched with a Bezier path.

var context = wx.createCanvasContext('aeroplane', this); // create canvas
var game = new Game.main(context); // create game instance
game.setPlane(plane);
game.launch(bezier); // start animation

The plane object contains its image URL and dimensions, while the Bezier data is an array of control points defining the flight curve.

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

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 } ]

Bezier Curve Calculation

The article explains quadratic and cubic Bezier formulas, showing how control points shape the curve. It provides sample calculations for specific t values (e.g., 0.1, 0.5) to obtain intermediate positions.

t = 0.1
x = -20*(1-0.1)^3 + 3*200*0.1*(1-0.1)^2 + 3*250*0.1^2*(1-0.1) + 300*0.1^3

Similar expressions are given for y . The result is a series of points forming the flight path.

Orientation with Inverse Trigonometry

To rotate the plane along the tangent of the curve, the angle is computed using Math.atan2 on the difference between the current and previous points, then applied with context.rotate(r) . The article warns to use atan2 instead of atan for full‑range angles.

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

Conclusion

The author emphasizes the importance of combining design intent with technical implementation, using reusable classes, Bezier paths, and proper rotation to achieve smooth, visually appealing paper‑plane animations while keeping the code maintainable.