Hello! There are some small functions - easing. They allow you to change the values ​​of variables according to certain rules.

An example of one of them (taken from the Internet)

Math.linearTween = function (t, b, c, d) { return c*t/d + b; }; @t = время @b = начальное значение @c = разница между начальным и конечным состоянием @d = продолжительность

The question is: how does this duration work? I need to change the "opacity" (from 0 to 1) on an object for 10 seconds. But such a transition takes place in a second or two.

How to use these features? Or how to change the variable for N seconds?

  • And what do you need specifically? Run this function or write a function that reduces the value from 0 to 1 in N time? - user220409
  • @OlmerDale second option. - Reaget
  • What do you want to animate? - user220409
  • @OlmerDale for example: leaving an object from left to right for a time "t" - Reaget
  • Her .. You did not understand! Which object do you want to animate? If this is a dom object, then there are options with css. If this is a dom object that needs to be managed from js, then there are two native options. But if it is some kind of own entity object, then yes, you need to write exactly the function you are asking for. And in order for me to give an accurate and useful answer, I need all the details. So what is the object? - user220409

1 answer 1

If you do not get distracted by trifles and focus only on the animation code, then it will look something like this -

 class AnimationNode { constructor( target, propName, delay, from, to ){ this.target = target; this.propName = propName; this.delay = delay * 1000; this.from = from; this.to = to; } } class MoveSystem { constructor(){ this.nodeAll = []; } update( elapsedTime ){ let length = this.nodeAll.length; for( let i = 0; i < length; i++ ){ let node = this.nodeAll[ i ]; let path = node.to - node.from; let coef = path / node.delay; let result = coef * elapsedTime; if( result > node.to ){ result = node.to; } Object.assign( node.target.style, { [node.propName]: result + "px" } ); } } } const systemAll = [ new MoveSystem() ]; function update( elapsedTime = 0 ){ let length = systemAll.length; for( let i = 0; i < length; i++ ){ systemAll[ i ].update( elapsedTime ); } window.requestAnimationFrame( update ); } update(); let rect = document.body.querySelector( '.rect' ); let node = new AnimationNode( rect, "left", 10, 0, 200 ); systemAll[ 0 ].nodeAll.push( node ); 
 .rect { width: 50px; height: 50px; background: tomato; position: absolute; top: 0; left: 0; } 
 <div class="rect"></div>