时间戳

首页 > 解决方案 > javascript/jquery .animate() 色相旋转

javascript - javascript/jquery .animate() 色相旋转

问题描述

你可以使用 .animate() 来动画色相旋转吗？如果没有，是否有可以在此函数中设置动画的属性列表。此链接：https ://api.jquery.com/animate 暗示 .animate() 只是一个 jQuery 函数，但它在我的项目上工作而不使用 jQuery。这是否已被 javascript 所吸收，以及如何通过 javascript 操作 css hue-rotate。我在谷歌或堆栈交换上找不到很多对此的引用。

我尝试了许多 hueRotate 的组合，使其成为对象、json 并通过 `` 创建字符串文字，但它们似乎都不起作用。

    Info.style.filter = ('hueRotate:240deg;');
    Info.style.filter = `hue-rotate(240deg);`
    Info.style.filter = {(hue-rotate(240deg)};
    Info.style.filter.hueRotate = "240deg";

我已经在 .animate 和 requestAnimationFrame 内外尝试了几十种组合，但没有一个有效。它可能真的很简单。

标签： javascriptjquerycssanimationhue

解决方案

是的，网络动画也可以为过滤器设置动画，就像任何可动画的 CSS 属性一样。您只需指定初始值和最终值。

document.getElementById("box").animate(
  {
    filter: ['hue-rotate(0deg)', 'hue-rotate(360deg)']
  },
  {
    duration: 2500,
    iterations: Infinity
  }
);
#box {
  background: linear-gradient( to right, purple, orange); 
  width: 200px;
  height: 200px;
}
<div id="box"></div>

那么它实际上可以用许多不同的语法编写......

推荐阅读