Форум

potatosboxon · #1 (**permalink**) 03.02.2020, 19:13

Здравствуйте.

Код ниже демонстрирует ускоренеи элемента.

https://jsfiddle.net/sLy4dz7p/1/

<body style="background-color:#000;">
	<div id="test" style="position:absolute;top:50%;left:50%;transform:translate(50%,50%);width:20px;height:20px;background-color:#fff;"></div>
</body>
<script>
window.onload = function(){
	var element = document.getElementById('test');
	var start;	
	
	var minSpeed=1;
	var maxSpeed=5;
	var minPosY=0;
	var maxPosY=250;	
	var thisPosY=50;
	
	//Движение
	function moveMe(speed,pxY){
		//Шаг
		function step(timestamp){
			if (!start) {
				start = timestamp;
			};
			time=timestamp-start;
			var px = time * speed / 10;
			element.style.transform = "translate("+0+"px,"+px+"px)";
			if (px < pxY){
				requestAnimationFrame(step);
				speed=speed+0.5;
				return;
			}
			console.log("Приехали");
			return;
		}
		requestAnimationFrame(step);
	}
	moveMe(5,500);
}
</script>

Никак не могу решить задачу.
Необходимо плавно менять скорость перемещения относительно текущей позиции. То-есть если элемент находится на minPosY=0 то необходимо задать minSpeed=1, по мере увеличения Y в +, необходимо плавно наращивать скорость, пока она не станет равной 5 или не будет превышен maxPosY.

По существу, представим поле, сверху обьект движется с минимальной скоростью, внизу с максимальной. Между минимумом и максимумом скорость меняется плавно.

Help!

рони · #2 (**permalink**) 03.02.2020, 19:44

potatosboxon,
Структура анимации

ставите нужную Функцию расчёта времени(easing) и всё.

MallSerg · #3 (**permalink**) 03.02.2020, 19:45

google

или лучше https://learn.javascript.ru/js-anima...chyota-vremeni

potatosboxon · #4 (**permalink**) 03.02.2020, 19:51

А средствами чистого javascript этот вопрос никак не решить?

MallSerg · #5 (**permalink**) 03.02.2020, 20:08

А для тебя JS по всем приведенным ссылкам не достаточно чистый?
там даже каких либо подключенных библиотек нету =(.

potatosboxon · #6 (**permalink**) 03.02.2020, 21:33

Не крутил я animate. Он вроде как совсем новехенький.
Короч спутал я WEB Animate API и временную функцию.
В общем на сколько я сейчас разобрался, надо сделать следующее.
Найти начальную позицию.
Расчитать оставшееся время.
Задать параметры времеени и запустить элемент в путь.
Надо найти ease функцию.
Вот эта вроде как не то что надо

function inOutQuad(n){
    n *= 2;
    if (n < 1) return 0.5 * n * n;
    return - 0.5 * (--n * (n - 2) - 1);
};

Только не понятно, как каждый раз актуализировать оставшееся растояние, текущую позицию, и скоростью преодаления пути.

рони · #7 (**permalink**) 03.02.2020, 23:58

potatosboxon,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   body{
       background-color: hsla(0, 0%, 66%, 1);
       margin: 0;
   }

   div{
       display: inline-block;
   }

  </style>
  <script>
document.addEventListener( "DOMContentLoaded" , function() {
  function animate({timing, draw, duration}) {
  let start = performance.now();
  requestAnimationFrame(function animate(time) {
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;
    let progress = timing(timeFraction);
    draw(progress);
    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}
  function inOutQuad(n){
    n *= 2;
    if (n < 1) return 0.5 * n * n;
    return - 0.5 * (--n * (n - 2) - 1);
  };
  function easeOutExpo( t ) {

    if( t === 1 ) {
        return 1;
    }

    return ( -Math.pow( 2, -10 * t ) + 1 );

}
  class Boulder extends HTMLDivElement{
    constructor(color, left = 100, size = 15) {
		super();
		this.color = color;
        this.left = left;
		this.size = size;
		this.style.background = this.color;
		this.style.width = `${this.size}px`;
		this.style.height = `${this.size}px`;
        this.style.transform = `translate(${this.left}px, 0px)`;
        this.option = {timing : easeOutExpo, draw : this.draw.bind(this), duration : 5000};
        animate(this.option);
	}
    draw(progress){
        this.style.transform = `translate(${this.left}px, ${(window.innerHeight - this.size) * progress|0}px)`;
    }

  }
 customElements.define("custom-box", Boulder, { extends: "div" });

 for (let i = 0; i < 7; i++) {
    const color = '#' + ('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6);
    const left = (window.innerWidth - 15) * Math.random()|0;
    const box = new Boulder(color, left);
    document.querySelector("body").append(box);
 }


    });
 </script>
</head>
<body>
</body>
</html>

potatosboxon · #8 (**permalink**) 04.02.2020, 09:18

Че то не получается у меня точно сформулировать мысль. Надо подумать прежде чем вопрос задавать.
Надо начать с простого.
Пример демонстрирует ускорение.

function ease(n){
    return Math.pow(n, 2)
};
function startAnimation(){
    var element = document.getElementById('test');
	var stop = false;

    // animating x (margin-left) from 20 to 300, for example
    var startx = 0;
    var destx =  250;
    var duration = 1500;
    var start = null;
    var end = null;

    function startAnim(timeStamp) {
        start = timeStamp;
        end = start + duration;
        draw(timeStamp);
    }

    function draw(now) {
        if (stop) return;
        if (now - start >= duration) stop = true;
        var p = (now - start) / duration;
        val = ease(p);
        var px = startx + (destx - startx) * val;
        element.style.transform = "translate("+0+"px,"+px+"px)";
        requestAnimationFrame(draw);
    }

    requestAnimationFrame(startAnim);
}
startAnimation();

Как в данном случае замедлять элемент?

рони · #9 (**permalink**) 04.02.2020, 11:19

Сообщение от potatosboxon

замедлять элемент

смотрите пример выше #7, заменил inOutQuad на easeOutExpo.

potatosboxon · #10 (**permalink**) 04.02.2020, 11:36

Не решить мою задачу банальной t функцией.
Это хорошо эффектики всякие запускать, снежок там замедлять, ракету, но у меня совсем иная задача.
У меня сетка 5x5.
На 0:Y обьект должен перемещаться со скоростью 1.
На 5:Y обьект должен перемещаться со скоростью 5.
При движении от 0 к 5, от 5 к 0 - должна меняться скорость.
При перемещении по X скорость должна сохраняться заданная при перемещении по Y.
Спасибо за ответы, буду копать.

Форум

Справочник

Discord чат

Курсы javascript