0 / 0 / 0
Регистрация: 16.05.2015
Сообщений: 2
1

Сочетание animation и async/await

01.11.2022, 11:45. Показов 622. Ответов 0

Author24 — интернет-сервис помощи студентам
Задача в целом простая, нужен цикл:
1. Нарисовать нечто на канве
2. Сделать fade in - fade out
3. К п.1

Все операции должны быть сделаны через async/await. Во-первых, это учебный проект, так надо.
Во-вторых, это важно. В примере ниже в качестве рисования использована просто заливка.
Но в проекте это будет сложная рандомная фигура, создание которой занимает неопределенное время.
И не хотелось явно задавать время css animation через setTimeout. Анимация задана в style, и все.
Главный цикл должен дождаться ее выполнения.
Итак, вот код на самом простом примере:

CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.fader {
    animation-name: myFader;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-iteration-count: 2;
}
 
@keyframes myFader {
  0% {opacity: 0;}
    70% {opacity: 1;}
  100% {opacity: 1;}
JS:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const draw = () => {
    return new Promise(resolve => 
        {
            ctx.clearRect(0, 0, cnv.width, cnv.height); 
            ctx.fillStyle = 'green';
            ctx.fillRect(0, 0, cnv.width, cnv.height);
            resolve('Done draw');
        });
}
 
const fadeInOut = () => {
    return new Promise(resolve => {
        cnv.classList.toggle('fader');  
        cnv.onanimationend = () => {
            cnv.classList.remove('fader');
            resolve('Done fade');
        }
    });
}
 
async function animate() {
    while (isAnimate) {
        let info = await draw();
        console.log(info);
        info = await fadeInOut();
        console.log(info);
    }
}
 
 
let cnv = document.querySelector('canvas');
let ctx = cnv.getContext('2d');
let isAnimate   = true;
cnv.width  = window.innerWidth;
cnv.height = window.innerHeight;
animate();
Почему цикл выполняется только один раз??
Я помню, что делал как-то по-другому, и все работало.
Но подход через onanimationend показался более четким. А теперь,
после первого переключения класса анимация не запускается!
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
01.11.2022, 11:45
Ответы с готовыми решениями:

ASYNC/AWAIT return value
Здравствуйте! Объясните, пожалуйста, почему код мой код возвращает мне промис, а не данные? ...

Асинхронные функции async/await
Начал читать про async function Пытаюсь запустить пример с сайта javascript.ru Не работает код в...

Знакомство с промисами и async await
Начал изучать промисы и встретилась статья, где пишут на синтаксисе es6 используя then, и синтаксис...

Синхронное выполнение кода (Async/await)
Данный код возвращает результат вида: 1 3 4 2 Как мне получить такой результат используя...

Node v7.9 async/await не работает. Что не так?
Всем привет. Использую node 7.9 и express. Вот код как пример: function mysql_execute(sql,...

0
01.11.2022, 11:45
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.11.2022, 11:45
Помогаю со студенческими работами здесь

Vue ошибки при использовании Async Await
Добрый день. Начал пробовать вливаться в VUE. Пишу приложение в котором необходимо проходить...

Как можно переписать этот метод на async/await?
как можно переписать этот метод на async/await const namesArr = ; function returnNull(err) {...

Работа с асинхронным кодом без использования Promise и async/await
Привет. Я новичок в JS, поэтому вопрос может быть довольно простой, но к сожалению нагуглить нужный...

Приведите пожалуйста пример простой программы с использованием callbacks и потом переписану под async,await
Приведите пожалуйста пример простой программы с использованием callbacks и потом переписану под...

Требуется переписать данный код, который использует then и catch, в код, который использует исключительно async await
Требуется переписать данный код, который использует then и catch, в код, который использует...

Как корректно заменить async: false на async: true
Проблема в том, что данный код устарел, блокирует браузер на время выполнения скрипта и выдает...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru