Buat jalan gerakan CSS yang responsif? Pasti kita boleh!

Baru -baru ini, perbincangan mengenai animasi di tempat kerja Slack Channel mencetuskan cabaran yang menarik: mewujudkan laluan gerakan CSS responsif. Jawatan ini meneroka kerumitan dan membentangkan penyelesaian berasaskan JavaScript.

Laluan gerakan CSS, menggunakan harta tanah offset-path , membolehkan unsur-unsur animasi di sepanjang laluan tersuai yang ditakrifkan sama seperti laluan SVG. Walau bagaimanapun, batasan utama ialah koordinat jalan dianggap sebagai nilai piksel, menghalang respons. Laluan yang ditakrifkan untuk saiz tertentu tidak akan skala dengan anggun dengan perubahan viewport.

Hartanah offset-distance mengawal kedudukan elemen di sepanjang jalan, sementara offset-rotate menguruskan putarannya. Animasi offset-distance mewujudkan kesan gerakan.

Masalah teras terletak pada sifat piksel tetap laluan gerakan CSS. Tidak seperti laluan SVG, yang skala dengan kotak viewbox, laluan CSS kekal statik, yang memerlukan pelarasan manual untuk saiz viewport yang berbeza. Ini boleh diurus untuk laluan mudah, tetapi laluan yang kompleks, terutama yang diimport dari editor vektor, menjadi sukar untuk dikekalkan. Saiz semula memerlukan pengeksportan semula jalan dari editor vektor untuk setiap titik putus, proses yang rumit.

Pertimbangkan jalan yang mudah:

 .element {
  --Path: 'M20,20 C20,100 200,0 200,100';
  Offset-Path: Path (var (-Path));
}

Skala ini memerlukan pengiraan semula koordinat jalan untuk titik putus yang berbeza:

 @media (min-lebar: 768px) {
  .element {
    --Path: 'M40,40 C40,200 400,0 400,200'; // Pengiraan semula manual
  }
}

Ini menjadi lebih mencabar dengan laluan yang rumit.

Penyelesaian JavaScript menawarkan pendekatan yang lebih elegan. Walaupun perpustakaan seperti plugin gerakan Greensock menawarkan skala untuk laluan SVG, penyelesaian yang lebih umum diperlukan untuk laluan di luar konteks SVG. Fungsi tersuai boleh skala dinamik, tetapi ini tidak remeh.

Pendekatan perpustakaan carta

Perpustakaan carta seperti D3.js menyediakan penyelesaian yang berpotensi. Ia membolehkan rentetan laluan menjana dari set koordinat, membolehkan pelarasan skala dan lengkung yang disesuaikan. Walau bagaimanapun, ini masih memerlukan menukarkan laluan sedia ada ke dalam set koordinat, yang tidak sesuai.

Pendekatan yang lebih baik melibatkan secara langsung memproses rentetan laluan dari editor vektor. Setelah mengoptimumkan SVG menggunakan alat seperti SVGOMG, kami mengekstrak data PATH dan Maklumat ViewBox:

<svg height="300" viewbox="0 0 79.375 79.375" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M10.362 18.996s-6.046 21.453 1.47 25.329c10.158 5.238 18.033-21.308 29.039-18.23 13.125 3.672 18.325 36.55 18.325 36.55l12.031-47.544" fill="none" stroke="#000" stroke-width=".265"></path></svg>

Kami berminat dengan atribut d (rentetan laluan) dan atribut viewBox .

Penyelesaian JavaScript yang dipertingkatkan

Fungsi JavaScript mengambil rentetan laluan dan kotak pandangan sebagai input. Ia menukarkan rentetan laluan ke dalam set data menggunakan API SVGGeometryElement , melelehkan panjang laluan untuk mengekstrak mata. Skala D3.js kemudian digunakan untuk menghasilkan rentetan laluan berskala berdasarkan saiz kontena dan nisbah viewbox. Ini memastikan laluan mengekalkan nisbah aspeknya semasa berskala secara berkadar di dalam bekas. A ResizeObserver secara dinamik mengemas kini laluan apabila bekas saiznya. Fungsi lengkap tersedia dalam demo yang disertakan.

Pendekatan ini membolehkan menggunakan laluan secara langsung dari editor vektor tanpa pengiraan semula manual untuk titik putus yang berbeza, menawarkan penyelesaian yang mantap dan boleh dipelihara untuk laluan gerakan CSS yang responsif. Pakej GitHub, "Moverer," menyediakan fungsi ini. Demo mempamerkan penyelesaian, yang membolehkan ujian dengan pelbagai laluan SVG yang dioptimumkan.

Atas ialah kandungan terperinci Buat jalan gerakan CSS yang responsif? Pasti kita boleh!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!