cuốn sách gpt4 ai đã làm

css - Bù đắp khi đi theo đường dẫn chuyển động của svg

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 07:10:39 28 4
mua khóa gpt4 Nike

Tôi mới bắt đầu sử dụng svg và anime.js. Tôi đang cố gắng tạo lại đường chuyển động của svgTìm Tài sản của riêng tôi trong tài liệu. Tuy nhiên, thay vì sử dụng div để đi theo đường dẫn, tôi đã sử dụng một đường dẫn khác.

Tôi có một đường dẫn hình chữ S đơn giản và một đường dẫn hình tròn dọc theo nó. Vấn đề tôi gặp phải là khi vòng tròn đi quanh khúc cua của đường đi, nó có một phần bù nào đó.





var path = anime.path('.path');

phim hoạt hình({
mục tiêu: '.circle',
dịchX: đường dẫn('x'),
dịchY: đường dẫn('y'),
thời lượng: 4000,
vòng lặp: đúng,
nới lỏng: 'tuyến tính'
});

Tôi đã xem các ví dụ và cố gắng tìm hiểu lý do tại sao điều này lại xảy ra. Tôi đã thêm vị trí tuyệt đối mà nó đang sử dụng nhưng nó vẫn có phần bù và tôi không chắc tại sao. Tôi cũng đã thử tách đường dẫn và vòng tròn thành các svg riêng biệt nhưng dường như điều đó cũng không hiệu quả.

Có ai có thể giải thích cho tôi tại sao lại như vậy và cách khắc phục không? Tôi muốn vòng tròn di chuyển dọc theo con đường ở trung tâm. Cảm ơn.

Bút mã:RxA

câu trả lời hay nhất

Vấn đề là các hoạt ảnh đường dẫn chuyển động như thế này hoạt động bằng cách định vị lại vòng tròn sao cho nó đi theo đường dẫn. Nó thực hiện điều này bằng cách di chuyển vòng tròn một lượng tương ứng với tọa độ X, Y của đường đi tại một thời điểm cụ thể.

Nhưng vì vòng tròn của bạn được vẽ bên dưới và bên phải gốc SVG (0,0) (tức là góc trên cùng bên trái), nên nó nằm bên dưới và bên phải điểm trên đường dẫn cần có.

Có một số giải pháp. Dưới đây là một vài:

1. Định vị lại (vẽ lại) đường tròn sao cho nó tập trung vào điểm gốc


https://codepen.io/PaulLeBeau/pen/eKqKRW

2. Định vị lại (bằng cách chuyển đổi) đường tròn sao cho nó tập trung vào điểm gốc




Chúng ta cần sử dụng một nhóm ở đây để thêm biến đổi Nó sẽ không bị ghi đè bởi phép chuyển đổi được anime.js áp dụng.

https://codepen.io/PaulLeBeau/pen/eKqKBv

Về css - offset khi đi theo đường chuyển động của svg, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/51221123/

28 4 0
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress