javascript - Web 动画 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
    )