requestAnimationFrame - замедление обьекта
Здравствуйте.
Код ниже демонстрирует ускоренеи элемента. 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! |
|
|
А средствами чистого javascript этот вопрос никак не решить?
|
А для тебя JS по всем приведенным ссылкам не достаточно чистый?
там даже каких либо подключенных библиотек нету =(. |
Не крутил я 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); }; Только не понятно, как каждый раз актуализировать оставшееся растояние, текущую позицию, и скоростью преодаления пути. |
анимация блоков на js
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> |
Че то не получается у меня точно сформулировать мысль. Надо подумать прежде чем вопрос задавать.
Надо начать с простого. Пример демонстрирует ускорение. 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(); Как в данном случае замедлять элемент? |
Цитата:
|
Не решить мою задачу банальной t функцией.
Это хорошо эффектики всякие запускать, снежок там замедлять, ракету, но у меня совсем иная задача. У меня сетка 5x5. На 0:Y обьект должен перемещаться со скоростью 1. На 5:Y обьект должен перемещаться со скоростью 5. При движении от 0 к 5, от 5 к 0 - должна меняться скорость. При перемещении по X скорость должна сохраняться заданная при перемещении по Y. Спасибо за ответы, буду копать. |
Часовой пояс GMT +3, время: 08:31. |