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

Javascript
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.

Previous: Has anyone ever used cytoscape.js? how many values does layout.name have?

Next: I would like to ask why it is invalid to set up cookie on the server that python takes!

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu