Bereaksi Animasi Asli: Panduan Lengkap – Codewithaden

Contoh ini adalah Kickstarter untuk React Native Animation, dan case kompleks akan dibahas di masa depan. Tapi sekarang, kami memulai proyek kami dengan menginstal Bereaksi asli menggunakan Expo

Jika Anda tidak terbiasa dengan Expo, saya sarankan Anda pertama -tama memeriksa tutorial ini Cara mengatur reaksi asli menggunakan expo . Ini akan membantu Anda mengatur Expo, dan Anda akan bangun dan berjalan dengan React Native di perangkat fisik Anda.

Bereaksi animasi asli

Bereaksi asli memberikan dua pelengkap animasi Sistem:

  1. Animasi : Untuk kontrol granular dan interaktif dari nilai -nilai tertentu, dan
  2. Layoutanimation : Untuk transaksi tata letak global animasi.

Cara yang disarankan untuk hidup dalam Bereaksi asli Untuk kebanyakan kasus adalah dengan menggunakan Animasi API.

Animasi #layout

Sistem animasi tata letak mudah diatur, dan kami tidak memiliki banyak kontrol. Beberapa bagian dari aplikasi kami juga akan dianimasikan, apakah kami bermaksud atau tidak. Jadi tidak ada banyak kontrol atas semua komponen kami. Jadi kami tidak menggunakan animasi semacam ini.

#Animasi

Lebih rumit untuk diatur, tetapi sangat cocok untuk membuat animasi yang kompleks, dan memungkinkan kita untuk menangani animasi gerakan. Itu Animasi Perpustakaan dirancang untuk membuat animasi cair, kuat, dan mudah dibangun dan dipelihara. Animasi Berfokus pada hubungan deklaratif antara input dan output, dengan transformasi yang dapat dikonfigurasi di antara dan sederhana Mulailah berhenti Metode untuk mengontrol eksekusi animasi berbasis waktu.

Tiga pertanyaan menggambarkan seluruh sistem animasi.

  1. Di mana objek atau item utama kita sekarang? Jadi itu adalah posisi x dan y dalam skenario saat ini.
  2. Kemana elemen bergerak? Jadi tempat di mana kita perlu menggeser elemen kita.
  3. Elemen mana yang akan kita pindahkan?

Jawaban untuk semua pertanyaan di atas menentukan sistem animasi.

Jadi modul animasi terdiri dari tiga hal.

  1. Nilai: Sekarang Xy Nilai suatu elemen
  2. Jenis: Jenis animasi apa yang akan kami gunakan Musim semi, waktu, pembusukan
  3. Komponen: Di mana komponen seperti Teks , Melihat , Gambar

Ini adalah aplikasi demo dasar, dan kami memindahkan kuadrat dari atas ke bawah dengan animasi.

Sekarang, jika Anda tidak ingin menggunakan Expo dan membuat proyek dan menguji Simulator atau Emulator , Anda dapat mengetikkan perintah berikut untuk menginstal Bereaksi asli di Mac. Di sisi lain, jika Anda menggunakan Expo, Anda dapat melewatkan langkah pertama.

Langkah 1: Instal React Native.

Ketik perintah berikut.

react-native init AnimationApp 

Masuk ke proyek.

cd AnimationApp 

Untuk membuka aplikasi di dalam kami simulator iOS , ketik perintah berikut.

react-native run-ios --simulator="iPhone X" 

React

Langkah 2: Buat animasi persegi.

Sekarang, buka folder proyek di dalam editor favorit Anda. Saya sarankan Anda mulai menggunakan Vscode Jika Anda belum menggunakannya. Ini adalah editor open source dan gratis terbaik untuk pengembangan JavaScript.

Oke, sekarang, buat satu folder di root yang disebut komponen, dan di dalam folder ini, buat komponen yang disebut Squareanimation.js dan tambahkan kode berikut.

// SquareAnimation.js

import React, { Component } from 'react';
import { View, Animated } from 'react-native';

class SquareAnimation extends Component {

    componentWillMount() {
        this.position = new Animated.ValueXY(0, 0);
        Animated.spring(this.position, {
            toValue: { x: 225, y: 575 }
        }).start();
    }

    render() {
        return (
            
                
            
        );
    }
}

const styles = {
    square: {
        width: 120,
        height: 120,
        backgroundColor: '#00BCD4'
    }
}
export default SquareAnimation; 

Jadi, pertama, saya telah mendefinisikan tampilan, dan bentuk tampilan itu persegi berdasarkan gayanya. Jadi kami memindahkan kuadrat dari atas ke bawah dan melihat bagaimana animasi dasar bekerja di React Native.

Pada metode siklus hidup componentwillmount (), kami telah mengatur posisi kuadrat ke 0, dan kami mulai segera memindahkan objek kami ke nilai x = 225 dan y = 575

Juga, kami telah membungkus pemandangan dengan Animated.view . Jadi kita dapat melihat animasi dari (0, 0) hingga (225, 575).

Fungsi animated.spring () akan mengambil argumen pertama sebagai posisi awal dan kemudian mengambil argumen kedua seberapa jauh kita perlu memindahkan objek itu, dan kemudian kita disebut fungsi start ().

Di sini, kami memindahkan tampilan persegi. Jadi kami telah membungkus Tampilan kuadrat (Tampilan yang memiliki gaya persegi) dengan Animated.view.

Jadi, dengan bantuan this.position.getLayout (), Kita dapat mengambil gaya lokasi objek sebelumnya dan saat ini, dan kita dapat melihat animasi yang lengkap.

Kami mengambil sebanyak elemen di dalam . Sampai sekarang, kami baru saja memilih alun -alun. Tetapi Anda dapat menambahkan sebanyak mungkin item yang Anda inginkan.

Sekarang, akhirnya, tambahkan Squareanimation.js komponen di dalam App.js mengajukan.

// App.js

import React, { Component } from 'react';
import { View } from 'react-native';
import SquareAnimation from './components/SquareAnimation';

export default class App extends Component {
  render() {
    return (
      
        
      
    );
  }
}
 

Simpan file dan lihat simulator iPhone X. Segarkan Simulator Berkali -kali, dan Anda dapat melihat bahwa kuadrat bergerak dari atas ke bawah sesuai posisi yang ditentukan.

React

Jadi contoh ini adalah implementasi yang sangat mudah Bereaksi tutorial animasi asli. Kami akan membuat animasi berbasis isyarat di posting mendatang.

Itu dia.

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *