Rumah >hujung hadapan web >tutorial js >Kesan Selepas: Pengendali Modulo (%)
Penjelasan mendalam tentang pengendali modulo (%) dalam ungkapan After Effects
Pengendali modulo (%), juga dikenali sebagai pengendali selebihnya, ialah alat yang sangat berguna dalam pembinaan ekspresi, tetapi ia mungkin tidak mudah untuk difahami oleh pemula. Artikel ini menerangkan fungsi dan kegunaannya.
% digunakan untuk mengira baki persamaan. Contohnya:
<code>10 % 3</code>
Ungkapan ini mengembalikan 1 kerana hasil bagi 10 dibahagikan dengan 3 ialah 3, bakinya ialah 1.
Ini berguna untuk mencipta gelung apabila bekerja dengan pembolehubah masa.
Ekspresi gelung
Kebanyakan pereka yang baru menggunakan ungkapan After Effects sudah biasa dengan ungkapan loopOut(). Ia membolehkan kita menggunakan "kitaran" (kitaran dari mula hingga akhir), "pingpong" (kitaran dari mula ke akhir dan kembali ke permulaan), "mengimbang" (mengulang bingkai utama tetapi setiap kali dengan mengimbangi nilai untuk membina animasi) atau "teruskan" (untuk meneruskan gerakan menggunakan kelajuan bingkai utama terakhir) untuk mengitar melalui sifat bingkai utama. Ini sangat komprehensif dan merangkumi semua yang anda perlukan untuk animasi bingkai utama.
Walau bagaimanapun, jika anda ingin menggelungkan ungkapan, loopOut bukanlah penyelesaian yang berdaya maju. Mungkin terdapat banyak sebab untuk tidak mahu menggunakan bingkai utama, tetapi yang utama adalah jika nilai perlu dikemas kini secara dinamik dan berterusan. Lebih mudah untuk mengemas kini ungkapan yang dilampirkan pada peluncur daripada mengemas kini set bingkai utama.
Jika gerakan berterusan, maka Linear atau Ease sudah memadai. Tetapi untuk animasi kompleks yang memerlukan gelung, kita boleh menggunakan operator modulo masa untuk melaksanakan gelung.
Untuk melihat cara ini berfungsi, salin dan tampal ungkapan berikut ke dalam sifat Teks Sumber lapisan teks:
<code>Math.floor(time % 5)</code>
Anda akan melihat kiraan lapisan dari 0 hingga 4 setiap saat, bergelung kembali ke 0 setiap 5 saat. Ini kerana baki ungkapan berubah setiap saat apabila masa berlalu:
随时间变化的余数 |
---|
1 % 5 = 1 |
2 % 5 = 2 |
3 % 5 = 3 |
4 % 5 = 4 |
5 % 5 = 0 |
Daripada ini, mudah untuk melihat cara menggunakannya apabila anda perlu menghidupkan nombor antara parameter tertentu.
Contoh: Jam Digital
Mari gunakan % untuk membuat jam digital.
Saat perlu dikira antara 0 dan 60, dan minit perlu dinaikkan setiap 60 selang. Mari tampalkan ini ke dalam sifat Teks Sumber lapisan teks sekali lagi:
<code>10 % 3</code>
Memecahkan ungkapan, pembolehubah saat kami akan dikira dari 0 hingga 60 dan pembolehubah minit akan ditambah pada setiap gandaan 60 (sekali lagi, kami menggunakan Math.floor untuk membundarkan nombor). Pernyataan if yang berikut menambah 0 di hadapan pembolehubah sec jika kurang daripada 10, memastikan pembolehubah saat kami sentiasa mempunyai dua digit (anda boleh mengulangi ini untuk minit juga, jika anda mahu). Kemudian hanya gunakan pemisah masa untuk menggabungkannya bersama-sama.
Jika anda memerlukan kaunter untuk berfungsi secara bebas daripada masa, anda boleh mencapai kesan yang sama dengan menggantikan masa dengan peluncur dan menetapkan nilainya.
Anda juga boleh membuat pemisah masa berkelip menggunakan operator modulo dan pemilih ungkapan teks After Effects.
Pergi ke lapisan teks dan tambahkan pilihan animasi Opacity pada lapisan teks (jika anda tidak pasti cara melakukannya, anda boleh menyemak semua tentang perkara ini dalam artikel ini). Kemudian tambah pemilih ekspresi dan alih keluar pemilih julat.
Tetapkan kelegapan dalam animator kepada 0 dan tambahkan ungkapan ini pada sifat Amount:
//Pemisah jam digital berkelip //Tambah pada pemilih ungkapan
minit = Math.floor(masa / 60);
minit = 10 && textIndex == 3 ? Math.floor(masa2 % 1.5) 100 : 0;
Saya menulis pernyataan bersyarat berdasarkan fakta bahawa bilangan digit dalam pembolehubah minit tidak tetap. Pertama, saya menyalin pembolehubah minit daripada sifat teks sumber. Saya kemudian menggunakan ini untuk mengira nilai textIndex pemisah masa. Apabila terdapat hanya satu digit dalam paparan minit, ia akan sama dengan 2. Apabila paparan minit melebihi 10, ia akan menjadi 3. Pernyataan bersyarat juga boleh ditulis seolah-olah pernyataan, seperti yang ditunjukkan di bawah, untuk menerangkan dengan lebih lanjut perkara yang dilakukannya:
jika (minit = 10 && teksIndex == 3) Math.floor(masa2 % 1.5) 100 lain 0
Jika minit kurang daripada 10 dan textIndex bersamaan dengan 2, maka Math.floor(masa2 % 1.5) 100 mempengaruhi aksara kedua dalam lapisan teks. Ini akan menjadikan huruf berkelip (nisbah hidup/mati 2:1) terima kasih kepada pengendali modulo. Fungsi Math.floor membundarkan nombor, dan keseluruhan ungkapan akhirnya didarabkan dengan 100 untuk menogol antara 0 dan 100, iaitu julat pemilih ungkapan.
Walau bagaimanapun, jika minit sama dengan atau lebih daripada 10 dan textIndex sama dengan 3, kesannya akan digunakan pada aksara ketiga dalam lapisan teks. Ini menerangkan digit tambahan dalam paparan minit. Jika paparan minit anda perlu lebih panjang daripada 99, anda perlu menambah parameter lain untuk mempengaruhi paparan pemisah masa apabila ia berada di kedudukan keempat.
Walau bagaimanapun, jika paparan minit anda ditetapkan kepada bilangan digit yang tetap, pernyataan ini menjadi lebih mudah:
Indeks pembahagi = 3; textIndex == dividerIndex ? Math.floor(masa2 % 1.5) 100 : 0
Itu sahaja, anda mendapat jam digital!
Selepas menunjukkan cara pengendali modulo membantu membuat gelung, kini kami boleh mempertimbangkan cara ia boleh digunakan pada sifat lain.
Contoh: Jam Analog
Sekarang mari kita buat jam analog. Apabila penunjuk berdetik, ia biasanya bukan pergerakan berterusan tetapi yang berhenti dan bermula secara tiba-tiba. Ini ialah jenis gelung yang operator modulo boleh bantu selesaikan.
Mari kita lihat ungkapan berikut yang boleh ditampal ke dalam sifat putaran lapisan jarum jam:
//Tangan kedua berputar bingkai = thisComp.frameDuration;
Masa gelung = 1; dur = bingkai * 6; kekuatan = 6;
kaunter = Math.floor(masa/loopTime); t = masa % gelungMasa;
ease(t, 0, dur, strength counter, strength (counter 1))
Pertama, kami menetapkan beberapa pembolehubah. bingkai ialah tempoh bingkai dalam gubahan, membolehkannya berfungsi merentas berbilang kadar bingkai.
Tetapkan Masa gelung kepada masa yang anda mahu gelung. Saya mahu gelung bertahan satu saat, jadi saya menetapkannya kepada 1. dur ialah tempoh animasi dalam gelung, jadi saya menetapkannya kepada bingkai * 6, menjadikannya bertahan 6 bingkai. kekuatan ialah perubahan dalam nilai animasi, kerana saya menghidupkan jarum jam saya menetapkannya kepada 6 supaya jarum jam akan melengkapkan satu putaran dalam 60 detik.
Seterusnya, saya mencipta pembolehubah pembilang yang akan membantu mengimbangi nilai saya. Saya menciptanya menggunakan Math.floor(time/loopTime) , menggunakan Math.floor untuk membundarkan nombor dan menetapkan kelajuan pembilang agar sepadan dengan gelung. Akhir sekali, t ialah pembolehubah yang boleh kita gunakan untuk animasi dipacu ekspresi masa. Ini ialah masa % loopTime, jadi apabila masa mencapai nombor yang disimpan dalam loopTime, gelung masa.
Selepas itu, kita boleh menghidupkan. Dalam contoh ini, saya menggunakan ungkapan mudah. Dengan menetapkan parameter pertama kepada t, kami memetakan semula nilai putaran kepada pembolehubah masa gelung kami. Dua parameter seterusnya ialah 0 dan dur, titik mula dan tamat animasi. Dua parameter terakhir ialah kekuatan pembilang dan kekuatan (bilangan 1), iaitu nilai sifat putaran. Dengan mendarab kekuatan dengan pembilang, kita boleh mengimbangi nilai setiap gelung, berakhir pada kekuatan * (bilangan 1), bersedia untuk gelung seterusnya.
Kelebihan memandu gerakan melalui ungkapan dan bukannya bingkai utama dalam kes ini adalah jika anda perlu membina templat jam untuk perubahan masa. Nilai statik ungkapan boleh disambungkan ke peluncur, menjadikannya lebih mudah untuk dikemas kini secara berterusan.
Anda boleh menggunakan ungkapan yang lebih maju atau membina fungsi anda sendiri untuk mencipta lebih banyak animasi tersuai:
//Tangan kedua berputar bingkai = thisComp.frameDuration;
Masa gelung = 1; dur = bingkai * 6; tukar = 6;
kaunter = Math.floor(masa/loopTime); t = masa % gelungMasa;
memudahkan fungsiInOutBack (t, b, c, d, s) { jika (s == tidak ditentukan) s = 1.70158; jika ((t/=d/2) < 1) kembalikan c/2(tt(((s=(1.525))) 1)t - s )) b; pulangkan c/2((t-=2)t(((s=(1.525)) 1)t s) 2) b; }
easeInOutBack(t, 0, change, dur, 1.70158)
Akhir sekali, anda boleh mencipta pembolehubah untuk menetapkan nilai permulaan dan menggunakan pernyataan if untuk melangkau lelaran pertama animasi jarum minit (dan mungkin jarum jam):
//Putaran tangan minit bingkai = thisComp.frameDuration;
Masa gelung = 60; dur = bingkai * 6; kekuatan = 6; startValue = 180;
kaunter = Math.floor(masa/loopTime); t = masa % gelungMasa;
memudahkan fungsiInOutBack (t, b, c, d, s) { jika (s == tidak ditentukan) s = 1.70158; jika ((t/=d/2) < 1) kembalikan c/2(tt(((s=(1.525))) 1)t - s )) b; pulangkan c/2((t-=2)t(((s=(1.525)) 1)t s) 2) b; }
jika (kaunter > 0) { easeInOutBack(t, startValue kekuatan * pembilang, kekuatan, dur, 1.70158) } lain { startValue }
Dari sini, hanya sambungkan peluncur ke pembolehubah startValue kami. Dengan cara ini anda mempunyai jam analog yang boleh dikemas kini dengan hanya menukar nilai dalam peluncur.
Kesimpulan
Pengendali modulo berguna untuk mencipta gelung untuk membantu dalam ekspresi dinamik di mana kaedah lain tidak sesuai untuk keperluan projek.
Cuba uji dalam projek anda sendiri!
Sebarang komen? Ada yang kurang jelas? Sila tinggalkan komen di bawah.
Atas ialah kandungan terperinci Kesan Selepas: Pengendali Modulo (%). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!