网络动画 API - 如何在关键帧脚本中使用变量？

Question

我有一个简单的动画测试，如下面的代码所示。这只是为了展示我目前遇到的问题。如果我在关键帧脚本中硬编码十六进制颜色值，一切正常。对于我的项目，我需要能够使用变量覆盖颜色值，您可以在关键帧代码中看到我已经用名为 'markerColor' 的 var 替换了硬编码的十六进制值，但是一旦我这样做动画不会运行该订单项。语法可能有问题，但我无法找出解决方案，如果有任何帮助，将不胜感激。

<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
    )

网络动画 API - 如何在关键帧脚本中使用变量？

Web Animations API - How to use a variable inside the keyframes script?

javascript

web-animations-api