录制一个练习，看看如何优化小程序购物车（小程序购物车）的动画

本文将与您分享一个小程序动画的优化实践并看看如何优化小程序购物车的动画，希望可以帮助到您！

this . goodboxtimer = setinterval（）=》{ index --this . setdata（{ & # 39；movingBallInfo.posX & # 39:linePos

// demo2//没有呈现constcon = document。getelementbyid（& # 39；con & # 39);con . onclick = function（）{ setTimeout（function setTimeout 1（）{ con . text content = 0；Promise.resolve（）。then（function promise 1（）{ console . log（& # 39；承诺1 & # 39；）}）}，0）setTimeout（函数setTimeout 2（）{ con . text content = 1；Promise.resolve（）。then（function promise 2（）{ console . log（& # 39；承诺2 & # 39；) }) }, 0)};

我们知道浏览器的正常帧率为60fps，即一帧的时间约为16.66 ms .如果在一帧中修改Dom两次，浏览器将只取最后一次修改的值进行渲染。

// demo3//有渲染图constcon = document。getElementByid（& # 39；con & # 39);con . onclick = function（）{ setTimeout（function setTimeout 1（）{ con . text content = 0；}, 0);setTimeout（函数settime out 2（）{ con . text content = 1；}, 16.7);};

尽量不要使用setInterval。

从上面可以看出，setInterval是一个宏任务。setInterval将在每个定义的时间间隔将回调函数推入宏任务队列，然后主线程将读取宏任务队列中的setInterval回调函数并执行它。但是，如果主线程有一个长任务要执行，它将阻塞读取，直到主线程中的任务执行完毕，但setInterval向宏任务队列添加回调函数的操作不会停止。在这种情况下，函数执行的时间间隔将比我们定义的时间间隔长得多。

这里有一个例子。每次setInterval回调都需要大量的计算，这会阻塞主线程。

//demo 4 const BTN = document . getelementbyid（& # 39；btn & # 39）BTN . addevent listener（& # 39；点击& # 39；，setIntervalFn）let sum = 0 function setIntervalFn（）{ let last let countIdx = 0 const timer = setInterval（function timeFn（）{ countIdx ++ const new time = new Date（）。getTime（）const gap = new time -last last = new time console . log（& # 39；setInterval & # 39，gap，count idx）if（count idx》5）clear interval（timer）//1000000//100000 for（让I = 0；I《100000；i++）{ sum+= I } }，100）last =新日期（）。getTime（）}

setInterval的缺点:

当主线程有代码执行时，宏任务队列总会以一定的时间间隔推送事件回调函数。回调函数只在主线程空闲时执行，但大多数回调函数都已过时。如果setInterval的回调间隔比浏览器渲染一帧的时间短，回调函数将被执行多次，但只会使用最后一个结果，这也会造成浪费，甚至可能阻塞主线程。所以尽量使用setTimeout而不是setInterval

使用requestAnimationFrame

如果使用js绘制动画，您仍然使用官方推荐的requestAnimationFrame而不是setTimeout。

从上面的例子可以看出，两个宏任务之间可能不会触发浏览器渲染，这是由浏览器本身决定的，并且浏览器的帧率不会一直是60fps，有时可能会下降到30fps。但是setTimeout的回调时间是死的，这可能会导致多次Dom修改，并且只触发一次ui更新，从而导致掉帧。

//demo 5 const con = document . getelementbyid（& # 39；con & # 39);设I = 0；function rAF（）{ requestAnimationFrame（function AAAA（）{ con . text content = I；Promise.resolve（）。then（函数bbbb（）{ if（I《5）{ rAF（）；i++；} });});} con . onclick = function（）{ rAF（）；};

您可以看到它被渲染了五次（五条垂直虚线）

小程序的动画优化

Applet是一个双线程架构。

好处是ui渲染和js主线程是分离的，我们知道它们在浏览器中是互斥的，所以当主线程被阻塞时，页面交互将失去响应，这在小程序中不会发生。

缺点:逻辑层和渲染层存在通信延迟，大量的通信也会造成性能瓶颈。

applet提供了wxs用来处理呈现层的逻辑。

购物车抛物线动画的优化

因此，我们不应该使用setInterval来执行动画。我们对其进行修改，在点击添加购买时将点击坐标和目标坐标传递到wxs中，然后计算运行轨迹点的坐标，然后用requestAnimationFrame执行动画帧。

//wxsfunction executecatanimation（）{ curCoordIdx = coord arr . length -1 ins . requestanimationframe（setStyleByFrame）} function setStyleByFrame（）{ if（curCoordIdx》= 0）{ ins . select component（& # 39；。cart -动画& # 39；).set style（{ display:& # 39；block & # 39，左:coordArr【curCoordIdx】。x+& # 39；px & # 39，top:coordArr【curCoordIdx】。y+& # 39；px & # 39}）curCoordIdx -= 1 ins . request animation frame（setStyleByFrame）} else { ins . select component（& # 39；。cart -动画& # 39；).set style（{ display:& # 39；无& # 39；}）} }在真机上效果非常明显，低端安卓机上的动画也非常丝滑。但是屏幕录制效果不好，这里就不放了。

【相关学习推荐:小程序开发教程】

以上是记录一个实践，看看如何优化小购物车的动画。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：录制一个练习，看看如何优化小程序购物车（小程序购物车）的动画 https://zhujicankao.com/105379.html