Which is better for canvas or css to implement the same animation?

to achieve a translation animation on WeChat Mini Programs, generally speaking, you use css"s translate to translate, but you happen to be in contact with canvas, so you think that
now has three solutions:

.
  • use the translate of css to translate
  • use the wx.createAnimation of Mini Program API to translate
  • draw frame by frame with canvas

which performance is better

there is a question: is css also translated by re-rendering, and do they all re-render?

Thank you

Mar.22,2021

Mini Program API


this is a false proposition.

your example is not accurate, in other words, you are not considering whether to use css or canvas because you want to do a translation animation.

css3 is rich in animation, and browser support is relatively good. Coupled with the fact that css3 can use gpu acceleration, the performance is already very good (if used properly, I don't know how many examples of improper use and think that the performance of css animation is poor)
of course, there are many misuses of canvas, resulting in poor performance. For more information, please see this article: https://www.html5rocks.com/zh.

while canvas personally thinks it is more suitable for pixel-level rendering. This is what css cannot do.
canvas has a special canvas, which is not in a hurry to dom, so the performance will be a little different from css3, and sometimes canvas animation will be smoother.
some people have tested that canvas and css3 animation actually have their own preferences in different scenarios.

you can refer to the answer on stackoverlow: https://stackoverflow.com/que.

.

I hope my answer will be helpful to you. My personal homepage is https://azl397985856.github.io/, and the Nuggets homepage https://juejin.im/user/58af98.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bf413e-46f0e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bf413e-46f0e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?