Tạo hoạt ảnh nhiều lớp bằng SVG. SVG cho thiết bị di động
Từ lâu, chúng tôi đã hứa sẽ làm một video về hoạt ảnh của các phần tử SVG trên các trang, nhưng không hiểu sao nó chưa bao giờ thành công. Cuối cùng, hôm nay chúng tôi rất vui được giới thiệu với bạn video đầu tiên trong loạt video, trong đó chúng tôi sẽ cho bạn biết về các tùy chọn hoạt ảnh SVG: sử dụng CSS, SMIL và JavaScript (sử dụng Snap.svg làm ví dụ).
Trên thực tế, video này cũng giống như Mistrals. Không có trường hợp nào để ghi lại. Chà, bây giờ cuối cùng nó cũng đã thành công.
Hoạt ảnh SVGHãy thử một lần nữa để kết hợp mọi thứ lại với nhau bằng các liên kết. Có ba cách để tạo hiệu ứng động cho các phần tử SVG trên một trang, hai trong số đó cũng áp dụng cho phần tử HTML. Tất nhiên, tôi đang nói về CSS và Hoạt ảnh JavaScript. Nhưng đối với SVG, bạn cũng có thể sử dụng hoạt ảnh SMIL (Ngôn ngữ tích hợp đa phương tiện được đồng bộ hóa).
hoạt hình SMILĐây là một công nghệ rất thú vị nếu chúng ta cần tạo hiệu ứng động cho các đường dẫn và đồng thời lưu trữ tất cả trong một tệp SVG. Đúng, Hoạt ảnh CSS cũng có thể được đưa vào một tệp, nhưng với sự trợ giúp của chúng, bạn không thể tạo hiệu ứng động cho thuộc tính d của đường dẫn, vì vậy SMIL hóa ra còn hơn thế nữa công nghệ thú vị. Trên thực tế, JavaScript cũng có thể được đưa trực tiếp vào tệp SVG, nhưng việc hỗ trợ trình duyệt hơi khác một chút, vì vậy bạn cần suy nghĩ về nội dung và cách sử dụng.
SMIL đã được hỗ trợ trong tất cả các trình duyệt từ thời xa xưa (kể từ phiên bản trước), ngoại trừ trình duyệt web IE, hiện chưa hỗ trợ những hoạt ảnh này.
Hoạt ảnh CSSMọi thứ ở đây đều rất rõ ràng, từ lâu chúng ta đã quen với việc sử dụng CSS cho các hoạt ảnh nhỏ của các phần tử HTML. Điều tương tự cũng có thể được thực hiện với SVG: hầu hết các thuộc tính đều có thể hoạt hình và hỗ trợ trình duyệt tốt hơn nhiều. Chà, bởi vì ít nhất Internet Exporer 10 đã biết về một hiện tượng như hoạt ảnh CSS.
Hoạt ảnh JavaScriptGiải pháp đáng tin cậy và thuận tiện nhất, như mọi khi, là JavaScript, không có cách nào thoát khỏi điều này. Khi làm việc với các giao diện, đây là lựa chọn duy nhất để viết kịch bản cho một cái gì đó. May mắn thay, đã có khá nhiều thư viện để làm việc với SVG.
Một số thậm chí còn bao gồm khả năng hoạt hình, chẳng hạn như Snap.svg. Tôi muốn giới thiệu thư viện này cho mọi người, mặc dù nhiều người đã quen với việc làm việc với Velocity.js, nhưng cách tiếp cận này cũng có quyền tồn tại.
Một trong những cách tốt nhấtđồ họa trình bày trực tuyến có thể mở rộng Đồ họa vector. Điều này là nhờ SVG có thể thích ứng với mọi kích thước màn hình mà không làm giảm chất lượng.
Snap.svg là gì?
Snap.svg là Thư viện JavaScript, nhằm mục đích giúp các nhà phát triển web cung cấp các khả năng SVG nâng cao cho web. Thư viện này có thể tải, tạo hoạt ảnh và thậm chí tạo đồ họa SVG trực tiếp trong trình duyệt. Snap được tạo ra bởi Dmitry Baranovsky, người cũng đã tạo ra Raphael, nhưng không giống như anh ấy, thư viện nàyđược thực hiện để hỗ trợ hầu hết các trình duyệt hiện đại.
Tạo đồ họa SVG đơn giản
Khi bạn đã tải xuống thư viện và đưa nó vào trang của mình, điều đầu tiên bạn cần làm là tạo phần tử HTML SVG:
Sau đó, xác nhận thư viện Snap:
Var s = Snap();
Bằng cách bỏ qua các tham số bề mặt của bản vẽ của chúng ta, nó sẽ tự động có kích thước 100% x 100%, nhưng nếu bạn muốn chỉ định chiều rộng và chiều cao cụ thể, bạn có thể làm như sau:
Var vòng tròn = s.circle(200, 200, 100);
Mã này tạo một vòng tròn bán kính 100px đơn giản được đặt cách 200px từ phía trên và bên trái trang của chúng tôi.
Nền của phần tô biểu mẫu có màu đen theo mặc định, nhưng chúng ta có thể thay đổi nó, cùng với độ rộng của các nét, bằng cách sử dụng phương thức attr:
Circle.attr(( fill: "#6A8EAB", đột quỵ: "#fff", đột quỵWidth: 3 ));
Tất nhiên, chúng ta có thể tạo các hình dạng khác bằng Snap, chẳng hạn như hình chữ nhật:
Var r = s.orth(100, 100, 75, 75, 5);
Mã này tạo một hình chữ nhật 100px ở trên cùng và bên trái của khu vực làm việc, với chiều rộng và chiều cao là 75px và bán kính đường viền là 5px.
Chúng ta cũng có thể thêm văn bản:
Var t = s.text(50, 50, "WebDesignMagazine");
Bạn có thể thêm những thứ như đa giác, hình elip và chuyển màu. Nếu chúng ta có nhiều hơn một phần tử trên bề mặt bản vẽ thì Snap cho phép chúng ta nhóm chúng lại như sau:
Var vòng tròn = s.group(s.circle(100, 150, 70), s.circle(200, 150, 70));
Snap cho phép tạo hoạt ảnh cho các phần tử của chúng ta:
Circle.animate((r: 50), 2000);
Một trong những điều nhất lợi ích tuyệt vời Tính năng của Snap là khả năng tải các SVG hiện có:
Snap.load("image.svg", function (f) ( // Code ));
Mã này nhập khẩu Tệp SVG, nhưng để đặt chúng trên bảng vẽ, chúng ta phải thêm nó:
Snap.load("image.svg", function (f) ( g = f.select("g"); s.append(g); ));
Bây giờ chúng ta đã có nó trên bảng vẽ và có thể làm cho nó có thể kéo được:
G.drag();
Và, giống như các yếu tố chúng ta đã thấy trước đó, chúng ta cũng có thể thay đổi các thuộc tính của hình ảnh như màu tô hoặc nét. Nhưng điều này phải được thực hiện trước khi hình ảnh được thêm vào bảng:
F.select("đa giác").attr((điền: "#FF0000"));
Như bạn có thể thấy, phương thức select cho phép chúng ta tìm kiếm thông qua các phần tử. TRONG trong trường hợp này, chúng tôi tìm kiếm bất kỳ đa giác nào có nền đen và sau đó thay đổi chúng thành màu đỏ.
Bạn đã sử dụng thư viện này trong các dự án của mình chưa? Nếu có, hãy để lại trong phần bình luận - sẽ rất thú vị khi xem phiên bản hoàn thiện.
Chuyển đổi cao!
Chuẩn bị SVG để sử dụng trên web là một quá trình rất đơn giản, không khó hơn xuất JPEG hoặc PNG. Sử dụng bất kỳ trình chỉnh sửa đồ họa nào bạn quen thuộc (Illustrator, Sketch, Inkscape [miễn phí], v.v. [hoặc thậm chí Photoshop nếu bạn đang sử dụng các lớp hình dạng]) ở kích thước hình ảnh bạn định sử dụng. Tôi thường làm việc trong Illustrator, vì vậy tôi sẽ giải thích một số cách chuẩn bị tệp trong chương trình đó, nhưng chúng thường áp dụng cho bất kỳ chương trình nào. Bạn có thể muốn chuyển đổi văn bản của mình thành các đường cong, vì phông chữ rất có thể sẽ hiển thị không chính xác, trừ khi bạn định tạo kiểu cho chúng bằng phông chữ web được sử dụng trên trang (điều này là có thể!). Bạn cũng không nên chuyển đổi tất cả các đối tượng thành các hình dạng đơn lẻ, đặc biệt nếu bạn có các nét cần thao tác trên trang, đặc biệt vì việc chuyển đổi các đối tượng thường không làm giảm kích thước tệp. Bất kỳ tên nào được gán cho nhóm hoặc lớp sẽ được thêm vào SVG dưới dạng ID phần tử. Điều này khá thuận tiện cho việc tạo kiểu nhưng sẽ làm tăng kích thước tổng thể tài liệu.
Trước khi xuất, bạn cần kiểm tra xem tất cả hình ảnh có nằm trong lưới pixel số nguyên hay không (nghĩa là không phải 23,3px × 86,8px). Nếu không, rất có thể hình ảnh sẽ không đủ rõ nét và một phần hình ảnh sẽ bị cắt bỏ. Trong Illustrator, điều này có thể được thực hiện như sau: Object > Artboards > Fit to Artwork Bounds. Sau đó nhấp vào lưu dưới dạng và chọn SVG và để cài đặt mặc định. Có một chút tối ưu hóa mà chúng tôi có thể thực hiện ở đây, nhưng nó thực sự không đáng giá vì chúng tôi sẽ sử dụng nhiều kỹ thuật nâng cao khác nhau sau này, vì vậy bây giờ chúng tôi sẽ không lãng phí thời gian cho những chỉnh sửa đó.
Thủ thuật để giảm kích thước tập tin.(Xem tối ưu hóa)
Để đạt được kích thước nhỏ nhất SVG, sẽ hợp lý nếu loại bỏ mọi thứ không cần thiết khỏi nó. Nổi tiếng nhất và chương trình hữu ích(ít nhất là tôi nghĩ vậy) để xử lý SVG, đó là SVGO. Cô ấy loại bỏ tất cả mã yêu cầu. Nhưng! Hãy cẩn thận khi sử dụng chương trình này nếu bạn định thao tác SVG khi Trợ giúp CSS/ JS , vì nó có thể dọn sạch mã quá nhiều, gây khó khăn cho những thay đổi trong tương lai. Sự tiện lợi của SVGO còn là nó có thể được đưa vào quá trình lắp ráp tự động project, nhưng bạn cũng có thể sử dụng GUI nếu muốn.
Hiểu chi tiết hơn với loại bỏ chính xác mọi thứ không cần thiết, chúng ta có thể làm việc khác trong biên tập đồ họa. Trước tiên, bạn cần đảm bảo rằng bạn sử dụng càng ít đường dẫn/hình dạng càng tốt, cũng như các điểm trên các đường dẫn đó. Bạn có thể kết hợp và đơn giản hóa mọi thứ có thể đơn giản hóa và xóa mọi thứ điểm không cần thiết. Illustrator có plugin VectorScribe với Công cụ Smart Remove Brush Tool sẽ giúp bạn loại bỏ các điểm trong khi vẫn giữ nguyên hình dạng tổng thể.
Tối ưu hóa sơ bộ
Smart Remove Brush Tool loại bỏ điểm
Tiếp theo chúng ta sẽ phóng to hình ảnh. Trong Illustrator, thật thuận tiện khi bật View > Pixel Preview với lưới pixel và kiểm tra xem các đường viền được định vị như thế nào. Sẽ mất một chút thời gian để đặt các đường viền trên lưới, nhưng nỗ lực sẽ được đền đáp và mang lại kết quả hiển thị rõ ràng hơn (tốt nhất là bạn nên chú ý đến điều này trước).
Điểm ngoài lưới
Căn chỉnh vào lưới
Nếu có hai hoặc nhiều đối tượng cần căn chỉnh thì nên loại bỏ tất cả các phần chồng chéo không cần thiết. Đôi khi, ngay cả khi các đường viền được căn chỉnh cẩn thận, vẫn có thể nhìn thấy một đường trắng mỏng. Để ngăn chặn điều này, bạn có thể chồng lên nhau một chút các đối tượng nơi chúng chồng lên nhau. Quan trọng: trong SVG chỉ số z là một trật tự nhất định, điều này phụ thuộc vào đối tượng bên dưới, vì vậy bạn nên đặt đối tượng trên cùng ở cuối tệp trong mã.
Và cuối cùng, điều cuối cùng nhưng không kém phần quan trọng, một điều thường bị lãng quên là bật tính năng nén gzip của SVG trên trang web của bạn trong tệp .htaccess.
AddType image/svg+xml svg svgz AddOutputFilterByType DEFLATE "image/svg+xml" \ "text/css" \ "text/html" \ "text/javascript" ... v.v.
Để làm ví dụ về mức độ hiệu quả của kỹ thuật này, tôi sẽ lấy logo Breaking Borders ban đầu và tối ưu hóa nó theo cách này: tăng kích thước lên mức cần thiết; Tôi sẽ sắp xếp các đường nét theo thứ tự; Tôi sẽ xóa càng nhiều điểm càng tốt; di chuyển các điểm theo pixel nguyên; Tôi sẽ di chuyển tất cả các vùng chồng chéo và gửi tất cả đến SVGO.
Bản gốc: 1.413b Sau khi tối ưu hóa: 409bKết quả là kích thước tệp trở nên nhỏ hơn ~71% (và nhỏ hơn ~83% khi được nén)
Snap.svg là một thư viện JavaScript cho phép bạn tạo và quản lý đồ họa SVG một cách nhanh chóng trong trình duyệt hiện đại, nhưng tất cả IE dưới IE9 đều bị tước đoạt hạnh phúc. Thư viện này là sự kế thừa của một thư viện khác là Raphaël, được tạo bởi Dmitry Baranovsky - thư viện JavaScript phổ biến nhất để làm việc với SVG vào thời điểm đó. Raphäel là gì?Raphaël là một thư viện tuyệt vời được phát hành vào năm 2008, chiến thắng lớnđã trở thành hỗ trợ cho trình duyệt IE5.5 trở lên. Tuy nhiên, khả năng hỗ trợ cho hầu hết các trình duyệt bị hạn chế và có nghĩa là bạn không thể triển khai những phát triển mới nhất mà thay vào đó phải dựa vào bộ chung Các hàm SVGSau một thời gian, cộng đồng phát triển thư viện Raphäel.js chia thành hai phần: một nhóm dựa vào khả năng tương thích giữa nhiều trình duyệt và nhóm còn lại dựa vào việc tạo các phần tử SVG chính thức. Nhóm cuối cùng cần thiết Những thay đổi lớnđể hỗ trợ mọi người Khả năng SVG, điều mà Raphäel.js không thể giải quyết được do có một số hạn chế.
Do đó, thư viện Snap.svg đã được tạo ra, được viết hoàn toàn từ đầu bởi Dmitry Baranovsky (trong nhóm Adobe Web Platform) nhằm giúp làm việc với SVG cũng như sử dụng dễ dàng hơn cơ hội mới nhất SVG có thể cung cấp cho chúng ta những thứ như: mặt nạ, mẫu, độ dốc, nhóm, hoạt ảnh và nhiều hơn nữa.
Bạn có thể làm gì với Snap.svg? Snap.svg sẽ giúp bạn tạo bất kỳ đồ họa nào nhưng bạn cũng có thể làm việc với các thành phần SVG hiện có. Điều này có nghĩa là SVG của bạn không cần phải được tạo bằng Snap.svg! Bạn cũng có thể tự do tạo và thao tác đồ họa thông qua các công cụ như Adobe Illustrator, Inkscape hoặc Phác thảo. Bắt đầu với Snap.svg Trước tiên, bạn cần tải xuống Snap.svg. Liên kết đi thẳng đến dự án nằm trên GitHub, vì vậy bạn sẽ luôn có phiên bản mới nhất.Sau này, bạn sẽ tìm thấy các tập tin sau trong kho lưu trữ.
- bản demo - đây là một số ví dụ mà bạn cũng sẽ tìm thấy ở bên ngoài. trang mạng.
- dist - 2 loại thư viện, snap.svg được nén và không nén (để phát triển).
- doc - tại đây bạn sẽ tìm thấy tài liệu API, tài liệu này cũng có sẵn khi ngoại tuyến. trang mạng.
- src - các thành phần, công cụ và plugin để làm việc với Snap.svg, chẳng hạn như hoạt ảnh, vẽ, chạy các tác vụ cho Grunt, v.v.
- test - thư mục chứa các bài kiểm tra đơn vị cho Snap.svg.
- index.html - tài liệu HTML chính;
- js/snap.svg.js - kết nối snap.svg;
- js/main.js là tệp làm việc chính của chúng tôi.
200?"200px:"+(this.scrollHeight+5)+"px");">
Phần tử SVG đầu tiên của tôi
#svg (
chiều rộng: 600px; chiều cao: 300px;
}
Trước tiên, hãy khởi tạo Snap trỏ đến phần tử của chúng ta bằng cách tạo một biến trỏ đến liên kết đến phần tử SVG của chúng ta. Trong phần tử của chúng tôi, đây là một phần tử có mã định danh #svg . Hãy gọi biến s.
200?"200px:"+(this.scrollHeight+5)+"px");">var s = Snap("#svg");
Từ đây, thông qua biến s, chúng ta sẽ có quyền truy cập vào tất cả các phương thức của thư viện Snap.svg. Ví dụ chúng tôi muốn bất kỳ hình nào, chẳng hạn như hình tròn hoặc hình chữ nhật. Nhưng có một số điều tinh tế nhỏ mà chúng ta sẽ nói đến bây giờ.
- Một vòng tròn có thể nhận ba giá trị: x, y và bán kính (tài liệu API Vòng tròn văn phòng);
- Một hình chữ nhật có thể nhận sáu giá trị: x, y, chiều rộng, chiều cao, bán kính ngang và bán kính dọc (tài liệu API Rect chính thức);
- Một hình elip có thể nhận bốn giá trị: x, y, bán kính ngang và bán kính dọc (tài liệu API hình elip).
200?"200px:"+(this.scrollHeight+5)+"px");">// Hình tròn có bán kính 80px
var round = s.circle(90,120,80);
// Hình vuông có cạnh 160px
var bình phương = s.ort(210,40,160,160);
// Hình elip có bán kính dọc là 80px và bán kính ngang là 50px
var ellipse = s.ellipse(460,120,50,80);
Đoạn mã trên sẽ hiển thị kết quả sau.
Circle.attr((
điền: "san hô",
nét: "san hô",
Độ mờ đột quỵ: .3,
đột quỵChiều rộng: 10
});
Square.attr((
điền: "lightblue",
đột quỵ: "lightblue",
Độ mờ đột quỵ: .3,
đột quỵChiều rộng: 10
});
Hình elip.attr((
điền: "màu ngọc lam trung bình",
đột quỵ: "màu ngọc lam trung bình",
Độ mờ đột quỵ: .2,
đột quỵChiều rộng: 10
});
Giờ đây, hình dạng SVG của chúng ta đã trở nên dễ thương và đẹp hơn rất nhiều! Thao tác SVG bổ sung mà Snap.svg sử dụng phương pháp mạnh mẽđược gọi là nhóm, nhóm các vectơ lại với nhau, tạo thành một hình dạng. Bạn có thể nhóm bao nhiêu hình dạng tùy thích bằng cách thêm chúng dưới dạng danh sách các phần tử. Hãy tạo hai vòng tròn, nhóm chúng lại và làm cho mỗi vòng tròn trở nên trong suốt một chút để chúng ta có thể thấy nó hoạt động như thế nào.
200?"200px:"+(this.scrollHeight+5)+"px");">var round_1 = s.circle(200, 200, 140);
var round_2 = s.circle(150, 200, 140);
Circles.attr((
điền: "san hô",
điềnOpacity: .6
});
Chúng ta sẽ nhận được những điều sau đây:
Var vòng tròn = s.group(circle_1, round_2);
Circles.attr((
điền: "san hô",
điềnOpacity: .6,
});
Hình elip.attr((
độ mờ: .4
});
Chúng ta sẽ nhận được những điều sau đây:
vòng tròn.attr((
điền: "san hô",
điềnOpacity: .6,
mặt nạ: hình elip
});
Hình elip.attr((
điền: "#fff",
độ mờ: .8
});
Chúng ta sẽ nhận được những điều sau đây:
var round_1 = s.circle(300, 200, 140);
var round_2 = s.circle(250, 200, 140);
// Nhóm các vòng tròn lại với nhau
Var vòng tròn = s.group(circle_1, round_2);
var ellipse = s.ellipse(275, 220, 170, 90);
// Sau đó thêm màu và tô màu trong suốt
// vào vòng tròn và áp dụng mặt nạ
vòng tròn.attr((
điền: "san hô",
điềnOpacity: .6,
mặt nạ: hình elip
});
Hình elip.attr((
điền: "#fff",
độ mờ: .8
});
// Tạo hiệu ứng nhấp nháy bằng cách thay đổi giá trị
// ry cho hình elip từ 90px đến 1px và ngược lại
Chức năng nhấp nháy())(
ellipse.animate((ry:1), 220, function())(
ellipse.animate((ry: 90), 300);
});
};
// Gọi phương thức nhấp nháy cứ sau 3 giây
SetInterval(nháy mắt, 3000);
Hỗ trợ trình duyệt chính xác hơn có thể được tìm thấy trong phiên bản. Miễn phí và cởi mở mã nguồn Snap.svg có sẵn theo giấy phép Apache 2, có nghĩa là thư viện này hoàn toàn miễn phí và hoàn toàn là nguồn mở. Kết luận Chúng tôi đã xem xét rất công cụ đắc lựcđể làm việc với SVG mà bạn có thể sử dụng ngay bây giờ trong các dự án của mình. Chúng tôi hy vọng rằng bài viết này thú vị với bạn! Cảm ơn tất cả các bạn đã quan tâm.
-
Rơi -
3216 -
92
- Hướng dẫn
Tôi nghĩ nhiều người đã xem các đánh giá trình điều khiển game thế hệ tiếp theo từ Polygon (Vox Media). Đây là những cái mà bảng điều khiển được vẽ theo phong cách thiết kế chi tiết:
Các bài đánh giá trông rất thú vị, khá khác thường và mới mẻ. Về cách triển khai tính năng chính của đánh giá - Hoạt hình SVG, cách tự mình thực hiện điều gì đó tương tự và những khả năng “bí mật” khác mà SVG cũ tốt ẩn giấu dưới dạng hoạt ảnh của phần tử đường dẫn - bạn có thể tìm hiểu trong phần cắt.
Lý thuyết, nội suy nét vẽ-dasharray Nói chung, kỹ thuật tạo hoạt ảnh dòng như vậy không phải là mới, chỉ là cho đến gần đây, SVG và mọi thứ liên quan đến nó, theo ý kiến của tôi, đã bị lãng quên một cách bất công, nhưng may mắn thay, tình hình đang thay đổi. Vì vậy, thủ thuật tạo hiệu ứng cho phần tử đường dẫn có thể thực hiện được nhờ vào thuộc tính Stroke-dasharray của phần tử đường dẫn. Thuộc tính này cho phép bạn thiết lập các tham số của đường chấm, cụ thể là độ dài nét và khoảng cách giữa các nét. Nếu chúng ta đặt độ dài của nét bằng toàn bộ chiều dài của đoạn thẳng thì chúng ta sẽ có được một đoạn liền nét thông thường. Nếu bạn đặt chiều dài hành trình bằng 0, và độ dài của khoảng cách lại bằng toàn bộ chiều dài của đoạn thẳng, khi đó chúng ta thu được một đoạn thẳng vô hình. Và tăng dần chiều dài của hành trình với chiều dài của khoảng cách, bằng chiều dài toàn bộ đường nét, chúng ta có thể mô phỏng bản vẽ của nó. Với cách tiếp cận này, việc vẽ sẽ diễn ra từ đầu dòng. Nếu bạn đột nhiên cần vẽ từ cuối, thì bạn cần sử dụng thêm một thuộc tính: Stroke-dashoffset . Thuộc tính này chỉ định độ lệch cho nét đầu tiên. Do đó, bằng cách giảm độ lệch và tăng độ dài của nét, chúng ta sẽ vẽ được từ cuối dòng.Nhân tiện, những người ở Vox Media đã sử dụng tùy chọn kết hợp (theo ý kiến của tôi là dư thừa), nhân tiện, bạn có thể (và nên) đọc về cách họ thực hiện điều này trên blog của họ: Thiết kế tính năng đa giác: Hoạt hình SVG cho vui và kiếm lợi nhuận .
Việc triển khai hoạt ảnh SVG Vox Media đề xuất sử dụng requestAnimationFrame để có hoạt ảnh mượt mà, nhưng chúng tôi có các mục tiêu hơi khác nhau, vì vậy chúng tôi sẽ thực hiện một lộ trình đơn giản hơn, sử dụng thư viện D3.js và hoạt ảnh dựa trên thời lượng được triển khai trong đó.Đây là mã làm việc thực tế được sử dụng để tạo hoạt ảnh cho bảng điều khiển từ đầu bài viết.
Queue() .defer(d3.xml, "PS4.svg", "image/svg+xml") .await(sẵn sàng); function Ready(error, xml) ( //Thêm tệp svg của chúng tôi vào tài liệu HTML var importNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"), svgWidth = svg.attr("width"), svgHeight = svg.attr("height"); var path = svg.selectAll("path") .call(transition); hàm transition(path) ( path.transition() .duration(5000) .attrTween("Stroke-dasharray", tweenDash) .each("end", function() ( d3.select(this).call(transition); )); // vòng lặp vô hạn ) hàm tweenDash() ( var l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); // nội suy đột quỵ- hàm trả về dasharray attr(t) ( return i(t); ); ) )
Hãy bắt đầu bằng cách di chuyển dọc theo đường thẳng mà không cần xoay bây giờ.
Queue() .defer(d3.xml, "wiggle.svg", "image/svg+xml") .await(sẵn sàng); functionready(error, xml) ( //Thêm tệp svg của chúng tôi vào tài liệu HTML var importNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"); var path = svg.select("path#wiggle"), startPoint = pathStartPoint(path); var marker = svg.append("circle"); marker.attr(" r", 7).attr("transform", "translate(" + startPoint + ")"); transition(); //Lấy điểm bắt đầu đường dẫn để đặt hàm đánh dấu pathStartPoint(path) ( var d = path.attr( "d"), dsplitted = d.split(" "); trả về dsplitted.split(","); ) hàm transition() ( marker.transition() .duration(7500) .attrTween("transform", TranslateAlong( path.node())) .each("end", transition);// vòng lặp vô hạn ) function dịchAlong(path) ( var l = path.getTotalLength(); return function(i) ( return function(t) ( var p = path.getPointAtLength(t * l); return "translate(" + p.x + "," + p.y + ")";//Di chuyển điểm đánh dấu ) ) ) )
Ở đây pathStartPoint(path) lấy tọa độ điểm bắt đầu của dòng từ thuộc tính của phần tử đường dẫn. Trong TranslateAlong(path), tọa độ của điểm đánh dấu của chúng tôi được đặt bằng bộ nội suy. Có thể xem một ví dụ ở đây: Hoạt ảnh đánh dấu dọc theo phần tử đường dẫn SVG với D3.js. Bạn cũng có thể kết hợp hoạt ảnh vẽ đường và chuyển động của điểm đánh dấu, nó có thể trông như thế này: Hoạt ảnh đánh dấu dọc theo phần tử đường dẫn SVG với D3.js II .
Hãy làm phức tạp nhiệm vụ, thêm vòng xoay (tốt và thay đổi điểm đánh dấu từ hình tròn thành thứ gì đó thú vị hơn). Để làm điểm đánh dấu, chúng ta sẽ có một tên lửa có chiều rộng là 48 và chiều dài là 24. Vì điểm neo mặc định của điểm đánh dấu là góc trên cùng bên trái nên chúng ta cần căn chỉnh nó để nó bám vào giữa điểm đánh dấu. Điều này cũng cần phải tính đến khi xoay, vì mặc định nó cũng xảy ra xung quanh bên trái góc trên cùng. Có vẻ như chúng ta đã sắp xếp được sự dịch chuyển. Bây giờ chúng ta hãy chuyển trực tiếp sang phép quay, ở đây định nghĩa về tiếp tuyến sẽ giúp ích cho chúng ta, chúng ta sẽ xác định góc bằng cách sử dụng arctang.
Hàm TranslateAlong(path) xác định bộ nội suy sẽ trông như thế này:
Hàm dịchAlong(path) ( var l = path.getTotalLength(); var t0 = 0; return function(i) ( return function(t) ( var p0 = path.getPointAtLength(t0 * l);//điểm trước var p = path.getPointAtLength(t * l);////điểm hiện tại var góc = Math.atan2(p.y - p0.y, p.x - p0.x) * 180 / Math.PI;//góc cho tiếp tuyến t0 = t ; //Chuyển tâm sang tâm tên lửa var centerX = p.x - 24, centerY = p.y - 12; return "translate(" + centerX + "," + centerY + ")rotate(" + góc + " 24" + " 12 "+")"; ) ) )
Việc thực hiện có thể được xem ở đây.
