Element: phương thức animate()

Cú pháp

animate(keyframes, options)

Tham số

keyframes

Là một mảng các đối tượng keyframe, hoặc một đối tượng keyframe có các thuộc tính là mảng các giá trị cần lặp qua. Xem thêm Định dạng Keyframe để biết thêm chi tiết.

options

Là một số nguyên đại diện cho thời lượng hoạt ảnh (tính bằng mili giây), hoặc một Đối tượng chứa một hoặc nhiều thuộc tính thời gian được mô tả trong tham số options của KeyframeEffect() và/hoặc các tùy chọn sau:

id Optional

Một thuộc tính chỉ có trong animate(): Một chuỗi dùng để tham chiếu đến hoạt ảnh.

rangeEnd Optional

Chỉ định điểm kết thúc của phạm vi đính kèm hoạt ảnh dọc theo dòng thời gian của nó, tức là nơi hoạt ảnh sẽ kết thúc trên dòng thời gian. Tương đương JavaScript của thuộc tính CSS animation-range-end. rangeEnd có thể nhận nhiều kiểu giá trị khác nhau như sau:

• Một chuỗi có thể là normal (có nghĩa là không thay đổi phạm vi đính kèm của hoạt ảnh), một <length-percentage> CSS đại diện cho độ lệch, một <timeline-range-name>, hoặc một <timeline-range-name> theo sau là <length-percentage>. Ví dụ: "normal", "entry", hoặc "cover 100%".

  Xem animation-range để biết mô tả chi tiết về các giá trị có sẵn. Cũng có thể tham khảo View Timeline Ranges Visualizer, hiển thị chính xác ý nghĩa của các giá trị khác nhau theo định dạng trực quan dễ hiểu.

• Một đối tượng chứa các thuộc tính rangeName (một chuỗi) và offset (một CSSNumericValue) đại diện cho <timeline-range-name> và <length-percentage>, như mô tả ở trên. Ví dụ: { rangeName: "entry", offset: CSS.percent("100") }.

• Một CSSNumericValue đại diện cho độ lệch, ví dụ: CSS.percent("100").

rangeStart Optional

Chỉ định điểm bắt đầu của phạm vi đính kèm hoạt ảnh dọc theo dòng thời gian của nó, tức là nơi hoạt ảnh sẽ bắt đầu trên dòng thời gian. Tương đương JavaScript của thuộc tính CSS animation-range-start. rangeStart có thể nhận cùng các kiểu giá trị như rangeEnd.

timeline Optional

Một thuộc tính chỉ có trong animate(): AnimationTimeline để liên kết với hoạt ảnh. Mặc định là Document.timeline. Tương đương JavaScript của thuộc tính CSS animation-timeline.

Giá trị trả về

Trả về một Animation.

Ví dụ

Xoay và thu phóng

Trong ví dụ này, chúng ta sử dụng phương thức animate() để xoay và thu phóng một phần tử.

HTML

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

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

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

Kết quả

Demo Down the Rabbit Hole

Trong demo Down the Rabbit Hole (với Web Animation API), chúng ta sử dụng phương thức animate() thuận tiện để ngay lập tức tạo và phát một hoạt ảnh trên phần tử #tunnel để làm nó di chuyển lên trên, vô hạn. Lưu ý mảng các đối tượng được truyền dưới dạng keyframe và khối tùy chọn thời gian.

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

Keyframes to/from ngầm định

Trình duyệt có thể suy ra trạng thái bắt đầu hoặc kết thúc của hoạt ảnh bằng cách sử dụng trạng thái hiện tại. Theo mặc định, nếu chỉ cung cấp một keyframe, nó sẽ được coi là trạng thái kết thúc và trạng thái bắt đầu được suy ra từ kiểu tính toán hiện tại của phần tử. Tuy nhiên, bạn có thể chỉ định offset để cho biết vị trí của keyframe được cung cấp trên dòng thời gian hoạt ảnh.

<div>
  <img
    id="logo"
    src="/shared-assets/images/examples/firefox-logo.svg"
    alt="Firefox logo" />
</div>
<button id="run">Animate - use current as start</button>
<button id="run2">Animate - use current as end</button>
<button id="run3">Animate - use current as both ends</button>

div {
  width: 100%;
}

#logo {
  width: 200px;
  height: 200px;
}

const logo = document.getElementById("logo");
document.getElementById("run").addEventListener("click", () => {
  logo.animate({ transform: "translateX(300px)" }, 1000);
});
document.getElementById("run2").addEventListener("click", () => {
  logo.animate({ transform: "translateX(300px)", offset: 0 }, 1000);
});
document.getElementById("run3").addEventListener("click", () => {
  logo.animate({ transform: "translateX(300px)", offset: 0.5 }, 1000);
});

Chúng ta đã chỉ định một khung duy nhất trong dòng thời gian, và trạng thái bắt đầu và/hoặc kết thúc có thể được điền vào để tạo một hoạt ảnh hoàn chỉnh.

timeline, rangeStart, và rangeEnd

Cách sử dụng điển hình của các thuộc tính timeline, rangeStart, và rangeEnd có thể trông như thế này:

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%",
  },
);

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• Animation
• Element.getAnimations()
• animation-range-end, animation-range-start, animation-timeline
• CSS scroll-driven animations
• Web Animations API