Animasi Spring dan Decay
Gunakan Animated.spring untuk mencipta gerakan berasaskan fizik yang melantun, laraskan parameter ketegangan dan geseran, kemudian gunakan Animated.decay untuk kesan penatalan berasaskan momentum.
Animasi Spring dan Decay ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Melangkaui Linear: Pergerakan Berasaskan Fizik
Animasi pemasaan linear terasa mekanikal kerana objek dunia sebenar jarang bergerak pada kelajuan yang malar. Animasi berasaskan fizik mensimulasikan daya semula jadi seperti spring dan momentum, menjadikan pergerakan antara muka terasa hidup dan semula jadi. API Animated React Native menyediakan dua enjin fizik: Animated.spring untuk lantunan elastik dan Animated.decay untuk nyahpecutan berasaskan momentum.
Pemilihan jenis animasi yang betul sangat mempengaruhi kualiti yang dirasai. Pemasaan sesuai untuk pemudaran kelegapan; spring sesuai untuk elemen interaktif seperti butang dan kad; decay sesuai untuk gerak isyarat leret untuk menutup.
Animated.spring: Pergerakan Melantun
Animated.spring mensimulasikan spring yang menarik nilai ke arah sasaran. Nilai tersebut melepasi sasaran dan berayun sehingga stabil — kesan lantunan klasik. Sekurang-kurangnya, anda perlu menyediakan toValue dan useNativeDriver.
Animasi spring terasa semula jadi untuk elemen yang bertindak balas terhadap interaksi pengguna, seperti butang yang membesar apabila ditekan atau modal yang meluncur masuk dari bawah. Parameter spring lalai telah ditala supaya terasa baik pada peranti mudah alih, tetapi anda boleh menyesuaikannya.
import { Animated } from 'react-native';
import { useRef } from 'react';
const scale = useRef(new Animated.Value(0)).current;
Animated.spring(scale, {
toValue: 1,
useNativeDriver: true,
}).start();Menala Spring dengan Ketegangan dan Geseran
Rasa animasi spring dikawal oleh dua parameter: tension dan friction. Tension mengawal kelajuan spring menarik ke arah sasaran — tension yang lebih tinggi bermaksud pergerakan yang lebih pantas dan responsif. Friction mengawal kelajuan ayunan diredam — friction yang lebih rendah bermaksud lebih banyak lantunan.
Nilai tension lalai ialah 40 dan friction ialah 7. Untuk rasa yang pantas dan responsif, cuba tension 100 dan friction 10. Untuk kesan yang perlahan dan beralun, cuba tension 20 dan friction 3. Lakukan percubaan untuk mencari rasa yang sesuai bagi antara muka anda.
Animated.spring(scale, {
toValue: 1,
tension: 100, // higher = snappier
friction: 10, // higher = less bouncy
useNativeDriver: true,
}).start();
// Wobbly alternative:
Animated.spring(scale, {
toValue: 1,
tension: 20,
friction: 3,
useNativeDriver: true,
}).start();Spring dengan Kekakuan, Jisim dan Redaman
React Native turut menyokong model spring yang lebih tepat dari segi fizik menggunakan stiffness, mass dan damping. Ini sepadan dengan sifat fizikal sistem spring — stiffness ialah pemalar spring, mass ialah berat objek dan damping ialah pekali seretan.
Model ini serasi dengan animasi spring UIKit iOS dan Framer Motion di web, menjadikannya lebih mudah untuk memadankan animasi yang direka dalam alat prototaip. Gunakan sama ada model tension/friction atau model stiffness/mass/damping — jangan gunakan kedua-duanya serentak.
Animated.spring(translateY, {
toValue: 0,
stiffness: 120,
mass: 1,
damping: 14,
useNativeDriver: true,
}).start();Membina Kesan Tekanan Butang Spring
Pola animasi spring yang biasa ialah mengecilkan butang sedikit apabila ditekan dan mengembalikannya kepada saiz penuh apabila dilepaskan, lalu memberikan maklum balas sentuhan yang memuaskan. Gunakan Pressable bersama onPressIn dan onPressOut untuk mencetuskan animasi spring pada nilai skala.
Pergerakan spring yang cepat ketika ditekan dan kembali semasa dilepaskan menjadikan butang terasa seperti objek fizikal dan responsif. Kesan ini lebih memuaskan berbanding perubahan kelegapan yang ringkas dan digunakan secara meluas dalam aplikasi mudah alih yang digilap.
const scale = useRef(new Animated.Value(1)).current;
const onPressIn = () => {
Animated.spring(scale, { toValue: 0.9, useNativeDriver: true }).start();
};
const onPressOut = () => {
Animated.spring(scale, { toValue: 1, useNativeDriver: true }).start();
};
return (
<Pressable onPressIn={onPressIn} onPressOut={onPressOut}>
<Animated.View style={{ transform: [{ scale }] }}>
<Text>Press Me</Text>
</Animated.View>
</Pressable>
);Apakah Animated.decay?
Animated.decay mensimulasikan momentum: ia memulakan pergerakan sesuatu nilai pada halaju tertentu dan memperlahankannya secara beransur-ansur dari semasa ke semasa, seolah-olah geseran bertindak ke atasnya. Tiada nilai sasaran — animasi berjalan sehingga momentumnya habis.
Decay ialah pelengkap semula jadi kepada gerak isyarat leretan. Apabila pengguna menjentik kad atau senarai, halaju pelepasan daripada gerak isyarat disalurkan terus ke dalam animasi decay, menjadikan elemen itu terus bergerak dan memperlahankan pergerakannya secara semula jadi — sama seperti cara aplikasi mudah alih berfungsi sebelum antara muka digital.
// velocity is obtained from a gesture handler's onGestureEvent
Animated.decay(position, {
velocity: 0.8, // initial velocity (pixels per millisecond)
deceleration: 0.997, // how quickly momentum fades (0-1)
useNativeDriver: true,
}).start();Decay Selepas Gerak Isyarat Leretan
Pola decay yang biasa ialah menjejaki kedudukan jari semasa gerak isyarat seretan, kemudian apabila jari diangkat, menghantar halaju akhir daripada gerak isyarat kepada Animated.decay. Nilai deceleration (lalai 0.997) mengawal kelajuan item diperlahankan — nilai yang lebih hampir kepada 1 menghasilkan gelongsoran yang lebih lama, manakala nilai yang lebih hampir kepada 0 menghasilkan hentian yang cepat.
Selepas decay selesai, anda biasanya menetapkan item kepada keadaan akhir menggunakan animasi spring jika perlu (contohnya, menetapkan kad kembali ke tengah atau ke kedudukan yang diketepikan).
// In a PanResponder onPanResponderRelease:
onPanResponderRelease: (evt, gestureState) => {
Animated.decay(position, {
velocity: gestureState.vx, // velocity at finger lift
deceleration: 0.997,
useNativeDriver: true,
}).start(({ finished }) => {
if (finished) {
// optionally snap to final position
}
});
}Membandingkan Spring, Decay dan Timing
Memahami masa untuk menggunakan setiap jenis animasi adalah penting bagi menghasilkan antara muka yang terasa semula jadi:
- Animated.timing — boleh dijangka dengan tempoh tetap. Paling sesuai untuk maklum balas antara muka seperti perubahan kelegapan dan bar kemajuan apabila pemasaan tepat penting.
- Animated.spring — anjal dan melepasi sasaran. Paling sesuai untuk elemen interaktif yang responsif seperti butang, kad dan kemunculan modal.
- Animated.decay — berasaskan momentum tanpa penghujung tetap. Paling sesuai untuk meneruskan pergerakan selepas pelepasan gerak isyarat seperti leretan dan jentikan.
Menggunakan Halaju daripada Interaksi Pengguna
Spring juga mempunyai parameter velocity yang menetapkan halaju awal spring, lalu membolehkannya bersambung secara semula jadi dengan pergerakan gerak isyarat. Apabila pengguna menyeret kad dan melepaskannya, anda boleh memulakan spring dengan halaju gerak isyarat tersebut untuk meneruskan pergerakan dengan lancar.
Ini menghasilkan peralihan yang lancar antara gerak isyarat dan animasi — kad terasa seperti dilontar oleh tangan pengguna, bukannya dipindahkan secara tiba-tiba ke kedudukan rehatnya.
// After a pan gesture releases:
onPanResponderRelease: (evt, { vx, vy }) => {
Animated.spring(position, {
toValue: { x: 0, y: 0 }, // snap back to center
velocity: { x: vx, y: vy },
tension: 50,
friction: 8,
useNativeDriver: true,
}).start();
}Spring dengan Animated.ValueXY
Animated.ValueXY ialah pembungkus mudah yang menyimpan pasangan Animated.Values untuk koordinat x dan y. Ia memudahkan animasi 2D seperti menyeret kad. Spring dan decay kedua-duanya berfungsi dengan ValueXY, yang turut mempunyai kaedah pembantu seperti getTranslateTransform() untuk menghasilkan tatasusunan transform secara automatik.
ValueXY mengurangkan kod berulang apabila anda perlu menganimasikan kedudukan elemen dalam ruang 2D kerana anda tidak perlu mengurus dua Animated.Values yang berasingan secara manual.
const position = useRef(new Animated.ValueXY({ x: 0, y: -200 })).current;
useEffect(() => {
Animated.spring(position, {
toValue: { x: 0, y: 0 },
useNativeDriver: true,
}).start();
}, []);
return (
<Animated.View style={position.getTranslateTransform()}>
<Text>Falls into place</Text>
</Animated.View>
);Menetapkan Semula Nilai Animated
Anda boleh menetapkan semula Animated.Value kepada keadaan awalnya dengan memanggil .setValue(initialValue). Ini berguna sebelum menjalankan semula animasi — contohnya, menetapkan semula skala kepada 0 sebelum menjalankan spring kemunculan sekali lagi, atau menetapkan semula kedudukan sebelum memainkan semula animasi kemunculan.
Sentiasa tetapkan semula secara segerak sebelum memulakan animasi bagi mengelakkan kelipan. Panggil setValue dalam pengendali acara atau useEffect yang sama, kemudian terus panggil Animated.spring(...).start().
function replay() {
// Reset to start position
scale.setValue(0);
// Then spring to final position
Animated.spring(scale, {
toValue: 1,
tension: 80,
friction: 8,
useNativeDriver: true,
}).start();
}Semakan Ringkas
Uji pemahaman anda tentang konsep Pembangunan Mudah Alih React Native daripada pelajaran ini.
Ulang Kaji Pelajaran
Dalam pelajaran ini, anda telah mempelajari bahawa: Animated.spring menghasilkan pergerakan melantun berasaskan fizik yang dilaraskan dengan tension dan friction, Animated.decay mensimulasikan nyahpecutan berasaskan momentum daripada halaju awal dan setiap jenis animasi sesuai untuk pola interaksi yang berbeza — spring untuk maklum balas ketikan, decay untuk pelepasan gerak isyarat. Seterusnya, kita akan meneroka penggabungan beberapa animasi secara selari dan berurutan.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Animasi Spring dan Decay” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Animasi Spring dan Decay”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Animasi Spring dan Decay”?
Gunakan Animated.spring untuk mencipta gerakan berasaskan fizik yang melantun, laraskan parameter ketegangan dan geseran, kemudian gunakan Animated.decay untuk kesan penatalan berasaskan momentum. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Animasi Spring dan Decay” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?
Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Animated.Value dan Animated.View
- Animasi Spring dan Decay
- Menganimasikan Pelbagai Sifat Secara Selari dan Berjujukan
- useNativeDriver untuk Animasi 60fps