27 tháng 5, 2025

Progressive Blur và gradient trong Hana

Nâng tầm thiết kế với blur và gradient đẹp mắt

Progressive Blur trở nên phổ biến cùng phong cách UI kính của iOS từ vài năm trước, và gần đây được ưa chuộng trong các công cụ thiết kế UI. Tuy nhiên, nó phần lớn vẫn là một kỹ thuật phức tạp, khó dùng trong thiết kế chuyển động hay môi trường tương tác thời gian thực.

Hôm nay, chúng tôi đưa Progressive Blur thời gian thực vào Hana. Lần đầu tiên, kiểu blur này có thể dùng theo thời gian thực, với các điều khiển trực quan, không cần kiến thức kỹ thuật, tất cả trong canvas thiết kế vô hạn của Hana.

Bạn có thể thử cảnh bên dưới để xem cách nó hoạt động.

Rê chuột hoặc chạm để tương tác (trải nghiệm làm bằng Hana)

Cách thêm Progressive Blur trong Hana

Bạn có thể chọn bất kỳ layer nào và thêm Layer Blur hoặc Background Blur. Trong cả hai trường hợp, bạn có thể chọn blur là Uniform (đồng đều) hay Progressive (tăng dần).

Progressive Blur hoạt động gần giống gradient, nhưng thay vì chuyển màu, nó chuyển giữa hai giá trị bán kính blur.

Đây là cách Progressive Blur hoạt động trong Hana

Gradient mượt trong Hana

Giờ bạn có thể tạo gradient trong Hana. Bạn có thể chọn gradient tuyến tính, tỏa tròn hoặc polar, và điều chỉnh vị trí ngay trên canvas.

Chúng tôi cũng giới thiệu Smooth Gradient, loại gradient dùng nội suy Smooth Step để chuyển màu tự nhiên hơn. Hầu hết công cụ thiết kế dùng gradient nội suy tuyến tính, thường tạo ra những điểm gãy giữa các "stop" màu của gradient.

Chúng tôi đã triển khai Smooth Gradient lần đầu trên trình chỉnh sửa 3D của Spline từ vài năm trước, và giờ mang nó đến Hana.

Rê chuột hoặc chạm để tương tác (trải nghiệm làm bằng Hana)

Nhập SVG và hơn thế nữa

Trong vài tuần qua, chúng tôi cũng phát hành một số cải tiến cho Hana, bao gồm hỗ trợ tệp SVG (giờ bạn chỉ cần kéo thả), hiệu năng tốt hơn và kích thước runtime nhỏ hơn.

Chúng tôi cũng bổ sung nhiều cải tiến trải nghiệm, bao gồm bộ chọn màu hoạt động tốt hơn, công cụ chọn được cải thiện và nhiều bản sửa lỗi nhỏ để trải nghiệm nhất quán hơn.