Better React Native Animasyonlar Nasıl Oluşturulur?

Mobil uygulamalar, kullanıcı deneyimini canlandırmak için genellikle animasyon kullanır. Ancak yüksek kaliteli animasyonlar oluşturmak zor olabilir.

Neyse ki animasyon becerilerinizi geliştirmek için kullanabileceğiniz kavramlar ve teknikler var. Ardından, bir sonraki React Native mobil uygulamanız için daha iyi, daha pürüzsüz animasyonlar oluşturmak üzere bunları uygulayabilirsiniz.

Yerel Animasyonlara Tepki Ver

bu Yerel Animasyonlu Tepki library, React Native uygulamasında animasyon oluşturmanın en popüler yoludur.

aynen React'in yerleşik animasyon kitaplığıAnimated API, JavaScript tabanlı Animated kitaplığının bir parçasıdır. Animated, pürüzsüz ve akıcı animasyonlar oluşturmanıza izin veren bir dizi sınıf ve yöntem sağlar. Reanimated gibi React Native animasyonları oluşturmak için başka harika seçenekler de var.

Ancak, React Native'de iyi animasyonlar oluşturmak, yalnızca doğru kitaplığı kullanmak veya doğru özellikleri ayarlamakla ilgili değildir. Ayrıca, animasyon ilkelerini anlamak ve bunları mobil uygulama geliştirme bağlamında nasıl uygulayacağınızla da ilgilidir. İşte animasyonlarınızı oluştururken anlamanız ve not etmeniz gereken birkaç temel ilke.

Animasyon Süresini Ayarlama

Animasyonlar bir kullanıcıya pürüzsüz ve doğal gelmelidir. Bunu başarmak, oluşturduğunuz belirli animasyonlar için süreyi nasıl kullandığınıza bağlı olabilir.

Süre, bir animasyonun tamamen çalışması için geçen süreyi ifade eder. Varsayılan olarak, React Native'deki animasyonların süresi 500 milisaniyedir ancak animasyonları daha hızlı veya daha yavaş olacak şekilde ayarlayabilirsiniz.

Animasyonun süresini karmaşıklığına göre ayarlamalısınız. Fade-in gibi basit bir animasyon yalnızca kısa bir süreye ihtiyaç duyabilirken, sıçrama efektli bir içeri kaydırma gibi daha karmaşık bir animasyonun doğal ve pürüzsüz hissetmek için daha uzun sürmesi gerekebilir.

İle Animasyon.zamanlama() yöntemiyle, ihtiyaçlarınıza uygun özel bir zamanlanmış animasyon oluşturabilirsiniz.

Basit bir geçiş animasyonuna özel bir sürenin nasıl ekleneceğine ilişkin bir örneği burada bulabilirsiniz:

içe aktarmak Tepki, { useRef } itibaren'tepki';
içe aktarmak { Animasyonlu, Görünüm } itibaren"tepki-yerli";
sabit FadeInView = (sahne) => {
sabit fadeAnim = useRef(yeni Animasyonlu. Değer(0)).akım; 
 React.useEffect(() => {
 animasyonlu.zamanlama(
 solgunAnimasyon,
 {
 değer: 1,
 süre: 2000, // özel süre ayarla
 NativeDriver'ı kullanın: doğru,
 }
 ).başlangıç();
 }, [fadeAnim]);
geri dönmek (
 stil={{
 ...props.style,
 opaklık: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
ihracatvarsayılanişlevUygulama() {
geri dönmek (
esnek: 1, hizalamaÖğeleri: 'merkez', içeriği haklı çıkarmak: 'merkez'}}>
Genişlik: 250, yükseklik: 50, arka plan rengi: 'toz mavi'}}>
yazı Boyutu: 28, Metin hizalama: 'merkez', marj: 10}}>Soluklaşma içinde</Text>
 </FadeInView>
 </View>
 );
}

Animasyonunuz için bir süre seçerken, hız ve akıcılık arasında doğru dengeyi kurmanız önemlidir.

İlk deneme yaparken daha uzun bir süre ile başlamayı deneyin. Daha uzun bir süre, hareket hızı işlevini ayarlamanız ve animasyonunuzu iyileştirmeniz için size daha fazla zaman verir. Genel etkiden memnun kaldığınızda süreyi istediğiniz zaman kısaltabilirsiniz.

Hareket Hızlandırma İşlevlerini Kullanın

Basit animasyonların sabit bir hızı olabilir, ancak hızın değiştirilmesi daha doğal efektler oluşturabilir. Hareket hızı işlevleri, bir animasyonun zaman içindeki değişim oranını kontrol eder. Animasyonlarınızın yavaş başlayıp sonra hızlanmasını sağlayabilirler. Animasyon ilerledikçe farklı hızlar ayarlamak, pürüzsüz ve ilgi çekici bir animasyon oluşturabilir.

