Tạo và Animate Polygons SVG

Sep 14, 2025

Cách

Trong hướng dẫn này, chúng ta sẽ tạo ra một loạt các hình ảnh từ các hình tam giác SVG và thiết lập sự chuyển đổi hoạt hình từ hình ảnh này sang hình ảnh khác khi nhấp chuột khác. Nó sẽ trông giống như Khuôn mặt của quyền lực trang mạng. Những hình ảnh động này thực sự có thể gây thêm tiền lãi cho một trang web, đặc biệt là một trang đích , cũng như tăng cường Kinh nghiệm người dùng . Nếu bạn có một trang web phức tạp để duy trì, bạn sẽ cần một siêu web hosting dịch vụ. Xây dựng một cái gì đó ít phức tạp hơn? A. người tạo ra trang web có thể làm công việc

Để khởi động, chúng tôi sẽ bắt đầu với hai mảng: một với các giá trị chúng tôi hoạt hình và một với các giá trị chúng tôi hoạt hình từ đó. Mỗi khi một liên kết được nhấp, chúng ta sẽ tìm thấy SVG phù hợp với href. của liên kết đó và nhận được điểm thuộc tính của từng đa giác trong SVG cụ thể đó.

Chúng ta sẽ trích xuất tất cả các tọa độ trong điểm Thuộc tính, lấy màu tô của đa giác và sau đó thêm các màu này dưới dạng thuộc tính của một đối tượng. Sau đó, chúng tôi sẽ thêm tất cả các đối tượng này vào một trong hai mảng: đến mảng.

Chúng tôi sẽ sử dụng TweenMax để làm động các giá trị của từ mảng đến các giá trị của đến mảng. Khi hoạt hình hoàn tất, chúng tôi sẽ đặt đến mảng để trở thành người mới từ mảng.

Trên lần chạy đầu tiên, từ Mảng sẽ chứa tất cả các giá trị điểm và tất cả các màu tô màu của đa giác hiện có thể nhìn thấy.

 & lt; a href = "# nat" & gt; nat & lt; / a & gt;
& lt; a href = "# bwl" & gt; bwl & lt; / a & gt;
& lt; a href = "# kevin" & gt; kevin & lt; / a & gt;

& lt; svg class = "svg-giữ" & gt;
  Đa giác cho #nat đi đây
& lt; / svg & gt;

& lt; svg id = "nat" class = "ẩn" & gt;
 Đa giác cho #nat đi đây
& lt; / svg & gt;

& lt; svg id = "bwl" class = "ẩn" & gt;
 Đa giác cho #bwl vào đây
& lt; / svg & gt;
& lt; svg id = "kevin" class = "ẩn" & gt;
 Đa giác cho #kevin đi đây
& lt; / svg & gt;

01. Chuyển đổi hình ảnh sang đa giác

two images before and after Primitive — Làm thế nào hình ảnh sẽ trông trước và sau khi được chạy qua nguyên thủy

Bước đầu tiên là thực sự làm cho hình ảnh. Đối với điều này tôi đã sử dụng một công cụ gọi là Nguyên thủy (kiểm tra Github repo. ). Các hình ảnh được sử dụng trong hướng dẫn là hình ảnh cá nhân của một vài người bạn.

Chạy hình ảnh đã chọn của bạn thông qua tiện ích nguyên thủy bằng dòng lệnh:

 nguyên thủy -i input.jpg -o đầu ra.svg -n 250 -m 1

-n 250. Chỉ định 250 đa giác, -m 1. Chỉ định một hình tam giác, và -Tôi nhập.jpg -o đầu ra.svg là đầu vào và đầu ra. Điều quan trọng là tất cả các SVG đều có cùng số lượng đa giác và cùng hình dạng. Đầu ra.svg. sẽ là một tập hợp các đa giác.

02. Dán SVG của bạn vào HTML

Sau khi tạo SVGs dán chúng vào phần thân của HTML. Sao chép SVG đầu tiên và cung cấp một trong các bản sao lớp .svg-Chủ .

Các .svg-Chủ sẽ là người duy nhất có thể nhìn thấy về mặt kỹ thuật; Nó sẽ là chủ sở hữu cho tất cả các đa giác hoạt hình trong và ngoài nó. Cung cấp tất cả các SVG ngoại trừ người giữ lớp ẩn và An. Tôi với một cái tên duy nhất. Điều này sẽ phù hợp với href. trong các liên kết. Các SVG ẩn sẽ bị ẩn với không trưng bày; . Điều quan trọng là đảm bảo href. của mỗi liên kết phù hợp với Tôi của SVG tương ứng của nó.

Sau đó khai báo các biến:

 Đặt topolygonarray = [];
hãy để từpolygonarray = [];

03. Trích xuất tọa độ đa giác

Bây giờ chúng ta phải chạy qua từng đa giác của chúng tôi và lấy tọa độ trong thuộc tính điểm. Chúng ta có thể làm điều này bằng Regex:

 Const getCoordinates = (đa giác) = & gt; Đồn là
  trả về polygon.getattribution ("điểm"). khớp (/ (-? [0-9] [0-9 \.] *), (-? [0-9] [0-9 \.] *) \ ( -? [0-9] [0-9 \.] *), (-? [0-9] [0-9 \.] *) \ (-? [0-9] [0-9 \.] *), (-? [0-9] [0-9 \.] *) /);
};

04. Cập nhật mảng đa giác

image saved as an SVG with text — Được lưu dưới dạng SVG, tất cả các hình tam giác trở thành yếu tố

