Artikel ini akan berkongsi dengan anda amalan pengoptimuman animasi program mini untuk melihat cara mengoptimumkan animasi troli beli-belah program mini Saya harap ia akan membantu semua orang.

Pengoptimuman animasi troli beli-belah program mini

Apabila program mini syarikat mengklik untuk menambah pembelian, animasi parabola akan dilukis animasi dikira Koordinat setiap titik pada lengkung Bezier dilalui oleh js, dan kemudian gaya titik ditetapkan secara dinamik untuk mencapai animasi. Tetapi ini akan membawa masalah bingkai tersekat dan terjatuh

this.goodBoxTimer = setInterval(() => {
  index--
  this.setData({
    'movingBallInfo.posX': linePos[index][0],
    'movingBallInfo.posY': linePos[index][1],
  })
  if (index < 1) {
    this.resetGoodBoxStatus()
  }
}, 30)

Pengetahuan prasyarat: Gelung Acara, Tugasan, Tugasan mikro, Rendering UI

Javascript ialah bahasa satu-utas, yang bermaksud semua tugasan mesti beratur. Terdapat dua jenis tugasan: satu tugas segerak (synchronous) dan satu lagi ialah tugas tak segerak (asynchronous). Tugasan segerak merujuk kepada tugasan yang beratur untuk pelaksanaan pada utas utama Tugas seterusnya hanya boleh dilaksanakan selepas tugasan sebelumnya telah dilaksanakan merujuk kepada tugasan yang tidak memasuki utas utama tetapi memasuki "tugasan tugasan". hanya apabila "baris gilir tugas" memberitahu utas utama bahawa tugas tak segerak boleh dilaksanakan, tugas itu akan memasuki utas utama untuk dilaksanakan.

Tugas tak segerak dibahagikan kepada tugasan makro dan tugasan mikro. Begitu juga, baris gilir tugasan juga dibahagikan kepada baris gilir tugasan makro dan baris gilir tugasan mikro.

Langkah kasar gelung peristiwa:

• Semua tugas penyegerakan dilaksanakan pada urutan utama, membentuk tindanan konteks pelaksanaan.

• Selagi tugas tak segerak mempunyai hasil larian, acara diletakkan dalam baris gilir tugas.

• Selepas tugasan makro dalam tindanan pelaksanaan dilaksanakan, enjin akan membaca tugas mikro terlebih dahulu dan menolaknya ke dalam tindanan pelaksanaan. Selepas pelaksanaan selesai, teruskan membaca microtask seterusnya. Jika microtask baharu dijana semasa pelaksanaan, microtask ini akan ditolak ke dalam baris gilir microtask. Jika utas utama selesai melaksanakan semua tugas dalam baris gilir microtask, ia akan membaca baris gilir macrotask dan menolaknya ke dalam timbunan pelaksanaan.

• Urut utama terus mengulangi langkah ketiga di atas.

Tugas makro biasa:

• setTimeout
• setInterval
• postMessage
• ...

Microtasks biasa:

• Promise
• MutationObserver

Apakah hubungan antara Event Loop dan rendering UI? Malah, selepas semua tugasan mikro dalam baris gilir microtask dilaksanakan, penyemak imbas memutuskan sama ada untuk melakukan kemas kini pemaparan.

// demo1
// 渲染發(fā)生在微任務(wù)之后
const con = document.getElementById('con');
con.onclick = function () {
  Promise.resolve().then(function Promise1 () {
    con.textContext = 0;
  })
};

// demo2
// 兩次EventLoop中間沒(méi)有渲染
const con = document.getElementById('con');
con.onclick = function () {
  setTimeout(function setTimeout1() {
      con.textContent = 0;
      Promise.resolve().then(function Promise1 () {
          console.log('Promise1')
    })
  }, 0)
  setTimeout(function setTimeout2() {
    con.textContent = 1;
    Promise.resolve().then(function Promise2 () {
        console.log('Promise2')
    })
  }, 0)
};

Kami tahu bahawa kadar bingkai penyemak imbas dalam keadaan biasa ialah 60fps, iaitu masa satu bingkai adalah lebih kurang 16.66ms. Jika Dom diubah suai dua kali dalam satu bingkai, penyemak imbas hanya akan menggunakan nilai diubah suai terakhir untuk dipaparkan.

// demo3
// 兩次eventloop中有渲染
const con = document.getElementById('con');
con.onclick = function () {
  setTimeout(function  setTimeout1() {
    con.textContent = 0;
  }, 0);
  setTimeout(function  setTimeout2() {
    con.textContent = 1;
  }, 16.7);
};

Cuba jangan gunakan setInterval

Seperti yang dapat dilihat dari atas, setInterval ialah tugas makro, setInterval Fungsi panggil balik ditolak ke dalam baris gilir tugas makro pada setiap selang masa yang ditentukan, dan kemudian utas utama membaca fungsi panggil balik setInterval dalam baris gilir tugas makro dan melaksanakannya. Walau bagaimanapun, jika utas utama mempunyai pelaksanaan tugas yang panjang, ia akan menyekat bacaan dan tidak akan meneruskan bacaan sehingga tugas dalam utas utama dilaksanakan Walau bagaimanapun, operasi setInterval untuk menambah fungsi panggil balik pada baris gilir tugasan makro tidak akan berhenti. Dalam kes ini, ia akan menyebabkan: selang masa antara pelaksanaan fungsi adalah lebih besar daripada selang masa yang kami tetapkan.

