Độ mờ hoạt ảnh SVG trên vòng

Question

Tôi muốn tăng độ mờ của đường dẫn svg để đi từ 0 đến 100 trở lại 0 và 100 trên vòng lặp liên tục.

Cho đến nay tôi có thể lấy nó để animate 0-100 nhưng không trở lại một lần nữa,

Bất kỳ ý tưởng?

Cảm ơn

Answer 1

Bạn có hai hoạt ảnh riêng biệt - một cho tăng độ mờ và một cho ảnh giảm dần. Mỗi người bắt đầu khi người kia kết thúc, nhưng người đầu tiên cũng bắt đầu lúc 0 giây. Dưới đây là một ví dụ cho một rect:

<rect x="10" y="10" width="20" height="20"> 
    <animate id="animation1" 
      attributeName="opacity" 
      from="0" to="1" dur="1s" 
      begin="0s;animation2.end" /> 
    <animate id="animation2" 
      attributeName="opacity" 
      from="1" to="0" dur="1s" 
      begin="animation1.end" /> 
</rect> 

Answer 2

Bạn có thể làm động bất kỳ số lượng các giá trị sử dụng thuộc tính values, như thế này:

<rect x="10" y="10" width="20" height="20"> 
    <animate attributeName="opacity" 
      values="0;1;0" dur="1s" 
      repeatCount="indefinite"/> 
</rect> 

Điều đó sẽ động từ opacity 0 đến opacity 1 (100%), và sau đó quay lại 0 lần nữa, trong khoảng thời gian 1 giây.