API веб-анимации - Как использовать переменную внутри скрипта ключевых кадров?

Question

У меня есть простой тест анимации, показанный в коде ниже. Это просто для того, чтобы продемонстрировать проблему, которая у меня сейчас есть. Если я жестко закодирую шестнадцатеричные значения цвета в скрипте ключевых кадров, все работает нормально. Для моего проекта мне нужно иметь возможность переопределить значения цвета с помощью переменной, вы можете увидеть в коде ключевых кадров, что я заменил жестко закодированное значение Hex на var с именем 'markerColor', но как только я это сделаю, анимация не запуститсяэта позиция. Вероятно, что-то не так с синтаксисом, но я не могу понять, какое решение, любая помощь будет большой благодарностью.

<header>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js"> 
 </script>
</header>


<!-- Set up a target to animate -->
<div class="text-light" style="width: 150px;" id="testDivElement">Hello world!</div>

<script>

 var markerColor;
 var markerAlarmColor;


// THIS IS COMMENTED OT BUT DOES WORK
//// assign keyframes
//var marker1keyframes = [
//    {
//        backgroundColor: '#004A7F',
//        boxShadow: '0 0 10px #004A7F'
//    },
//    {
//        backgroundColor: '#00cc00',
//        boxShadow: '0 0 30px #00cc00'
//    },
//    {
//        backgroundColor: '#004A7F',
//        boxShadow: '0 0 10px #004A7F'
//    }
//];

// THIS IS PART I'M HAVING AN ISSUE WITH
// assign keyframes
var marker1keyframes = [
    {
        backgroundColor: '' + markerColor + '', // not working 
        boxShadow: '0 0 10px #004A7F'
    },
    {
        backgroundColor: '#00cc00',
        boxShadow: '0 0 30px #00cc00'
    },
    {
        backgroundColor: '' + markerColor + '', // not working
        boxShadow: '0 0 10px #004A7F'
    }
];

// assign timings
var marker1timing = {
    duration: 1000,
    fill: "both",
    easing: "ease-in-out",
    iterations: 10,
};

markerColor = "#E6E600";
markerAlarmColor = "#E6E600";

var test = document.getElementById("testDivElement").animate(
        marker1keyframes,
        marker1timing
    )

Answer 1

Оказывается, я должен был объявить значения переменных перед сценарием ключевых кадров, в ответе ниже переменные были перемещены перед сценарием ключевых кадров, теперь это работает для меня.

 <script>

var markerColor = "#E6E600";
var markerAlarmColor = "#E6E600";


// assign keyframes
var marker1keyframes = [
    {
        backgroundColor: '' + markerColor + '',  
        boxShadow: '0 0 10px #004A7F'
    },
    {
        backgroundColor: '#00cc00',
        boxShadow: '0 0 30px #00cc00'
    },
    {
        backgroundColor: '' + markerColor + '', 
        boxShadow: '0 0 10px #004A7F'
    }
];

// assign timings
var marker1timing = {
    duration: 1000,
    fill: "both",
    easing: "ease-in-out",
    iterations: 10,
};

var test = document.getElementById("testDivElement").animate(
        marker1keyframes,
        marker1timing
    )