元素：animate() 方法

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本中使用。它自以下时间起在浏览器中可用 2020 年 3 月.

该 Element 接口的 animate() 方法是一种快捷方法，它创建一个新的 Animation，将其应用于元素，然后播放动画。它返回创建的 Animation 对象实例。

注意： 元素可以应用多个动画。可以通过调用 Element.getAnimations() 获取影响元素的动画列表。

语法

js
animate(keyframes, options)

参数

关键帧

关键帧对象数组，**或**关键帧对象，其属性是用于迭代的值数组。有关更多详细信息，请参阅 关键帧格式。

选项

**表示动画持续时间（以毫秒为单位）的整数**，**或**包含一个或多个在 KeyframeEffect() 选项参数 中描述的定时属性的对象，以及以下选项

id 可选

animate() 的唯一属性：一个用于引用动画的字符串。

rangeEnd 可选

指定动画在其时间线上的附加范围的结束位置，即动画将在时间线上结束的位置。它是 CSS animation-range-end 属性的 JavaScript 等效项。rangeEnd 可以采用以下几种不同的值类型：

  • 可以是 normal（表示对动画的附加范围不做更改）的字符串，表示偏移量的 CSS <length-percentage>，<timeline-range-name> 或 <timeline-range-name> 后跟 <length-percentage>。例如：
    "normal"
"entry"
"cover 100%"
    有关可用值的详细说明，请参阅 animation-range。还可以查看 查看时间线范围可视化工具，它以易于理解的视觉格式显示了不同值的含义。
  • 包含 rangeName（字符串）和 offset（CSSNumericValue）属性的对象，分别表示 <timeline-range-name> 和 <length-percentage>，如上一条所述。例如：
    js
    {
  rangeName: 'entry',
  offset: CSS.percent('100'),
}
  • 表示偏移量的 CSSNumericValue，例如：
    js
    CSS.percent("100");
rangeStart 可选

指定动画在其时间线上的附加范围的起始位置，即动画将在时间线上开始的位置。它是 CSS animation-range-start 属性的 JavaScript 等效项。rangeStart 可以采用与 rangeEnd 相同的值类型。

timeline 可选

animate() 独有的属性：与动画关联的 AnimationTimeline。默认为 Document.timeline。它是 CSS animation-timeline 属性的 JavaScript 等效项。

返回值

返回一个 Animation。

示例

旋转和缩放

在本例中，我们使用 animate() 方法来旋转和缩放元素。

HTML

html
<div class="newspaper">Spinning newspaper<br />causes dizziness</div>

CSS

css
html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.newspaper {
  padding: 0.5rem;
  text-transform: uppercase;
  text-align: center;
  background-color: white;
  cursor: pointer;
}

JavaScript

js
const newspaperSpinning = [
  { transform: "rotate(0) scale(1)" },
  { transform: "rotate(360deg) scale(0)" },
];

const newspaperTiming = {
  duration: 2000,
  iterations: 1,
};

const newspaper = document.querySelector(".newspaper");

newspaper.addEventListener("click", () => {
  newspaper.animate(newspaperSpinning, newspaperTiming);
});

结果

兔子洞演示

在演示 兔子洞（使用 Web 动画 API） 中，我们使用方便的 animate() 方法立即在 #tunnel 元素上创建并播放动画，使其无限向上流动。请注意作为关键帧传递的对象数组以及计时选项块。

js
document.getElementById("tunnel").animate(
  [
    // keyframes
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
  {
    // timing options
    duration: 1000,
    iterations: Infinity,
  },
);

隐式到/从关键帧

在较新的浏览器版本中，您可以仅为动画设置开始或结束状态（即单个关键帧），如果浏览器能够做到，它将推断动画的另一端。例如，考虑 这个简单的动画——关键帧对象如下所示：

js
let rotate360 = [{ transform: "rotate(360deg)" }];

我们只指定了动画的结束状态，而开始状态是隐含的。

timeline、rangeStart 和 rangeEnd

timeline、rangeStart 和 rangeEnd 属性的典型用法可能如下所示：

js
const img = document.querySelector("img");

const timeline = new ViewTimeline({
  subject: img,
  axis: "block",
});

img.animate(
  {
    opacity: [0, 1],
    transform: ["scaleX(0)", "scaleX(1)"],
  },
  {
    fill: "both",
    duration: 1,
    timeline,
    rangeStart: "cover 0%",
    rangeEnd: "cover 100%",
  },
);

规范

规范
Web 动画
# dom-animatable-animate

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