Tóm tắt
Merry Pixmas: Vui Giáng sinh với hiệu ứng chuyển đổi CSS 3D.
Chúng tôi thích điều gì?
Bản minh hoạ đẹp mắt theo chủ đề Giáng sinh hoạt động tốt trên máy tính và thiết bị di động. Phiên bản này thậm chí còn đi kèm với khả năng hỗ trợ màu giao diện hoàn toàn mới và một tệp kê khai web cho trải nghiệm màn hình chính khởi chạy toàn màn hình.
Mẹo nâng cao: Lắc điện thoại để tuyết rơi!
Những cách cải thiện có thể áp dụng
Mặc dù tôi nhận ra đây là bản minh hoạ, nhưng một số tiêu đề bộ nhớ đệm được chỉ định trên các tài sản và JavaScript chặn không kết xuất hình ảnh có thể đã cải thiện đáng kể thời gian tải dự kiến.
Hỏi và đáp với Jim Savage
Tại sao nên chọn web?
Tại Tokyo, từ lâu chúng tôi đã ủng hộ web đáp ứng và web dành cho thiết bị di động thay vì web gốc vì lợi ích của nó. Pixmas là kết quả của việc thử nghiệm HTML5 và CSS3 trong thời gian ngừng hoạt động giữa các dự án. Chúng tôi luôn thử những điều mới mẻ để cập nhật kiến thức; do đó, dĩ nhiên là đối với nhóm nhà phát triển giao diện người dùng của chúng tôi, mọi nghiên cứu đều tập trung vào web thay vì nền tảng gốc.
Khi các trình duyệt tiếp tục phát triển, chúng ta sẽ thấy nhiều chức năng giống với mã gốc hơn; các hàm vốn chỉ có sẵn trong quá trình phát triển gốc như định vị vị trí địa lý, truy cập máy ảnh, lưu trữ cơ sở dữ liệu cục bộ, v.v. tất cả góp phần vào trải nghiệm tổng thể giống như mã gốc cho người dùng nhưng mang lại lợi ích qua việc phát triển đa nền tảng và lặp lại nhanh chóng. Tất nhiên, việc phát triển quảng cáo gốc vẫn có các ưu điểm và khi giải quyết một dự án mới, bạn cần cân nhắc rất nhiều đối với cả tuỳ chọn gốc và web. Điều này nghe có vẻ hiển nhiên, nhưng đối với khách hàng của chúng tôi, điều quan trọng là chúng tôi đề xuất nền tảng tốt nhất cho công việc này, thay vì thi đấu mọi dự án vào bất kỳ dự án nào mà chúng tôi muốn lập trình.
Điều gì hoạt động thực sự hiệu quả trong quá trình phát triển?
Tôi nghĩ với Pixmas, trọng tâm chính là xoay quanh Chuyển đổi 3D và mức độ chúng tôi thực sự có thể đẩy mạnh CSS, vì vậy, phong cách minh họa tạo pixel hoạt động rất hiệu quả trong trình duyệt và vì bất kỳ nhà phát triển giao diện người dùng nào cũng sẽ cho bạn biết hành vi tự nhiên của trình duyệt là thân thiện! Vì vậy, việc dựa vào phong cách tổng thể và toán học 3D dựa trên các vấn đề dạng hình vuông hoạt động rất hiệu quả. Việc xây dựng một khối lập phương bằng các phép biến đổi 3D và HTML dễ dàng hơn nhiều so với bất kỳ hình dạng gốc nào khác. Tuy nhiên, các hoạt động tương tác và ảnh động khiến chúng tôi phải thử và sai một chút để ổn định.
Điều khiến chúng tôi ngạc nhiên nhất là độ mượt mà và hiệu suất của trình duyệt của mô hình 3D trên nền tảng di động, đặc biệt là trên các thiết bị Android ít được biết đến hơn.
Nếu có thể, bạn sẽ dùng API nào để cải thiện ứng dụng của mình?
Nếu viết lại Pixmas, có lẽ chúng tôi sẽ sử dụng API dựa trên WebGL. Tuy rất thú vị khi bạn có thể chỉnh sửa các phần tử HTML DOM trong chế độ 3D thông qua CSS, nhưng sức mạnh thực sự cho 3D dựa trên web phải là công nghệ tăng tốc phần cứng chuyên dụng như WebGL. CSS 3D phù hợp với các hiệu ứng và chuyển đổi cơ bản cho trang web, nhưng chúng tôi chắc chắn đã đạt đến giới hạn về hiệu suất của trình duyệt khi mã hoá Pixmas.
Google có một số dự án WebGL rất tuyệt vời tại Thử nghiệm Chrome.