Berikut ialah contoh. Setiap panggilan balik setInterval memerlukan banyak pengiraan, yang menyekat urutan utama

// demo4
const btn = document.getElementById('btn')
btn.addEventListener('click', setIntervalFn)
let sum = 0
function setIntervalFn() {
  let last
  let countIdx = 0
  const timer = setInterval(function timeFn() {
    countIdx++
    const newTime = new Date().getTime()
    const gap = newTime - last
    last = newTime
    console.log('setInterval', gap, countIdx)
    if (countIdx > 5) clearInterval(timer)
    // 10000000
    // 100000
    for (let i = 0; i < 100000; i++) {
      sum+= i
    }
  }, 100)
  last = new Date().getTime()
}

Kelemahan setInterval:

• Apabila urutan utama mempunyai pelaksanaan kod, baris gilir tugas makro akan sentiasa menolak fungsi panggil balik acara pada selang masa tertentu. Fungsi panggil balik hanya akan dilaksanakan apabila utas utama melahu, tetapi kebanyakan fungsi panggil balik ini sudah lapuk.
• Jika selang panggilan balik setInterval adalah lebih pendek daripada masa yang diambil oleh penyemak imbas untuk memaparkan bingkai, maka fungsi panggil balik dilaksanakan beberapa kali, tetapi hanya hasil terakhir yang akan digunakan, yang juga akan menyebabkan pembaziran malah boleh menyebabkan Sekat benang utama.

Jadi cuba gunakan setTimeout dan bukannya setInterval

Gunakan requestAnimationFrame

Jika anda menggunakan js untuk melukis animasi , Masih menggunakan requestAnimationFrame yang disyorkan secara rasmi dan bukannya setTimeout.

window.requestAnimationFrame() Beritahu penyemak imbas bahawa anda ingin melakukan animasi dan minta penyemak imbas memanggil fungsi panggil balik yang ditentukan untuk mengemas kini animasi sebelum lukisan semula seterusnya

由上面的例子可知，兩個(gè)宏任務(wù)之間不一定會(huì)觸發(fā)瀏覽器渲染，這個(gè)由瀏覽器自己決定，并且瀏覽器的幀率并會(huì)一直是60fps，有時(shí)可能會(huì)下降到30fps，而setTimeout的回調(diào)時(shí)間是寫死的，就有可能導(dǎo)致修改了多次Dom，而只觸發(fā)了一次ui更新，造成掉幀。

// demo5
const con = document.getElementById('con');
let i = 0;
function rAF(){
  requestAnimationFrame(function aaaa() {
    con.textContent = i;
    Promise.resolve().then(function bbbb(){
      if(i < 5) {rAF(); i++;}
    });
  });
}
con.onclick = function () {
  rAF();
};

可以看到渲染了5次（五條豎直虛線）

小程序上的動(dòng)畫優(yōu)化

小程序是雙線程架構(gòu)

好處是：ui渲染和js主線程是分開的，我們知道在瀏覽器中這兩者是互斥的，所以當(dāng)主線程有阻塞時(shí)，頁(yè)面交互就會(huì)失去響應(yīng)，而小程序中不會(huì)出現(xiàn)這樣的情況。

壞處是：邏輯層、渲染層有通信延時(shí)，大量的通信也會(huì)造成性能瓶頸。

小程序提供了wxs用來(lái)處理渲染層的邏輯。

購(gòu)物車拋物線動(dòng)畫優(yōu)化

所以我們不應(yīng)該用setInterval去執(zhí)行動(dòng)畫，我們修改成，當(dāng)點(diǎn)擊加購(gòu)時(shí)，把點(diǎn)擊坐標(biāo)與目標(biāo)坐標(biāo)傳入wxs，然后計(jì)算運(yùn)行軌跡點(diǎn)的坐標(biāo)計(jì)算，接著用requestAnimationFrame執(zhí)行動(dòng)畫幀

// wxs
function executeCartAnimation () {
  curCoordIdx = coordArr.length - 1
  ins.requestAnimationFrame(setStyleByFrame)
}

function setStyleByFrame() {
  if (curCoordIdx >= 0) {
    ins.selectComponent('.cart-animation').setStyle({
      display: 'block',
      left: coordArr[curCoordIdx].x + 'px', 
      top: coordArr[curCoordIdx].y + 'px'
    })
    curCoordIdx -= 1
    ins.requestAnimationFrame(setStyleByFrame)
  } else {
    ins.selectComponent('.cart-animation').setStyle({
      display: 'none'
    })
  }
}

在真機(jī)上效果非常明顯，低端安卓機(jī)上的動(dòng)畫也非常絲滑。但是錄屏效果不好，這里就不放了。

【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

Atas ialah kandungan terperinci Rakam amalan dan lihat cara mengoptimumkan animasi troli beli-belah program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!