keyTimes

Ví dụ

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
      attributeName="cx"
      dur="4s"
      repeatCount="indefinite"
      values="60; 110; 60; 10; 60"
      keyTimes="0; 0.25; 0.5; 0.75; 1" />
    <animate
      attributeName="cy"
      dur="4s"
      repeatCount="indefinite"
      values="10; 60; 110; 60; 10"
      keyTimes="0; 0.25; 0.5; 0.75; 1" />
  </circle>
</svg>

Ghi chú sử dụng

Giá trị của thuộc tính keyTimes là một danh sách các giá trị được ngăn cách bằng dấu chấm phẩy.

Phải có đúng số lượng giá trị trong danh sách keyTimes bằng số lượng giá trị trong danh sách values.

Mỗi giá trị thời gian tiếp theo phải lớn hơn hoặc bằng giá trị thời gian đứng trước nó.

Ý nghĩa của danh sách keyTimes phụ thuộc vào interpolation mode:

• Với hoạt ảnh tuyến tính và spline, giá trị thời gian đầu tiên trong danh sách phải là 0, và giá trị cuối cùng trong danh sách phải là 1. Thời điểm khóa gắn với mỗi giá trị xác định khi nào giá trị đó được đặt; các giá trị được nội suy giữa các thời điểm khóa.
• Với hoạt ảnh rời rạc, giá trị thời gian đầu tiên trong danh sách phải là 0. Thời điểm gắn với mỗi giá trị xác định khi nào giá trị đó được đặt; hàm hoạt ảnh dùng giá trị đó cho đến thời điểm tiếp theo được định nghĩa trong danh sách.

Nếu thuộc tính calcMode được đặt thành paced, thuộc tính keyTimes sẽ bị bỏ qua.

Nếu thời lượng của hoạt ảnh là vô hạn, mọi đặc tả keyTimes sẽ bị bỏ qua.

• Vấn đề với Safari: các giá trị keyTimes nên được phân tách bằng dấu chấm phẩy mà không có khoảng trắng phía trước, ví dụ: keyTimes="0; 0.25; 0.5; 0.75; 1"

Thông số kỹ thuật