Hình dạng tween trong javascript

Question

Có cách nào để làm một hình dạng tween trong javascript? Sử dụng canvas có thể ...

Answer 1

Nếu bạn sẽ làm đồ họa trên phần tử canvas HTML 5, bạn có thể muốn kiểm tra thư viện Processing.js. Có một tweening library, nhưng có thể bạn sẽ thấy nó hữu ích for many other things.

Processing.js sử dụng JavaScript để vẽ hình dạng và thao tác hình ảnh trên HTML 5 Yếu tố canvas. Mã này là trọng lượng nhẹ, dễ học và là công cụ lý tưởng để hiển thị dữ liệu , tạo giao diện người dùng và phát triển các trò chơi dựa trên web .

Đối tweening, bạn có thể muốn có một cái nhìn tại như sau:

• Tween.lib - Motion Tweening for Processing.js
• Motion Tweening for Processing.js

Answer 2

Đối với tweens trong Javascript sử dụng http://coderepos.org/share/wiki/JSTweener

Answer 3

Shape tween như trong Flash khó tìm hơn chuyển động tween và đơn giản tại nội suy của các tributes (như trong JSTweener, Tween.lib, animate của JQuery(), chuyển tiếp d3(), animate của RaphaelJS(), v.v.). Những thư viện, một số trích dẫn trong các câu trả lời khác, không làm hình dạng tweening.

Trước tiên, bạn cần biết bạn có muốn vẽ bằng SVG hoặc với canvas và bạn sẽ sử dụng thư viện nào không. Sau đó, bạn cần một nội suy, một hàm sẽ tính toán quá trình chuyển đổi giữa hai hình dạng đã cho, có thể viết một đường dẫn thích hợp trong SVG hoặc canvas. Tôi đã viết một triển khai cho SVG trong D3.js để thực hiện một số chuyển đổi hoạt hình giữa nhiều hình dạng khác nhau (sử dụng số superformula của Gielis), nếu ai đó vẫn cần. Bạn có thể tìm thấy ví dụ here

Answer 4

Một số ví dụ động tại đây kết hợp chuyển động | hình dạng tweening bằng RaphaelJS. Kiểm tra những cái ở dưới cùng: http://raphaeljs.com/animation.html

Answer 5

Tôi sử dụng tween.js (http://learningthreejs.com/) một thư viện tuyệt vời sẽ thu gọn mọi thứ. Nếu bạn đã sử dụng jQuery tôi cũng khuyên bạn nên xem xét nó là chức năng animate.