@meleon/uni-ui/utils/tween/tween.js

A uniapp components library written in vue3 and typescript

import*as Easing from"./easing";import{getDecimalPlaces}from"../number/index";export class Tween{constructor(t){this.elapsed=0,this.precision={};const{from:i,to:s,duration:e,precision:h,delay:a,easing:n,onStart:o,onUpdate:r,onFinish:m}=t;for(const t in i)this.precision[t]=h||getDecimalPlaces(s[t]),Object.prototype.hasOwnProperty.call(s,t)||(s[t]=i[t]);for(const t in s)Object.prototype.hasOwnProperty.call(i,t)||(i[t]=s[t],this.precision[t]=h||getDecimalPlaces(s[t]));this.from=i,this.to=s,this.duration=e||500,this.delay=a||0,this.easing=n||"linear",this.startTime=Date.now()+this.delay,this.started=!1,this.finished=!1,this.timer=null,this.keys={},this.onStart=o,this.onUpdate=r,this.onFinish=m}requestAnimationFrame(t){const i=(new Date).getTime(),s=Math.max(0,16-(i-this.elapsed)),e=setTimeout((()=>{t(i+s)}),s);return this.elapsed=i+s,e}cancelAnimationFrame(t){clearTimeout(t)}update(){if(this.time=Date.now(),!(this.time<this.startTime||this.finished))if(this.elapsed!==this.duration){this.elapsed=this.time-this.startTime,this.elapsed=this.elapsed>this.duration?this.duration:this.elapsed;for(const t in this.to){const i=this.to[t],s=this.from[t],e=this.precision[t];this.keys[t]=+(s+(i-s)*Easing[this.easing](this.elapsed/this.duration)).toFixed(e)}this.started||(this.onStart&&this.onStart(this.keys),this.started=!0),this.onUpdate&&this.onUpdate(this.keys)}else this.finished||(this.finished=!0,this.onFinish&&this.onFinish(this.keys))}start(){this.startTime=Date.now()+this.delay;const t=()=>{this.update(),this.timer=this.requestAnimationFrame(t),this.finished&&(this.cancelAnimationFrame(Number(this.timer)),this.timer=null)};t()}stop(){this.timer&&this.cancelAnimationFrame(Number(this.timer)),this.timer=null}}