Mỗi khi nhấp vào liên kết, chúng tôi sẽ chạy một hàm lấy HREF của liên kết được nhấp dưới dạng đối số và tìm SVG phù hợp, tải các giá trị điểm, hoạt hình và cập nhật từ mảng.

 Const UpdatePolyGonArrays = (idtoanimateto) = & gt; Đồn là
  topolygonArray = createpolygonpointObject (document.getelementById (idtoanimateto) .QuerySelectorall ("đa giác"));

  animatepolygons ();

  frompolygonarray = topolygonarray;
}

Chức năng này gọi hai chức năng khác - createpolygonpointsObject. và animatepolygons. .

createpolygonpointsObject. Chuyển đổi tất cả các phần tử đa giác thành các đối tượng mà chúng ta có thể làm động các giá trị và animatepolygons. hoạt hình các đa giác bên trong .svg-Chủ .

 Const createpolygonpointObject = (đa giác) = & gt; Đồn là
  Const polygonsarray = [];

  đa giác.foreach ((đa giác, i) = & gt; {
    Const tọa độ = getCoordinates (đa giác);

    polygonsarray.push ({
      điền: polygon.getattribution ("điền"),
      một: tọa độ ,
      hai: tọa độ ,
      ba: tọa độ ,
      Bốn: tọa độ ,
      năm: tọa độ ,
      Sáu: tọa độ 
    });
  });

  trả lại polygonsarray;
}

Điều này sử dụng chúng ta getcoordinates. Chức năng để có được tất cả các tọa độ trong thuộc tính điểm và tạo một đối tượng với mỗi tọa độ và điền. Nó trả về một mảng các đối tượng. Tôi quyết định làm cho chúng đối tượng vì loại dữ liệu đó dường như dễ dàng hơn khi bạn hoạt động rất nhiều giá trị cùng một lúc.

05. Animate đa giác

Two images made up of SVG polygons — Trong phiên bản cuối cùng, đa giác SVG sẽ chuyển đổi thông qua một hình ảnh động

Hãy sử dụng TweenMax để làm động các đa giác.

 Const AnimatePolyGons = () = & GT; Đồn là
  Const Polygons = document.QuerySelector (". SVG-Chủ"). Quy thảoSelectorall ("đa giác");
  frompolygonarray = createpolygonpointObject (đa giác);

  frompolygonarray.foreach ((obj, i) = & gt; {
    Tweenmax.to (obj, 1, {
      một: topolygonarray [i] .one,
      hai: topolygonarray [i] .two,
      ba: topolygonarray [i] .three,
      Bốn: topolygonarray [i] .four,
      năm: topolygonarray [i] .five,
      Sáu: topolygonarray [i] .six,
      Dễ dàng: Power3.Eoutout,
      onUpdate: () = & gt;
      Đồn là
        Đa giác [i] .setattribution ("Điểm", `$ {obj.one}, $ {obj.two} $ {Obj.three}, $ {obj.four} $ {obj.five}, $ {obj.six } `);
      Không thể
    });
  });
}

Trên mọi khung hình của hình ảnh động, vòng lặp này hoạt hình thuộc tính điểm của các đa giác hiện có thể nhìn thấy trong .svg-Chủ đến các giá trị mới được đặt ở trên. Các onupdate. phương pháp in. Tweenmax.to. được gọi là mỗi khi cập nhật hình ảnh động, vì vậy ở đây nó sẽ chạy trên mọi thay đổi trong các giá trị của obj.one. Cái gì obj.two. Cái gì obj.three. , và như thế. Bằng cách này, các điểm giá trị animate và hình dạng hình dạng để có tọa độ khác nhau.

Tiếp theo chúng ta có thể làm động điền vào. Đối với mỗi đa giác trong .svg-Chủ , đặt điền vào điền vào Topolygonarray. đó là trong cùng một chỉ số.

 Polygons.foreach ((đa giác, i) = & gt; {
    Const tocolor = topolygonArray [i] .fill;

    Tweenlite.to (đa giác, 1, {
      Điền: Tôc,
      Dễ dàng: Power3.EeOut.
    });
});

Bây giờ các đa giác sẽ làm động các tọa độ của chúng và màu tô của chúng như mong đợi. Và bạn đã hoàn tất! Bạn muốn lưu các trang của bạn? Xuất chúng dưới dạng PDF và thả chúng vào lưu trữ đám mây .

Để cải thiện kỹ năng thiết kế web của bạn hơn nữa, hãy đến hội nghị của chúng tôi tạo ra và trải nghiệm một lịch trình đóng gói của loa, hội thảo hàng đầu trong ngành và cơ hội kết nối có giá trị. Đừng bỏ lỡ nó! Nhận vé tạo của bạn ngay bây giờ .

Đọc thêm:

Hướng dẫn đầy đủ về SVG
Animate svg với javascript
30 công cụ thiết kế web tốt nhất để tăng tốc độ công việc của bạn

Tạo và Animate Polygons SVG

01. Chuyển đổi hình ảnh sang đa giác

02. Dán SVG của bạn vào HTML

03. Trích xuất tọa độ đa giác

04. Cập nhật mảng đa giác

05. Animate đa giác

Cách - Các bài báo phổ biến nhất

Thay đổi màu Photoshop: 2 công cụ bạn cần biết

Hiểu xử lý ngôn ngữ tự nhiên

Cách tạo biểu tượng ứng dụng trong Illustrator

Xuất sau hoạt hình hiệu ứng sang HTML5

Chuẩn bị một bảng để vẽ trong 3 bước đơn giản

Cách xây dựng các trang web nhanh hơn

Hướng dẫn Pro để tạo kết cấu 3D

Lời khuyên hàng đầu để vẽ tay biểu cảm

Thể loại