Hareket hızı işlevi kullanmanın bu örneğini ele alalım:

içe aktarmak Tepki, { useRef } itibaren'tepki';
içe aktarmak { Animasyonlu, Görünüm } itibaren"tepki-yerli";
sabit FadeInView = (sahne) => {
sabit fadeAnim = useRef(yeni Animasyonlu. Değer(0)).akım; 
 React.useEffect(() => {
 animasyonlu.zamanlama(
 solgunAnimasyon,
 {
 değer: 1,
 süre: 2000,
 hareket hızı: Animated.easeOut, // burada yumuşatma işlevini kullanın
 NativeDriver'ı kullanın: doğru,
 }
 ).başlangıç();
 }, [fadeAnim]);
geri dönmek (
 stil={{
 ...props.style,
 opaklık: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
ihracatvarsayılanişlevUygulama() {
geri dönmek (
esnek: 1, hizalamaÖğeleri: 'merkez', içeriği haklı çıkarmak: 'merkez'}}>
Genişlik: 250, yükseklik: 50, arka plan rengi: 'toz mavi'}}>
yazı Boyutu: 28, Metin hizalama: 'merkez', marj: 10}}>Gitme</Text>
 </FadeInView>
 </View>
 );
}

Bu kod kullanır Animated.easeOut bir animasyonun opaklığının değişim oranını kontrol etme işlevi Görüş. bu Hareketli.zamanlama() yöntemi, animasyonun sona erdiğinde yavaşlamış gibi görünmesini sağlamak için opaklığı iki saniyelik bir süre içinde kademeli olarak 0'dan 1'e değiştirmek için kolaylaştırma işlevini kullanır.

Kolay giriş, kolay çıkış ve kolay giriş dahil olmak üzere, animasyonlarınızın daha yumuşak görünmesini sağlamak için farklı türde hareket hızı işlevleri kullanabilirsiniz.

Doğru yumuşatma işlevini seçmek, uygulamanızın animasyonlarının algılanan kalitesinde büyük bir fark yaratabilir. Onlarla oynamak ve özel kullanım durumlarınız için neyin en iyi olduğunu görmek için biraz zaman ayırmaya değer.

Anahtar Kareler Karmaşık Animasyonlarda Yardım Ediyor

Anahtar kareler, animasyonunuzda konum, ölçek veya döndürme gibi özelliklerde değişiklik yapmak istediğiniz anları tam olarak belirlemenizi sağlayan işaretçilerdir. Animasyona rehberlik etmek için zaman içinde noktaları işaretlemek gibidir.

bir dizi kullanabilirsiniz herhangi bir özellik için belirli değerler ayarlamak üzere anahtar kareler canlandırmak istiyorsunuz. Bu, özellikle karakter hareketi içerenler gibi karmaşık animasyonlar için zamanlamayı ve davranışı kontrol etmenize yardımcı olur.

Temel bir anahtar kare animasyonu oluşturmak için, aralarında animasyon yapmak istediğiniz anahtar kareleri ve toplam süreyi belirtmeniz gerekir.

Örneğin, (0, 0) başlangıç ​​konumundan (100, 100) bitiş konumuna bir saniyelik bir süre boyunca bir kareyi canlandırmak istediğinizi varsayalım.

Bunun gibi bir anahtar kare dizisi oluşturabilirsiniz:

sabit anahtar kareler = [
 { X: 0, y: 0 },
 { X: 50, y: 50 },
 { X: 100, y: 100 },
];

Bu durumda, üç ana kare vardır: biri animasyonun başında, biri ortasında ve biri de sonunda. Ardından, anahtar kareler arasında düzgün bir animasyon oluşturmak için bu anahtar kare dizisini animasyon kitaplığınıza 1.000 milisaniyelik bir süreyle geçirebilirsiniz.

Bazı kitaplıklarda, animasyonun nasıl ilerlediğini kontrol etmek için bir hareket hızı işlevi de belirtmeniz gerekir. Ancak, anahtar kareleri ve süreyi belirleme temel fikrini çoğu animasyon kitaplığına uygulayabilirsiniz.

Donanım Hızlandırması Olan Cihazın Avantajından Yararlanın

Donanım hızlandırma, React Native animasyonlarınızın performansını optimize etmek için güçlü bir araç olabilir. Cihazın grafik donanımından yararlanarak, işleme işinin bir kısmını CPU'dan yükleyebilir ve karşılığında daha yumuşak, daha hızlı yanıt veren animasyonlar elde edebilirsiniz.

Cihazın GPU'su, JavaScript iş parçacığının bunu yapması yerine, animasyonlu değerleri ve stilleri yerel olarak işleyecektir.

Donanım hızlandırma tüm cihazlarda bulunmayabilir, bu nedenle en iyi performansı sağlamak için animasyonlarınızı çeşitli gerçek cihazlarda test etmeniz önemlidir.