如何围绕一个角色制作动画

Posted 2023-02-21

【中文标题】如何围绕一个角色制作动画

【英文标题】：how do I make an animations around one character

【发布时间】：2022-01-16 12:40:30

【问题描述】：

有没有办法让围绕数字的动画与数字量相对应？就像这张图片中的数字 5：

【问题讨论】：

你可能会让我们 JS 计算百分比，然后使用 CSS 掩码只显示圆圈的一部分

【参考方案1】：

你的意思是这样的吗？为浅绿色输入大于 5 的数字，为橙色输入小于 5 的数字。

document.getElementById('applyNum').addEventListener('click', function() 
  document.getElementById('numCon').innerhtml = document.getElementById('numInput').value;

  const v = document.getElementById('numCon').innerHTML;
  if (v >= 5) 
    document.getElementById('numCon').style.borderLeft = '2px solid aqua';
    document.getElementById('numCon').style.borderBottom = '2px solid aqua';
   else if (v < 5) 
    document.getElementById('numCon').style.borderLeft = '2px solid orange';
    document.getElementById('numCon').style.borderBottom = '2px solid orange';
  
)

#numCon 
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 25%;
  left: 5%;
  width: 50px;
  height: 50px;
  font-size: 5vw;
  border-radius: 50%;

<input id='numInput' />
<button id='applyNum'>Apply Number</button>

<div id="numCon"></div>

【讨论】：

好吧，我不是这个意思，但现在这已经足够了。

当我尝试在我的 html 文件中实现它时，它并没有真正起作用，对于 js 来说可能是我的新手。