Progressive Blur at mga Gradient sa Hana

I-level up ang mga design mo gamit ang mga kaakit-akit na blur at gradient

Buksan ang Hana

Sumikat ang mga Progressive Blur kasabay ng glass UI aesthetic ng iOS ilang taon na ang nakalipas, at kamakailan ay lalong ginagamit sa mga UI design tool. Gayunpaman, nanatili itong isang komplikadong technique na mahirap gamitin sa motion design o sa mga real-time na interactive environment.

Ngayon, inilalabas namin ang real-time na Progressive Blur sa Hana. Sa unang pagkakataon, available ang ganitong uri ng blur para sa real-time na paggamit, na may mga intuitive na control at walang kailangang teknikal na kaalaman, lahat sa loob ng infinite design canvas ng Hana.

Puwede mong laruin ang scene sa ibaba para makita kung paano ito gumagana.

I-hover o i-touch para makipag-interact (Experience na gawa sa Hana)

Paano magdagdag ng Progressive Blur sa Hana

Puwede kang pumili ng anumang layer at magdagdag ng Layer Blur o Background Blur. Sa parehong kaso, mapipili mo kung Uniform o Progressive ang blur.

Gumagana ang Progressive Blur na halos parang gradient, pero sa halip na kulay, lumilipat ito sa pagitan ng dalawang value ng blur radius.

Ganito gumagana ang Progressive Blur sa Hana

Mga Smooth Gradient sa Hana

Makakagawa ka na ng mga gradient sa Hana. Puwede kang pumili sa pagitan ng linear, radial o polar na gradient, at i-adjust ang posisyon mismo mula sa canvas.

Ipinapakilala rin namin ang mga Smooth Gradient, mga gradient na gumagamit ng Smooth Step interpolation para makagawa ng mas natural na paghahalo ng mga kulay. Karamihan sa mga design tool ay gumagamit ng mga gradient na umaasa sa Linear interpolation, na lumilikha ng mga karaniwang breaking point sa pagitan ng bawat "stop" na kulay ng gradient.

Unang ipinatupad namin ang mga Smooth Gradient sa 3D editor ng Spline ilang taon na ang nakalipas, at ngayon ay dinadala na namin ito sa Hana.

I-hover o i-touch para makipag-interact (Experience na gawa sa Hana)

SVG import at iba pa

Sa nakalipas na ilang linggo, naglabas din kami ng ilang pagpapahusay sa Hana, kasama ang suporta para sa mga SVG file (puwede mo na lang i-drag and drop), mas mahusay na performance, at mas maliit na runtime size.

Nagdagdag din kami ng ilang pagpapahusay para sa mas maginhawang paggamit, kasama ang mas mahusay na behavior ng color picker, pinahusay na mga selection tool, at maraming maliliit na fix para gawing mas consistent ang experience.

Mga experience na gawa sa Hana

Subukan ito ngayon!

Narito ang isang Spline Hana file para matuklasan mo ang mga kakayahan ng Progressive Blur at mga Gradient.

Umuunlad ang mga design workflow

Kahit simple sa ubod, nagbibigay ang mga bagong feature na ito ng malawak na malikhaing kontrol at mga malikhaing resulta na hindi pa nangyari dati.

Hindi kailanman naging madali ang mag-animate o gumawa ng mga real-time na interaction na ganito, at ngayon ay magagawa mo na ito sa ilang segundo gamit ang Hana.

Excited na kaming makita ang magagawa mo!

—

Ang Spline Team

Alamin pa

Iba pa mula sa blog