Animasi web mewah mudah dengan plugin Greensock

Buka kunci animasi web yang menakjubkan dengan plugin Greensock: menyelam dalam

Tutorial ini meneroka plugin kuat Greensock (GSAP), menawarkan pendekatan yang diperkemas untuk animasi web yang kompleks berbanding dengan CSS tradisional atau SMIL. Kami akan merangkumi plugin utama dan menunjukkan bagaimana untuk mencapai hasil gred profesional dengan cekap.

Ansuran ini memberi tumpuan kepada beberapa plugin GSAP yang luar biasa:

• bezierplugin: dengan mudah menghidupkan unsur-unsur di sepanjang jalan bezier melengkung, memastikan keserasian penyiaran silang yang konsisten dan melampaui batasan CSS atau SMIL.
• Draggable & ThrowPropsPlugin: Membina animasi drag-and-drop berasaskan fizik, dengan prestasi yang luar biasa dan sokongan peranti/penyemak imbas yang luas.
DrawSVGPlugin:
• Buat animasi strok SVG dinamik, memberikan kawalan dan fleksibiliti yang lebih baik ke atas CSS, terutamanya bermanfaat untuk reka bentuk responsif.
morphsvgplugin:
• peralihan dengan lancar antara bentuk SVG, memudahkan kesan morphing kompleks dengan kod minimum, bahkan mengendalikan laluan dengan jumlah titik yang berbeza -beza.
splittext:
• menghasilkan kesan animasi teks yang menarik dengan memisahkan teks ke dalam garis, kata, atau aksara untuk manipulasi individu.
Menguasai plugin ini secara dramatik mengurangkan masa pembangunan untuk animasi web yang rumit.

Animasi di sepanjang jalan dengan bezierplugin

Objek animasi di sepanjang laluan yang telah ditetapkan (melengkung, zigzag, dan lain -lain) menambah realisme. Walaupun SMIL sudah ketinggalan zaman dan sokongan CSS terhad, Bezierplugin menyediakan penyelesaian yang mantap dan silang. Ini plugin percuma disertakan dengan tweenmax.

Asas Bezierplugin:

Termasuk tweenmax dalam html anda. Sintaks asas ialah:

Untuk pelbagai koordinat, cache mereka dalam pembolehubah:

<code class="language-javascript">TweenMax.to(document.getElementById('myDiv'), 5, {
  bezier:[
    {left:100, top:250}, 
    {left:300, top:0}, 
    {left:500, top:400}
  ], 
  ease:Power1.easeInOut
});</code>

menggunakan 'x' dan 'y' menyelaraskan kedudukan relatif kepada lokasi semasa elemen.

<code class="language-javascript">const points = [ /* ... your points */ ];
TweenMax.to(document.getElementById('myDiv'), 5, { bezier: points, ease:Power1.easeInOut });</code>

bezierplugin menawarkan

(koordinat bertindak sebagai magnet) dan

(lalai, menggunakan type: 'soft' untuk ketegangan jalan). type: 'thru' berputar elemen di sepanjang jalan. Demo codepen menggambarkan sifat -sifat ini. curviness autoRotate: true

Lihat codepen demo

Greensock Premium Plugin and Utilities

Walaupun Tweenmax menawarkan banyak, keahlian kelab Greensock membuka kunci plugin dan utiliti premium. Keahlian Hijau yang mengejutkan memberi akses kepada memuat turun sumber -sumber ini. Walau bagaimanapun, demo codepen membenarkan percubaan percuma dengan plugin premium dalam persekitaran codepen.

seret & jatuhkan dengan draggable dan throwpropsplugin

Draggable memudahkan animasi drag-and-drop, menawarkan keserasian silang penyemak imbas, sokongan skrin sentuh, dan prestasi. ThrowPropsPlugin menambah lancar, berasaskan fizik.

Pelaksanaan Asas:

<code class="language-javascript">TweenMax.to(document.getElementById('myDiv'), 5, {
  bezier:[
    {left:100, top:250}, 
    {left:300, top:0}, 
    {left:500, top:400}
  ], 
  ease:Power1.easeInOut
});</code>

mengekang pergerakan dengan

dan membolehkan meluncur dengan bounds: throwProps

<code class="language-javascript">const points = [ /* ... your points */ ];
TweenMax.to(document.getElementById('myDiv'), 5, { bezier: points, ease:Power1.easeInOut });</code>

Lock menyeret arah menggunakan

(mendatar) atau type: 'x' (menegak). type: 'y' membolehkan penyerapan putaran. type: 'rotation'

Lihat codepen demo

strok svg lising live-drawing dengan Drawsvgplugin

Drawsvgplugin mencipta kesan lukisan SVG itu sendiri. Ia mengendalikan bentuk mudah yang kurang

dan menyesuaikan diri dengan skala responsif, melampaui batasan CSS. getTotalLength()

Penggunaan Asas:

<code class="language-javascript">Draggable.create('#yourID');</code>

Pastikan SVG anda mempunyai strok yang ditakrifkan (sama ada dalam SVG atau CSS). Berkelip pelbagai strok menggunakan kaedah GSAP's Stagger.

Lihat codepen demo

Bentuk beralih dengan morphsvgplugin

morphsvgplugin morphs satu bentuk SVG ke yang lain, walaupun dengan jumlah titik yang berbeza.

Penggunaan mudah:

<code class="language-javascript">Draggable.create('#yourID', { bounds: '.container', throwProps: true });</code>

anda boleh menyediakan data laluan secara langsung atau gunakan

untuk bentuk mudah. ​​MorphSVGPlugin.convertToPath()

Lihat codepen demo

kesan teks yang menyeronokkan dengan splittext

splittext memisahkan teks ke dalam garis, perkataan, atau aksara untuk animasi yang disasarkan.

Penggunaan Asas:

<code class="language-javascript">TweenLite.fromTo("#path", 1, { drawSVG:"0 5%" }, { drawSVG:"95% 100%" });</code>

animate

, split.lines, atau split.words secara individu. Gunakan split.chars untuk mengeluarkan markup tambahan selepas animasi. split.revert()

Lihat codepen demo

Kesimpulan

Plugin Greensock memberi kuasa kepada anda untuk membuat animasi web yang canggih dengan cekap. Terokai forum dokumentasi dan komuniti untuk menguasai keupayaannya dan meningkatkan reka bentuk web anda. Ingatlah untuk menggantikan pautan codepen tempat letak dengan pautan sebenar ke demo anda yang dibuat.

Atas ialah kandungan terperinci Animasi web mewah mudah dengan plugin Greensock. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!