Zamonaviy veb-dizaynda suyuq harakat arxitekturasi

Vebdagi harakat o‘n yil davomida kinoga taqlid qildi. Biz animatsiya dasturlaridan silliqlash egri chiziqlarini olib, ularni to‘rtburchaklarga qo‘lladik va natijani interfeys deb atadik. So‘nggi ikki yil bu davrni sokin yakunladi. Uning o‘rnini yangi kutubxona emas, balki boshqacha aqliy model egalladi: harakat — skript bilan yozilgan tomosha emas, materialning simulyatsiyasi.

Bu o‘zgarish muhim, chunki foydalanuvchilar endi interfeysni o‘qimaydi — uni paypaslab ko‘radi. Qarshilik ko‘rsatadigan sudrash, joyiga sekin o‘tiradigan panel, kursor ostida to‘lqinlanadigan yuza: har biri narsa nimadan yasalgani haqidagi da’vo. Fizikani noto‘g‘ri qilsangiz, mahsulot hech qanday vizual jilo qutqara olmaydigan darajada arzon ko‘rinadi.

1. Harakatning matematik asoslari

Kubik bézier vaqt bo‘ylab yo‘lni tasvirlaydi. Prujina esa kuch, massa va so‘nish o‘rtasidagi bog‘liqlikni tasvirlaydi. Farqi shundaki, bézier masofa har o‘zgarganda qaytadan yozilishi kerak, prujina esa shunchaki yechiladi — shuning uchun uzilishi mumkin bo‘lgan, imo-ishora bilan boshqariladigan interfeyslar deyarli hamma joyda prujinaga o‘tdi.

Harakat hech qachon bezak bo‘lmasligi kerak. Bu raqamli qaytar aloqani jismoniy sezgiga aylantiradigan ko‘rinmas taktil qatlam.

GPU’da xuddi shu tamoyil bir pog‘ona pastda ishlaydi. Transformatsiyani animatsiya qilish o‘rniga siz cho‘qqilarni siljitasiz yoki UV’larni buzasiz, va «animatsiya» har kadrda qaytadan hisoblanadigan funksiyaga aylanadi. Hech narsa interpolatsiya qilinmaydi — hammasi hosil qilinadi.

import { ShaderMaterial, Vector2 } from 'three';

// Displacement is derived per-frame, never tweened.
export const fluidDistortion = new ShaderMaterial({
  uniforms: {
    uTime: { value: 0 },
    uMouse: { value: new Vector2(0, 0) },
    uStrength: { value: 0.35 },
  },
  fragmentShader: `
    uniform float uTime;
    uniform vec2 uMouse;
    uniform float uStrength;

    void main() {
      vec2 uv = gl_FragCoord.xy / 1024.0;
      float d = distance(uv, uMouse);
      uv += sin(uv.yx * 8.0 + uTime) * uStrength * (1.0 - d);
      gl_FragColor = vec4(uv, 0.5, 1.0);
    }
  `,
});

2. Shader render sikllarini optimallashtirish

Sodda sikl har kadrda har bir uniform’ni yuklaydi va CPU allaqachon biladigan holatni qayta o‘qiydi. Uniform yozuvlari alohida arzon, lekin yig‘indida halokatli. Ularni guruhlang, o‘zgarmaganlarini o‘tkazib yuboring va sahna tinch bo‘lganda siklni butunlay to‘xtating — bo‘sh turgan canvas hech narsaga tushmasligi kerak.

3. Prujina fizikasi va silliqlash

Silliqlash harakat bezakli va masofa qat’iy bo‘lganda yutadi — sahifa o‘tishi, so‘nish. Prujinalar esa inson animatsiyani uzib qo‘yishi mumkin bo‘lgan lahzada yutadi, chunki prujina allaqachon tezlikni olib yuradi, bézier esa qaytadan boshlashga majbur. Amaliy qoida: agar barmoq yoki kursor uni uchishda ushlashi mumkin bo‘lsa — uni simulyatsiya qiling.

4. Xulosa va asosiy fikrlar

Harakatni yakuniy pardoz emas, materialning xususiyati sifatida qabul qiling — shunda murakkab qarorlarning aksariyati o‘zi hal bo‘ladi. Har qanday interaktiv narsa uchun prujina tanlang, GPU’da interpolatsiya emas, hosil qiling va chiqaradigan har bir effektning bo‘sh turish narxini o‘lchang. 2026-yilda qimmat his qilinadigan interfeyslar — bu obyektlardek harakat qiladiganlaridir.