Web Animations API -如何在关键帧脚本中使用变量？

Question

我有一个简单的动画测试，如下面的代码所示。这只是为了演示我目前遇到的问题。如果我在关键帧脚本中硬编码十六进制颜色值，一切都会正常工作。对于我的项目，我需要能够使用变量覆盖颜色值，你可以在关键帧代码中看到，我用一个名为'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
    )

​