Vue project tween method implementation returns the sample code at the top, vuetween

Vue project tween method implementation returns the sample code at the top, vuetween

I. Scenarios

Tween. js is a js animation library that can generate smooth animation effects.

What do you do when you want to implement the function of returning to the top? Most people will use document. body. scrollTop = 0. This write will implement the function,

But to be more delicate, we may wish to use the gentle movements of the tween to see how it works.

We have previously written a tween Article, which is not introduced here.

Ii. Code

<! DOCTYPE html> 
Iii. requestAnimationFrame rewrite the setInterval method:

Methods: {backTop () {var Tween = {Linear: function (t, B, c, d) {// return c * t/d + B at a constant speed;} Math. tween = Tween; var t = 1; const B = document. body. scrollTop; const c = 1; const d = 1; var timer; timer = requestAnimationFrame (function fn () {if (document. body. scrollTop> 0) {t --; console. log (t) console. log (t); const backTop = Tween. linear (t, B, c, d); console. log (backTop); document. body. scrollTop = backTop; timer = requestAnimationFrame (fn);} else {cancelAnimationFrame (timer )}})}}
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.