How to Create Rich, Natural Motion Effects for UI Design

1. Motion Effect Texture

As smart terminal performance improves, dynamic UI design occupies a larger share of user experience. To give motion effects texture, consider time, rate, space, motion concept, and motion mode. Designers must make motion realistic and natural, focusing on details and aligning with brand identity.

1.1 Texture Expression – Time

Time is core; adjusting duration changes perceived motion character. Shorter time yields faster motion with fewer perceivable details. Bristow noted human blink lasts 100‑150 ms, often used as a basic unit for motion timing.

1.2 Texture Expression – Rate

Real‑world objects move non‑uniformly due to gravity and friction. Matching speed curves to natural motion gives a sense of mass: steep curves feel heavier, gentle curves feel lighter.

1.3 Texture Expression – Space

Displacement across x, y, z defines motion space. Near objects appear larger and move faster; far objects appear smaller and slower. Two factors to consider:

Parallax: closer elements move faster than distant ones.

Size: distant objects appear smaller.

1.4 Texture Expression – Motion Tone

Different motion concepts convey different textures; lively objects may use bounce, while stiff objects use rigid motion. Align motion tone with brand personality.

1.5 Texture Expression – Motion Method

Motion method follows the concept: curve vs straight line, depth of field, efficiency vs expressiveness, all chosen according to brand and product attributes.

2. Texture Adjustment

Motion curves create natural feel. Adjusting curves controls speed and tone. Understanding speed‑value curves is essential.

Speed Curve

Axes: time (x) and speed (y). The curve starts at zero speed, accelerates, then decelerates, representing typical easing.

Handle the curve to set acceleration; 100 % acceleration yields maximum speed. Steeper handles mean stronger acceleration.

Value Curve

Axes: displacement (x) and time (y). Shows distribution of speed over distance.

Usage Recommendations

Choose appropriate curves based on design scenario. In After Effects, use speed curves for mask paths; elastic expressions require amplitude, frequency, decay. In UI interaction, value curves map to Bézier interpolators for implementation.

Expression Application

Elastic expressions reduce keyframes; control amplitude, frequency, decay to achieve desired bounce. Speed also influences elastic strength.

amp = 1;
freq = 4.0;
decay = 4.0;
n = 0;
if (numKeys > 0) {
  n = nearestKey(time).index;
  if (key(n).time > time) { n--; }
}
if (n == 0) { t = 0; }
else { t = time - key(n).time; }
if (n > 0) {
  v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
  value + v * amp * Math.sin(freq * t * 2 * Math.PI) / Math.exp(decay * t);
}

3. Types of Motion

Understanding different motion curves helps avoid formulaic thinking and improves perception.

Easing In

Accelerating motion; objects speed up before reaching peak. Used when elements leave the screen completely, such as dialogs or notifications.

Easing Out

Decelerating motion; objects slow down as they enter the screen, suitable for cards, panels, etc.

Easing (In‑Out)

Combines acceleration and deceleration; asymmetric curve starts fast then slows, creating a natural physical feel.

Elastic Motion

Real‑world rebound effects; governed by damping and frequency. iOS 7 popularized elastic curves for noticeable bounce and faster start.

4. Formation of Concept

Companies develop design languages (Material, IBM, iOS). Building a personal motion design knowledge system based on theory prevents reliance on intuition.

Conclusion

In the experience era, designers must refine motion details and build a systematic knowledge base, moving from feeling‑based design to practical, nuanced motion effects.