Anime.js backgroundColor дает неожиданные результаты

Question

Anime.js backgroundColor дает неожиданные результаты

1

Поэтому я играл с Anime.js. Я использую этот короткий кусок кода, чтобы попытаться оживить div тег с одной буквой ид. a

anime({
    targets: "#a",
    translateX: 250,
    color: "#fff",
    backgroundColor: "hsl(200, 50%, 50%)",
    loop: true,
    direction: 'alternate',
    easing: 'easeInOutQuad'
});

Проблема в том, что (по крайней мере, для меня в Google Chrome) элемент, кажется, начинается в начале анимации с css background-color of black, даже если он не имеет никакого фонового цвета, определенного в css. Немного копания, кажется, предполагает, что цвет фона по умолчанию для элемента равен rgba (0,0,0,0) и что Anime.js, похоже, не работает при использовании цветов с альфа-каналами. Я думаю, это объясняет, почему анимация начинается с черного. Установка цвета фона для элемента в css, похоже, решает проблему, даже если у нее есть альфа-канал, но альфа-канал никогда не выполняется в анимации.

Но что, если я хочу анимировать из фонового цвета rgba(0,0,0,0) до сплошного цвета? Поиск Google не раскрывает много информации, так как Anime.js является довольно новым. Кто-нибудь знает, каким образом я могу сделать эту работу в Anime.js? Если Anime.js не поддерживает эту функцию, знает ли кто-нибудь другую библиотеку анимации JavaScript? Мне нужна поддержка анимации цветов с альфа-каналами.

Для удобства здесь приведена демо-версия того, что я ударил вместе в быстром CodePen.

Aaron Beaudoin 04 июнь 2017, в 08:27

Источник

Теги:

javascript

css

animation

2 ответа

Ещё вопросы

Gerfried · Answer 1 · 2017-11-23T15-20-00.000Z

Поздний ответ, но сейчас я играю с anime.js и нашел ваш вопрос. Вы можете определить начальное значение для фоновой анимации.

$(document).ready(function() {
  anime({
    targets: ".box",
    translateX: 250,
    color: "#fff",
    backgroundColor: ["hsl(250, 75%, 50%)", "hsl(200, 50%, 50%)"],
    loop: true,
    direction: 'alternate',
    easing: 'easeInOutQuad'
  });
});

div {
  width: 20px;
  height: 20px;
  background: red;
  position: relative;
  left: 0;
}

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Anime.js animate Background Color</h1>
    <div class="box"></div>
  </body>

</html>

Alexios Tsiaparas · Answer 2 · 2017-06-04T04-15-00.000Z

Мне непонятно, поддерживает ли anime.js непрозрачность. Вы можете, однако, настроить JQuery пользователя, с установленным интерфейсом JQuery.

$('#a').animate({ 'background-color': 'rgba(0, 0, 0, 0.7)' },1000);

Вы можете увидеть полный ответ в разделе Как я могу анимировать непрозрачность фона div

Ссылка не работает для меня. Также вы знаете библиотеку с лучшей производительностью, чем jQuery с этой функциональностью?
@AaronBeaudoin Исправлена ссылка, нет, извините, но я не знаю чего-то с лучшей производительностью.
Выглядит круто, но я не могу позволить себе сейчас платить за лицензирование.