Как остановить Анимацию Javascript?
Ребята, такая проблема. Сделал анимацию(нужно только так как у меня, нельзя через css). Все работает, но нужно как то остановить функцию fade, что бы постоянно анимация не происходила а только один раз. Использую clearInterval, но он не работает, я так понимаю из-за области видимости. Но как исправить, не могу понять.. https://jsbin.com/neyapet/edit?html,css,js,output
- Вопрос задан более трёх лет назад
- 1090 просмотров
1 комментарий
Простой 1 комментарий
у вас не «не останавливается» анимация, а постоянно перезапускается при каждом скроле при условии, что мы находимся не в «топе»
Решения вопроса 2
добавить еще условий.
if (window.pageYOffset < headerBottom) < header.classList.remove('sticky'); flag = true; // это >else if (window.pageYOffset > headerBottom && flag) < // и здесь еще && flag header.classList.add('sticky'); fade(header, 2000, 50); flag = false; >Как запустить и остановить анимацию?
Я хочу создать команды, которые запускают код, ставят его на паузу и обнуляют анимацию. Примерно так:
const svg = document.getElementById('svg-element') const warp = new Warp(svg) warp.interpolate(4) warp.transform(([ x, y ]) => [ x, y, y ]) let offset = 0 var requestId = undefined; function start(ani) < if (!requestId) < requestId = window.requestAnimationFrame(ani); >> function pause(ani) < if (requestId) < window.cancelAnimationFrame(ani); requestId = undefined; >> function stop() < offset = 0 >function animate() < warp.transform(([ x, y, oy ]) =>[ x, oy + 4 * Math.sin(x / 16 + offset), oy ]) offset += 0.1 self.start = start(animate) self.pause = pause(animate) self.stop = stop() > animate.start Как мне лучше это сделать, если анимаций будет несколько?
Писать для каждой свою функцию остановки, запуска и так далее, и вызывать start_animation_1() не имеет смысла.
Отслеживать
109k 23 23 золотых знака 111 111 серебряных знаков 372 372 бронзовых знака
задан 19 сен 2020 в 12:32
zeni1agent zeni1agent
517 2 2 серебряных знака 13 13 бронзовых знаков
Несколько одинаковых, или у каждого будет своя функция animate ?
19 сен 2020 в 12:43
@OPTIMUSPRIME у каждого будет своя функция animate. Но команды stop(), play() , pause()` одинаковы. Что то похожее я видел в three.js
19 сен 2020 в 13:17
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Ну нужна какая-то надстройка над Warp .
Проблема в том, что не получится обойтись магическими функциями, которые сами всё будут останавливать и запускать. Например, stop должен знать, какие именно значения ему нужно обнулить: Вместо одного offset, могут быть 2 или 3 значения. Т.е. при инициализации нужно передать дополнительный объект с начальными значениями.
В таких случаях можно попробовать сначала придумать, как было бы удобно использвать функцию, а потом думать, как её реализовать. Сделать, и больше не смотреть, что там происходит внутри. Немного повозился, пока получается такое:
class Anim < constructor(params) < /* Чтобы не пытаться запоминать, какая функция - как вызывается, можно изначально согласовать и объявить где-то вверху: """ Все полученные функции из params везде вызываются в контексте this """ */ this.warp = new Warp(params.elem); params.init_fn.call(this, this.warp); // инициализация для warp this._values = params.init_values; // Хранит параметры для loop this._loop_fn = params.loop; // вызывается на каждом animationFrame /***/ this._animating = false; this._save_starting_values(this._values); >start() < if (this._animating) return; this._animating = true; const fn = (time) =>< // Важна именно стрелочная функция: Чтобы this внутри не терялся. if (!this._animating) return; // Если откуда-то выставят this._animating = false, оно просто не запустится. // Можно уже без cancelAnimation. this._loop_fn.call(this, this._values, time); requestAnimationFrame(fn); >; requestAnimationFrame(fn); > pause() < this._animating = false; >stop() < this._animating = false; // Анимация уже не запустится this._return_starting_values(); // начальные значения возвращаются на место this._loop_fn.call(this, this._values, performance.now()); // перерисовать >/***/ _save_starting_values(_values) < this._starting_values = <>; Object.assign(this._starting_values, _values); > _return_starting_values() < Object.assign(this._values, this._starting_values); >> /*** Использование */ const animation = new Anim( < elem: document.getElementById('svg-element'), init_fn: function(warp) < warp.interpolate(4); warp.transform(([x, y]) =>[x, y, y]); >, init_values: < offset: 0, >, loop: function(values, time) < const v = values; this.warp.transform(([x, y, oy]) =>[x, oy + 4 * Math.sin(x / 16 + v.offset), oy]) v.offset += 0.1; >, >); animation.start(); /***/ (function demo_buttons() < const =>document.getElementById(e); id("start").addEventListener("click", function() < animation.start(); >); id("pause").addEventListener("click", function() < animation.pause(); >); id("stop").addEventListener("click", function() < animation.stop(); >); >)();#svg-element
Курсы javascript
Доброй ночи! Ребята надеюсь на помощь знающих, сам в js почти что нуб, только начал изучение, но вот появилась задача которую нужно решить. А именно организовать простенькую фоновую анимацию на сайте. На просторах интернета решение было найдено, но дело в том, что анимация получилась зацикленной, а мне нужно остановить ее на последнем кадре. Подскажите пожалуйста что нужно поправить, чтобы добиться желаемого эффекта.
var animated_element = document.getElementById('bg'); var frame_width = animated_element.offsetWidth; var total_frames = 4; var frame_count = 0; setInterval(function()< var new_x = (frame_count * frame_width) * -1; animated_element.style.backgroundPosition = new_x+'px 0px'; if (frame_count < total_frames)< frame_count += 1; >else < frame_count = 0; >>,400);
02.08.2017, 01:25
Регистрация: 27.05.2010
Сообщений: 33,009
VictorHub,
var animated_element = document.getElementById('bg'); var frame_width = animated_element.offsetWidth; var total_frames = 4; var frame_count = 0; var timer = setInterval(function()< var new_x = (frame_count * frame_width) * -1; animated_element.style.backgroundPosition = new_x+'px 0px'; if (frame_count < total_frames)< frame_count += 1; >else < window.clearTimeout(timer) >>,400);
window.cancelAnimationFrame()
Метод window.cancelAnimationFrame() останавливает анимацию, запланированную с помощью window.requestAnimationFrame() .
Синтаксис
window.cancelAnimationFrame(requestID);
Параметры
Значение, которое возвращает window.requestAnimationFrame() при запросе callback.
Примеры
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; var start = window.mozAnimationStartTime; // Поддерживается только FF. В других браузерах можно использовать Date.now(). var myReq; function step(timestamp) var progress = timestamp - start; d.style.left = Math.min(progress / 10, 200) + "px"; if (progress 2000) // Важно обновлять requestId при каждом запросе requestAnimationFrame myReq = requestAnimationFrame(step); > > myReq = requestAnimationFrame(step); // остановка с использованием последнего requestId cancelAnimationFrame(myReq);
Спецификации
| Specification |
|---|
| HTML Standard # animationframeprovider-cancelanimationframe |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- window.mozAnimationStartTime
- window.requestAnimationFrame()
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 4 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.