Contoh Animasi Praktis dalam React Native

() translation by (you can also view the original English article)

Dalam tutorial ini, Anda akan belajar bagaimana menerapkan animasi yang sering digunakan dalam aplikasi mobile. Secara khusus, Anda akan belajar bagaimana menerapkan animasi yang:

Provide visual feedback: misalnya, ketika pengguna menekan tombol, Anda ingin menggunakan animasi untuk menunjukkan kepada pengguna bahwa tombol tersebut benar-benar ditekan.
Show the current system status: ketika melakukan proses yang tidak selesai secara instan (misalnya ketika mengunggah foto atau mengirim email), Anda ingin menampilkan animasi sehingga pengguna memiliki gagasan berapa lama proses akan berlangsung.
Visually connect transition states: ketika pengguna menekan tombol untuk membawa sesuatu ke depan layar, transisi ini harus dianimasikan agar pengguna tahu dari mana asal elemen tersebut.
Grab the user's attention: ketika ada pemberitahuan penting, Anda dapat menggunakan animasi untuk menarik perhatian pengguna.

Tutorial ini adalah sekuel untuk Animate Your React Native App post. Jadi jika Anda baru dalam animasi di React Native, pastikan untuk memeriksanya terlebih dahulu, karena beberapa konsep yang akan digunakan dalam tutorial ini dijelaskan secara lebih terperinci di sana.

React Native

Animate Your React Native App

Wernher-Bel Ancheta

Juga, jika Anda ingin mengikuti, Anda dapat menemukan kode sumber lengkap yang digunakan dalam tutorial ini di GitHub repo.

Apa yang sedang kita bangun

Kita akan membangun aplikasi yang mengimplementasikan setiap jenis animasi yang saya sebutkan sebelumnya. Secara khusus, kita akan membuat halaman-halaman berikut, yang masing-masing akan mengimplementasikan animasi untuk tujuan yang berbeda.

News Page: menggunakan isyarat untuk memberikan umpan balik visual dan menunjukkan status sistem saat ini.
Buttons Page: menggunakan tombol untuk memberikan umpan balik visual dan menunjukkan status sistem saat ini.
Progress Page: menggunakan bilah progres untuk menunjukkan status sistem saat ini.
Expand Page: secara visual menghubungkan status transisi menggunakan gerakan memperluas dan menyusut.
AttentionSeeker Page: menggunakan gerakan eye-catching untuk menarik perhatian pengguna.

Jika Anda ingin melihat preview dari masing-masing animasi, periksa Imgur album ini.

Mendirikan Proyek

Mulai dengan membuat proyek Native React baru:

1	react-native init RNPracticalAnimations

Setelah proyek dibuat, navigasi di dalam folder yang baru dibuat, buka file package.json, dan tambahkan yang berikut ke dependencies:

1	"react-native-animatable": "^0.6.1",
2	"react-native-vector-icons": "^3.0.0"

Jalankan npm install untuk menginstal kedua paket tersebut. react-native-animatable digunakan untuk mengimplementasikan animasi dengan mudah, dan react-native-vector-icons digunakan untuk membuat ikon untuk halaman ekspansi nanti. Jika Anda tidak ingin menggunakan ikon, Anda bisa tetap menggunakan komponen Text. Jika tidak, ikuti petunjuk pemasangan of react-native-vector-icons pada their GitHub page.

Membangun Aplikasi

Buka file index.android.js atau file index.ios.js dan ganti konten yang ada dengan yang berikut:

import React, { Component } from 'react';

import {
  AppRegistry
} from 'react-native';

import NewsPage from './src/pages/NewsPage';
import ButtonsPage from './src/pages/ButtonsPage';
import ProgressPage from './src/pages/ProgressPage';
import ExpandPage from './src/pages/ExpandPage';
import AttentionSeekerPage from './src/pages/AttentionSeekerPage';

class RNPracticalAnimation extends Component {
  render() {
    return (
       <NewsPage />
    );
  }
}

AppRegistry.registerComponent('RNPracticalAnimation', () => RNPracticalAnimation);

Setelah selesai, pastikan untuk membuat file yang sesuai sehingga Anda tidak mendapatkan kesalahan apa pun. Semua file yang akan kita kerjakan disimpan di bawah direktori src. Di dalam direktori tersebut adalah folder berikut:

components: komponen reusable yang akan digunakan oleh komponen atau halaman lain.
img: gambar yang akan digunakan di seluruh aplikasi. Anda bisa mendapatkan gambar dari GitHub repo.
pages: halaman-halaman aplikasi.

Halaman Berita

Mari kita mulai dengan Halaman berita.

Pertama, tambahkan komponen yang akan kita gunakan:

import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  ScrollView,
  RefreshControl
} from 'react-native';

import NewsItem from '../components/NewsItem';

Anda seharusnya sudah terbiasa dengan sebagian besar dari ini, kecuali untuk RefreshControl dan komponen NewsItem kustom, yang akan kita buat nanti. RefreshControl digunakan untuk menambahkan fungsionalitas "pull to refresh" dalam komponen ScrollView atau ListView. Jadi sebenarnya yang akan menangani gerakan menggesek ke bawah dan animasi untuk kita. Tidak perlu menerapkan milik kita sendiri. Ketika Anda mendapatkan lebih banyak pengalaman dalam menggunakan React Native, Anda akan melihat bahwa animasi sebenarnya dibangun untuk beberapa components, dan tidak perlu menggunakan kelas Animated untuk mengimplementasikan sendiri.

Buat komponen yang akan menampung seluruh halaman:

1	export default class NewsPage extends Component {
2	...
3	}

Di dalam constructor, menginisialisasi nilai animasi untuk menyimpan opasitas saat ini (opacityValue) dari item berita. Kita ingin agar berita tidak terlalu buram saat item berita sedang disegarkan. Ini memberi pengguna sebuah ide bahwa mereka tidak dapat berinteraksi dengan seluruh halaman sementara item berita sedang disegarkan. is_news_refreshing digunakan sebagai saklar untuk menunjukkan apakah item berita sedang disegarkan atau tidak.

constructor(props) {
    super(props);
    this.opacityValue = new Animated.Value(0);
    this.state = {
        is_news_refreshing: false,
        news_items: [
            {
                title: 'CTO Mentor Network – a virtual peer-to-peer network of CTOs',
                website: 'ctomentor.network',
                url: 'https://ctomentor.network/'
            },
            {
                title: 'The No More Ransom Project',
                website: 'nomoreransom.org',
                url: 'https://www.nomoreransom.org/'
            },
            {
                title: 'NASA Scientists Suggest We’ve Been Underestimating Sea Level Rise',
                website: 'vice.com',
                url: 'http://motherboard.vice.com/read/nasa-scientists-suggest-weve-been-underestimating-sea-level-rise'
            },
            {
                title: 'Buttery Smooth Emacs',
                website: 'facebook.com',
                url: 'https://www.facebook.com/notes/daniel-colascione/buttery-smooth-emacs/10155313440066102/'
            },
            {
                title: 'Elementary OS',
                website: 'taoofmac.com',
                url: 'http://taoofmac.com/space/blog/2016/10/29/2240'
            },
            {
                title: 'The Strange Inevitability of Evolution',
                website: 'nautil.us',
                url: 'http://nautil.us/issue/41/selection/the-strange-inevitability-of-evolution-rp'
            },
        ]
    }
}

Fungsi opacity () adalah salah satu yang akan memicu animasi untuk mengubah opacity.

opacity() {
    this.opacityValue.setValue(0);
    Animated.timing(
      this.opacityValue,
      {
        toValue: 1,
        duration: 3500,
        easing: Easing.linear
      }
    ).start();
}

Di dalam fungsi render (), tentukan bagaimana nilai opasitas akan berubah. Di sini, outputRange adalah [1, 0, 1], yang berarti bahwa itu akan mulai pada opasitas penuh, kemudian pergi ke nol opacity, dan kemudian kembali ke opacity penuh lagi. Sebagaimana didefinisikan di dalam opacity () fungsi, transisi ini akan dilakukan selama 3,500 milidetik (3,5 detik).

render() {

    const opacity = this.opacityValue.interpolate({
      inputRange: [0, 0.5, 1],
      outputRange: [1, 0, 1]
    });

    ...
}

Komponen <RefreshControl> ditambahkan ke <ScrollView>. Ini memanggil fungsi refreshNews () kapan saja pengguna menggesek ke bawah saat mereka berada di bagian atas daftar (ketika scrollY adalah 0). Anda dapat menambahkan colors prop untuk menyesuaikan warna animasi refresh.

return (
    <View style={styles.container}>
        <View style={styles.header}>
        </View>
        <ScrollView 
            refreshControl={
                <RefreshControl
                    colors={['#1e90ff']}
                    refreshing={this.state.is_news_refreshing}
                    onRefresh={this.refreshNews.bind(this)}
                />
            }
            style={styles.news_container}>
            ...
        </ScrollView>
    </View>
);

Di dalam <ScrollView>, gunakan komponen<Animated.View> dan atur style ke nilai opacity:

1	<Animated.View style={[{opacity}]}>
2	{ this.renderNewsItems() }
3	</Animated.View>

Fungsi refreshNews() memanggil fungsi opacity() dan memperbaharui nilai is_news_refreshing untuk true. Hal ini memungkinkan komponen <RefreshControl>mengetahui bahwa animasi refresh seharusnya sudah ditampilkan. Setelah itu, menggunakan setTimeout () untuk memperbarui nilai is_news_refreshing kembali ke false setelah 3.500 milidetik (3,5 detik). Ini akan menyembunyikan refresh animasi dari tampilan. Pada saat itu, animasi opacity juga harus dilakukan karena kita menetapkan nilai yang sama untuk durasi dalam fungsi opacity sebelumnya.

refreshNews() {
    this.opacity();
    this.setState({is_news_refreshing: true});
    setTimeout(() => {
        this.setState({is_news_refreshing: false});
    }, 3500);
}

renderNewsItems () mengambil larik item berita yang kami nyatakan sebelumnya di dalam constructor() dan menuliskan masing-masing menggunakan <NewsItem> komponen.

renderNewsItems() {
    return this.state.news_items.map((news, index) => {
        return (
            <NewsItem key={index} index={index} news={news} />
        );
    });
}

NewsItem Component

Komponen NewsItem (src/components/NewsItem.js) menjadikan judul dan situs berita dan membungkus mereka di dalam <Button>komponen sehingga mereka dapat berinteraksi dengannya.

import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  View,
} from 'react-native';

import Button from './Button';

const NewsItem = ({ news, index }) => {

    function onPress(news) {
        //do anything you want
    }
    
    return (
        <Button
            key={index}
            noDefaultStyles={true}
            onPress={onPress.bind(this, news)}
        >
            <View style={styles.news_item}>
                <Text style={styles.title}>{news.title}</Text>
                <Text>{news.website}</Text>
            </View>
        </Button>
    );
}

const styles = StyleSheet.create({
    news_item: {
        flex: 1,
        flexDirection: 'column',
        paddingRight: 20,
        paddingLeft: 20,
        paddingTop: 30,
        paddingBottom: 30,
        borderBottomWidth: 1,
        borderBottomColor: '#E4E4E4'
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold'
    }
});

export default NewsItem;

Button Component

The Button component (src/components/Button.js) menggunakan komponen TouchableHighlight untuk membuat sebuah button. Alat peraga underlayColor digunakan untuk menentukan warna lapisan bawah ketika tombol ditekan. Ini adalah cara React Native's built-in menyediakan umpan balik visual; kemudian di bagian Buttons Page, kita akan melihat cara lain button dapat memberikan umpan balik visual.

import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  TouchableHighlight,
} from 'react-native';

const Button = (props) => {

    function getContent() {
        if(props.children){
            return props.children;
        }
        return <Text style={props.styles.label}>{props.label}</Text>
    }

    return (
        <TouchableHighlight 
            underlayColor="#ccc" 
            onPress={props.onPress} 
            style={[
                props.noDefaultStyles ? '' : styles.button, 
                props.styles ? props.styles.button : '']}
        >
            { getContent() }
        </TouchableHighlight>
    );
}

const styles = StyleSheet.create({
    button: {
        alignItems: 'center',
        justifyContent: 'center',
        padding: 20,
        borderWidth: 1,
        borderColor: '#eee',
        margin: 20
    }
});

export default Button;

Kembali ke komponen NewsPage, tambahkan styling:

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    header: {
        flexDirection: 'row',
        backgroundColor: '#FFF',
        padding: 20,
        justifyContent: 'space-between',
        borderBottomColor: '#E1E1E1',
        borderBottomWidth: 1
    },
    news_container: {
        flex: 1,
    }
});

Buttons Page

Button page (src / pages / ButtonsPage.js) menunjukkan tiga jenis button: button yang biasa digunakan yang disorot,button yang menjadi sedikit lebih besar, dan button yang menunjukkan status operasi saat ini. Memulai dengan menambahkan komponen yang diperlukan:

import React, { Component } from 'react';

import {
  StyleSheet,
  View
} from 'react-native';

import Button from '../components/Button';
import ScalingButton from '../components/ScalingButton';
import StatefulButton from '../components/StatefulButton';

Sebelumnya, Anda melihat bagaimana the Button component bekerja, jadi kita hanya akan fokus pada dua button lain.

Scaling Button Component

Pertama, mari kita lihat pada button skala (src/components/ScalingButton.js). Tidak seperti buttonl yang kita gunakan sebelumnya, ini menggunakan komponen TouchableWithoutFeedback built-in untuk membuat button. Sebelumnya, kami menggunakan komponen TouchableHighlight, yang dilengkapi dengan semua lonceng dan peluit untuk sesuatu yang dianggap sebagai button. Anda dapat memikirkan TouchableWithoutFeedback sebagai button bare-bones di mana Anda harus menentukan semua yang perlu dilakukan ketika pengguna mengetuknya. Ini sangat cocok untuk kasus penggunaan kita karena kita tidak perlu khawatir tentang perilaku button default yang menghalangi animasi yang ingin kita terapkan.

import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  Animated,
  Easing,
  TouchableWithoutFeedback
} from 'react-native';

Sama seperti komponen Button, ini akan menjadi komponen fungsional karena kita tidak benar-benar perlu bekerja dengan negara.

1	const ScalingButton = (props) => {
2	...
3	}

Di dalam komponen, buat nilai animasi yang akan menyimpan skala button saat ini.

1	var scaleValue = new Animated.Value(0);

Tambahkan fungsi yang akan memulai animasi skala . Kita tidak ingin aplikasi tampak lambat, jadi buat duration serendah mungkin tetapi juga cukup tinggi sehingga pengguna dapat melihat apa yang terjadi. 300 milidetik adalah titik awal yang baik, tetapi merasa bebas untuk bermain-main dengan nilai.

function scale() {
    scaleValue.setValue(0);
    Animated.timing(
        scaleValue,
        {
          toValue: 1,
          duration: 300,
          easing: Easing.easeOutBack
        }
    ).start();
}

Tentukan bagaimana button akan diskalakan (outputRange) tergantung pada nilai saat ini (inputRange). Kita tidak ingin itu menjadi terlalu besar sehingga kita tetap dengan 1,1 sebagai nilai tertinggi. Ini berarti akan lebih besar 0,1 dari ukuran aslinya di tengah (0,5) seluruh animasi.

const buttonScale = scaleValue.interpolate({
  inputRange: [0, 0.5, 1],
  outputRange: [1, 1.1, 1]
});

return (
    <TouchableWithoutFeedback onPress={onPress}>
        <Animated.View style={[ 
            props.noDefaultStyles ? styles.default_button : styles.button, 
            props.styles ? props.styles.button : '',
            {
                transform: [
                    {scale: buttonScale}
                ]
            }
            ]}
        >
            { getContent() }
        </Animated.View>
    </TouchableWithoutFeedback>
);

Fungsi onPress () menjalankan animasi skala terlebih dahulu sebelum memanggil metode yang diteruskan oleh pengguna melalui alat peraga.

1	function onPress() {
2	scale();
3	props.onPress();
4	}

Fungsi getContent () menampilkan komponen anak jika tersedia. Jika tidak, komponen Text yang berisi label props ditampilkan.

function getContent() {
    if(props.children){
        return props.children;
    }
    return <Text style={props.styles.label}>{ props.label }</Text>;
}

Tambahkan gaya dan ekspor button:

const styles = StyleSheet.create({
    default_button: {
        alignItems: 'center',
        justifyContent: 'center'
    },
    button: {
        alignItems: 'center',
        justifyContent: 'center',
        padding: 20,
        borderWidth: 1,
        borderColor: '#eee',
        margin: 20
    },
});

export default ScalingButton;

Stateful Button Component

Berikutnya adalah stateful button (src/components/StatefulButton.js). Saat ditekan, button ini akan mengubah warna latar belakangnya dan menampilkan gambar pemuatan hingga operasi selesai.

Memuat gambar yang kita akan menggunakan adalah animasi gif. Secara default, React Native on Android tidak mendukung gif animasi. Untuk membuatnya bekerja, Anda harus mengedit android/app/build.gradle file dan menambahkan compile 'com.facebook.fresco:animated-gif:0.12.0' di bawah dependencies seperti:

dependencies {
    //default dependencies here
    
    compile 'com.facebook.fresco:animated-gif:0.12.0'
}

Jika Anda menggunakan iOS, gif animasi harus bekerja secara default.

Kembali ke komponen button stateful, seperti button scaling, ini menggunakan komponen TouchableWithoutFeedback untuk membuat button karena itu juga akan mengimplementasikan animasinya sendiri.

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableWithoutFeedback,
  Animated
} from 'react-native';

Tidak seperti button skala, komponen ini akan menjadi komponen berbasis kelas penuh karena mengelola negara sendiri.

Di dalam constructor(), buat nilai animasi untuk menyimpan warna latar belakang saat ini. Setelah itu, inisialisasi status yang berfungsi sebagai saklar untuk menyimpan status tombol saat ini. Secara default, ini disetel ke false. Setelah pengguna mengetuk button, itu akan diperbarui menjadi true dan hanya akan disetel ke false lagi setelah proses imajiner selesai dijalankan.

export default class StatefulButton extends Component {

    constructor(props) {
        super(props);
        this.colorValue = new Animated.Value(0);
        this.state = {
            is_loading: false
        }
    }
}

Di dalam fungsi render (), tentukan warna latar belakang berbeda yang akan digunakan berdasarkan nilai saat ini dari nilai animasi.

render() {

    const colorAnimation = this.colorValue.interpolate({
      inputRange: [0, 50, 100],
      outputRange: ['#2196f3', '#ccc', '#8BC34A']
    });

    ...
}

Selanjutnya, membungkus semuanya dalam komponen TouchableWithoutFeedback, dan dalam <Animated.View>adalah tempat warna latar belakang animasi diterapkan. Kita juga merender citra pemuat jika nilai is_loading saat ini true. Label button juga berubah berdasarkan nilai ini.

return (
    <TouchableWithoutFeedback onPress={this.onPress.bind(this)}>
        <Animated.View style={[
            styles.button_container,
            this.props.noDefaultStyles ? '' : styles.button, 
            this.props.styles ? this.props.styles.button : '',
            {
                backgroundColor: colorAnimation
            },
            ]}>
            { 
                this.state.is_loading && 
                <Image
                  style={styles.loader}
                  source={require('../img/ajax-loader.gif')}
                />
            }
            <Text style={this.props.styles.label}>
            { this.state.is_loading ? 'loading...' : this.props.label}
            </Text>
        </Animated.View>
    </TouchableWithoutFeedback>
);

Ketika button ditekan, pertama-tama menjalankan fungsi yang dilewatkan melalui props sebelum melakukan animasi.

1	onPress() {
2	this.props.onPress();
3	this.changeColor();
4	}

Fungsi changeColor() bertanggung jawab untuk memperbarui negara dan menghidupkan warna latar belakang button. Di sini kita akan mengasumsikan bahwa proses akan mengambil 3.000 milidetik (3 detik). Tapi dalam skenario dunia nyata, Anda tidak dapat selalu tahu berapa lama proses yang akan berlangsung. Yang dapat Anda lakukan adalah menjalankan animasi untuk jangka waktu yang lebih pendek dan kemudian memanggil fungsi changeColor () secara rekursif hingga proses selesai.

changeColor() {
  this.setState({
    is_loading: true
  });

  this.colorValue.setValue(0);
  Animated.timing(this.colorValue, {
    toValue: 100,
    duration: 3000
  }).start(() => {
    this.setState({
        is_loading: false
    });
  });  
}

Tambahkan Gaya:

const styles = StyleSheet.create({
    button_container: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#2196f3'
    },
    button: {
        alignItems: 'center',
        justifyContent: 'center',
        padding: 20,
        borderWidth: 1,
        borderColor: '#eee',
        margin: 20
    },
    loader: {
        width: 16,
        height: 16,
        marginRight: 10
    }
});

Kembali pada halaman Buttons : buat komponen, render ketiga jenis button , dan tambahkan gaya mereka.

export default class ButtonsPage extends Component {
    press() {
        //do anything you want
    }

    render() {
        return (
            <View style={styles.container}>
                <Button 
                    underlayColor={'#ccc'} 
                    label="Ordinary Button" 
                    onPress={this.press.bind(this)}
                    styles={{button: styles.ordinary_button, label: styles.button_label}} />

                <ScalingButton 
                    label="Scaling Button" 
                    onPress={this.press.bind(this)}
                    styles={{button: styles.animated_button, label: styles.button_label}} />

                <StatefulButton 
                    label="Stateful Button" 
                    onPress={this.press.bind(this)}
                    styles={{button: styles.stateful_button, label: styles.button_label}} />
            </View>
        );
    }
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        padding: 30
    },
    ordinary_button: {
        backgroundColor: '#4caf50',
    },
    animated_button: {
        backgroundColor: '#ff5722'  
    },
    button_label: {
        color: '#fff',
        fontSize: 20,
        fontWeight: 'bold'
    }
});

Progress Page

Laman Kemajuan (src / pages / ProgressPage.js) menampilkan animasi kemajuan kepada pengguna selama proses yang berjalan lama. Kami akan mengimplementasikan sendiri alih-alih menggunakan komponen bawaan karena React Native tidak memiliki cara terpadu untuk menerapkan animasi bilah kemajuan. Jika Anda tertarik, berikut adalah tautan ke dua komponen bilah progres yang ada di dalamnya:

Untuk membangun halaman Kemajuan kita, mulailah dengan mengimpor komponen yang kita butuhkan:

import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  View,
  Animated,
  Dimensions
} from 'react-native';

Kita menggunakan Dimensiuntuk mendapatkan lebar perangkat. Dari situ, kita bisa menghitung lebar yang tersedia untuk progress bar. Kita akan melakukannya dengan mengurangi jumlah paddings kiri dan kanan yang akan kita tambahkan ke kontainer, dan juga batas kiri dan kanan yang akan kita tambahkan ke bilah progres bar.

1	var { width } = Dimensions.get('window');
2	var available_width = width - 40 - 12;

Untuk rumus di atas agar masuk akal, mari lewati langsung ke gaya:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center'
  },
  progress_container: {
    borderWidth: 6,
    borderColor: '#333',
    backgroundColor: '#ccc'
  },
  progress_status: {
    color: '#333',
    fontSize: 20,
    fontWeight: 'bold',
    alignSelf: 'center'
  }
});

The container memiliki padding 20 di setiap sisi — sehingga kita kurangi 40 dari the available_width. The progress_container memiliki batas 6 di setiap sisi, jadi kami hanya menggandakan itu lagi dan mengurangi 12 dari lebar bilah kemajuan.

export default class ProgressPage extends Component {
  
  constructor(props) {
    super(props);
    this.progress = new Animated.Value(0);
    this.state = {
      progress: 0
    };
  }

}

Membuat komponen, dan di dalam konstruktor buat nilai animasi untuk menyimpan nilai animasi saat ini untuk bilah kemajuan.

Saya mengatakan "values" karena kali ini kita akan menggunakan nilai animasi tunggal ini untuk menganimasi lebar dan warna background kemajuan. Anda akan melihat ini dalam tindakan nanti.

Selain itu, Anda juga perlu menginisialisasi kemajuan saat ini di negara bagian.

export default class ProgressPage extends Component {
  
  constructor(props) {
    super(props);
    this.progress = new Animated.Value(0);
    this.state = {
      progress: 0
    };
  }

}

Di dalam fungsi render (), progress_container bertindak sebagai wadah untuk bilah progres, dan <Animated.View> di dalamnya adalah bilah progres aktual yang lebar dan warna latar belakangnya akan berubah tergantung pada kemajuan saat ini. Di bawah ini, kami juga memberikan kemajuan saat ini dalam bentuk teks (0% untuk 100%).

render() {
    return (
        <View style={styles.container}>
          <View style={styles.progress_container}>
            <Animated.View
              style={[this.getProgressStyles.call(this)]}
            > 
            </Animated.View>
          </View>
          <Text style={styles.progress_status}>
          { this.state.progress }
          </Text>
        </View>
    );
}

Gaya untuk progress bar dikembalikan oleh fungsi getProgressStyles (). Di sini kita sedang menggunakan nilai animasi dari sebelumnya untuk menghitung lebar dan latar belakang warna. Hal ini dilakukan agar tidak perlu membuat nilai animasi yang terpisah untuk setiap animasi karena kita sedang interpolasi nilai yang sama pula. Jika kita menggunakan dua nilai-nilai terpisah, kita akan perlu memiliki dua animasi secara paralel, yang kurang efisien.

getProgressStyles() {
  var animated_width = this.progress.interpolate({
    inputRange: [0, 50, 100],
    outputRange: [0, available_width / 2, available_width]
  });
  //red -> orange -> green
  const color_animation = this.progress.interpolate({
    inputRange: [0, 50, 100],
    outputRange: ['rgb(199, 45, 50)', 'rgb(224, 150, 39)', 'rgb(101, 203, 25)']
  });

  return {
    width: animated_width,
    height: 50, //height of the progress bar
    backgroundColor: color_animation
  }
}

Animasi segera dijalankan setelah komponen dipasang. Mulailah dengan menetapkan nilai awal kemajuan, dan kemudian menambahkan pendengar untuk nilai kemajuan saat ini. Hal ini memungkinkan kita untuk memperbarui negara setiap kali perubahan nilai kemajuan. Kita menggunakan parseInt (), jadi nilai progresnya dikonversi ke bilangan bulat. Setelah itu, kita mulai animasi dengan durasi 7.000 milidetik (7 detik). Setelah itu selesai, kita mengubah teks progress untuk selesai!

componentDidMount() {
    this.progress.setValue(0);
    this.progress.addListener((progress) => {
      this.setState({
        progress: parseInt(progress.value) + '%'
      });
    });

    Animated.timing(this.progress, {
      duration: 7000,
      toValue: 100
    }).start(() => {
      this.setState({
        progress: 'done!'
      })
    });
}

Memperluas Halaman

Laman perluasan (src / pages / ExpandPage.js) menunjukkan cara menghubungkan status transisi secara visual menggunakan gerakan yang meluas dan menyusut. Penting untuk menunjukkan kepada pengguna bagaimana elemen tertentu muncul. Ini menjawab pertanyaan dari mana elemen itu berasal dan apa perannya dalam konteks saat ini. Seperti biasa, mulai dengan mengimpor hal-hal yang kita butuhkan:

import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  View,
  Animated
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';
import ScalingButton from '../components/ScalingButton';

Di dalam constructor(), buat nilai animasi yang akan menyimpan posisi-y saat ini dari menu. Idenya adalah memiliki kotak besar yang cukup untuk memuat semua item menu.

Awalnya, kotak itu akan memiliki nilai negatif untuk bottom bawah. Ini berarti bahwa hanya ujung seluruh kotak akan ditampilkan secara default. Setelah pengguna mengetuk menu, seluruh kotak akan terlihat seolah-olah diperluas, padahal kenyataannya kita hanya mengubah bottom bawah sehingga semuanya ditampilkan.

Anda mungkin bertanya-tanya mengapa kita menggunakan pendekatan ini daripada hanya menskalakan kotak untuk mengakomodasi semua anak-anaknya. Itu karena kita hanya perlu menskala atribut ketinggian. Pikirkan apa yang terjadi pada gambar ketika Anda hanya menyesuaikan tinggi atau lebar mereka saja — mereka terlihat memanjang. Hal yang sama akan terjadi pada elemen-elemen di dalam kotak.

Kembali ke constructor(), kita juga menambahkan bendera negara yang menunjukkan apakah menu saat ini diperluas atau tidak. Kita memerlukan ini karena kita perlu menyembunyikan tombol untuk memperluas menu jika menu sudah diperluas.

export default class ExpandPage extends Component {

  constructor(props) {
    super(props);
    this.y_translate = new Animated.Value(0);
    this.state = {
      menu_expanded: false
    };
  }

  ...
}

Di dalam fungsi render (), tentukan bagaimana bottom bawah akan diterjemahkan. InputRange adalah 0 dan 1, dan outputRange adalah 0 dan -300. Jadi jika y_translate memiliki nilai 0, tidak ada yang akan terjadi karena ekuivalen outputRange adalah 0. Tetapi jika nilainya menjadi 1, posisi bottom menu diterjemahkan ke -300 dari posisi semula.

Perhatikan tanda negatif, karena jika itu hanya 300, kotak akan turun lebih jauh. Jika angka negatif, sebaliknya akan terjadi.

render() {
    const menu_moveY = this.y_translate.interpolate({
        inputRange: [0, 1],
        outputRange: [0, -300]
    });
    
    ...
}

Agar ini lebih masuk akal, mari lewati ke gaya:

const styles = StyleSheet.create({
  container: {
    flex: 10,
    flexDirection: 'column'
  },
  body: {
    flex: 10,
    backgroundColor: '#ccc'
  },
  footer_menu: {
    position: 'absolute',
    width: 600,
    height: 350, 
    bottom: -300, 
    backgroundColor: '#1fa67a',
    alignItems: 'center'
  },
  tip_menu: {
    flexDirection: 'row'
  },
  button: {
    backgroundColor: '#fff'
  },
  button_label: {
    fontSize: 20,
    fontWeight: 'bold'
  }
});

Perhatikan gaya footer_menu. height totalnya ditetapkan menjadi 350, dan posisi bottom adalah -300, yang berarti hanya 50 teratas yang ditampilkan secara default. Ketika menerjemahkan animasi dijalankan untuk memperluas menu, posisi bottom berakhir dengan nilai 0. Mengapa? Karena jika Anda masih ingat aturan ketika mengurangi angka negatif, dua tanda minus menjadi positif. Jadi (-300) - (-300) menjadi (-300) + 300.

Kita semua tahu apa yang terjadi ketika menambahkan angka positif dan negatif: mereka membatalkan satu sama lain. Jadi posisi bottom akhirnya menjadi 0, dan seluruh menu akan ditampilkan.

Kembali ke fungsi render (), kita memiliki konten utama (body) dan menu footer, yang merupakan salah satu yang akan diperluas dan menyusut. The translateY transform digunakan untuk menerjemahkan posisinya di sumbu Y. Karena seluruh container memiliki flex: 10 dan body juga flex: 10, titik awal sebenarnya di bagian paling bawah layar.

return (
  <View style={styles.container}>
    <View style={styles.body}></View>
    <Animated.View 
      style={[ 
        styles.footer_menu,
        {
          transform: [
            {
              translateY: menu_moveY
            }
          ]
        }
      ]}
    >
      
      ...

    </Animated.View>
  </View>
);  

Di dalam <Animated.View>adalah tip_menu dan menu lengkap. Jika menu diperluas, kami tidak ingin menu tip ditampilkan, jadi kami hanya merendernya jika menu_expanded disetel ke false.

{
  !this.state.menu_expanded &&
  <View style={styles.tip_menu}>
    <ScalingButton onPress={this.openMenu.bind(this)} noDefaultStyles={true}>
      <Icon name="ellipsis-h" size={50} color="#fff" />
    </ScalingButton>
  </View>
} 

Di sisi lain, kami hanya ingin menampilkan menu lengkap jika menu_expanded disetel ke true. Setiap button akan mengecilkan menu kembali ke posisi semula.

{
  !this.state.menu_expanded &&
  <View style={styles.tip_menu}>
    <ScalingButton onPress={this.openMenu.bind(this)} noDefaultStyles={true}>
      <Icon name="ellipsis-h" size={50} color="#fff" />
    </ScalingButton>
  </View>
} 

Saat membuka menu, status harus diperbarui terlebih dahulu sehingga menu tersembunyi akan ditampilkan. Hanya setelah selesai, animasi terjemahan akan dijalankan. Ini menggunakan Animated.spring sebagai lawan dari Animated.timing untuk menambahkan sedikit main-main ke animasi. Semakin tinggi nilai yang Anda berikan pada friction, semakin sedikit pemantulan di sana. Ingat untuk tidak berlebihan pada animasi Anda karena alih-alih membantu pengguna, mereka bisa menjadi jengkel.

openMenu() {
  this.setState({
    menu_expanded: true
  }, () => {
    this.y_translate.setValue(0);
    Animated.spring(
      this.y_translate,
      {
        toValue: 1,
        friction: 3
      }
    ).start();
  });
}

hideMenu () melakukan kebalikan dari showMenu (), jadi kita cukup membalikkan apa yang dilakukannya:

hideMenu() {
  this.setState({
    menu_expanded: false
  }, () => {
    this.y_translate.setValue(1);
    Animated.spring(
      this.y_translate,
      {
        toValue: 0,
        friction: 4
      }
    ).start();
  });
}

Halaman AttentionSeeker

Last but not least adalah halaman attentionseeker (src / pages / AttentionSeekerPage.js). Saya tahu bahwa tutorial ini sudah cukup panjang, jadi untuk mempersingkatnya, mari gunakan paket react-native-animatable untuk mengimplementasikan animasi untuk halaman ini.

import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  View
} from 'react-native';

import * as Animatable from 'react-native-animatable';
import ScalingButton from '../components/ScalingButton';

Buat larik yang berisi jenis animasi dan warna latar belakang yang akan digunakan untuk setiap kotak:

1	var animations = [
2	['bounce', '#62B42C'],
3	['flash', '#316BA7'],
4	['jello', '#A0A0A0'],
5	['pulse', '#FFC600'],
6	['rotate', '#1A7984'],
7	['rubberBand', '#435056'],
8	['shake', '#FF6800'],
9	['swing', '#B4354F'],
10	['tada', '#333333']
11	];

Membuat komponen:

1	export default class AttentionSeekerPage extends Component {
2
3	...
4	}

Fungsi render () menggunakan fungsi renderBoxes () untuk membuat tiga baris yang akan membuat masing-masing tiga kotak.

render() {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        { this.renderBoxes(0) }
      </View>

      <View style={styles.row}>
        { this.renderBoxes(3) }
      </View>

      <View style={styles.row}>
        { this.renderBoxes(6) }
      </View>
    </View>
  );
}

Fungsi renderBoxes() menuliskan kotak animasi. Ini menggunakan indeks awal yang disediakan sebagai argumen untuk mengekstrak bagian tertentu dari array dan membuatnya secara individual.

Di sini kita menggunakan komponen<Animatable.View>bukan <Animated.View>. Ini menerima animation dan iterationCount Jumlah sebagai alat peraga. The animation menentukan jenis animasi yang ingin Anda lakukan, dan iterationCount menentukan berapa kali Anda ingin menjalankan animasi. Dalam hal ini, kita hanya ingin bug pengguna sampai mereka menekan kotak.

renderBoxes(start) {
    var selected_animations = animations.slice(start, start + 3);
    return selected_animations.map((animation, index) => {
      return (

        <ScalingButton 
          key={index}
          onPress={this.stopAnimation.bind(this, animation[0])} 
          noDefaultStyles={true}
        >
          <Animatable.View 
            ref={animation[0]}
            style={[styles.box, { backgroundColor: animation[1] }]}
            animation={animation[0]} 
            iterationCount={"infinite"}>
            <Text style={styles.box_text}>{ animation[0] }</Text>
          </Animatable.View>
        </ScalingButton>

      );
    });
}

stopAnimation() berhenti kotak dari menjadi animasi. Ini menggunakan "ref" untuk mengidentifikasi setiap kotak secara unik sehingga mereka dapat dihentikan secara individual.

1	stopAnimation(animation) {
2	this.refs[animation].stopAnimation();
3	}

Akhirnya, tambahkan gaya:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    padding: 20
  },
  row: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  box: {
    alignItems: 'center',
    justifyContent: 'center',
    height: 100,
    width: 100,
    backgroundColor: '#ccc'
  },
  box_text: {
    color: '#FFF'
  }
});

Kesimpulan

Dalam tutorial ini, Anda telah belajar bagaimana menerapkan beberapa animasi yang biasa digunakan dalam aplikasi seluler. Secara khusus, Anda telah belajar bagaimana menerapkan animasi yang memberikan umpan balik visual, menunjukkan status sistem saat ini, secara visual menghubungkan status transisi, dan menarik perhatian pengguna.

Seperti biasa, masih banyak yang harus dipelajari saat terkait animasi. Misalnya, kita masih belum menyentuh bidang-bidang berikut:

Cara melakukan animasi pada gerakan pengguna tertentu seperti menyeret, menjentikkan, mencubit, dan menyebar. Misalnya, ketika pengguna menggunakan gerakan sebar, Anda harus menggunakan animasi skala untuk menunjukkan bagaimana elemen yang terlibat menjadi lebih besar.
Bagaimana menganimasikan transisi berbagai elemen dari satu negara ke negara lain. Misalnya, ketika menampilkan daftar foto, Anda mungkin ingin melakukan animasi terhuyung untuk menunda pemunculan semua foto.
Intro animasi untuk pengguna pertama kali aplikasi. Video dapat digunakan sebagai alternatif, tetapi ini juga tempat yang bagus untuk menerapkan animasi.

Mungkin saya akan membahas beberapa topik tersebut di tutorial selanjutnya. Sementara itu, lihat beberapa kursus dan tutorial kita lainnya tentang React Native!

Build a Social App With React Native
React Native, dibuat oleh Facebook, memungkinkan Anda menulis aplikasi seluler asli dalam JavaScript modern. Aplikasi React Native akan diubah menjadi tampilan khusus ...

Markus Mühlberger
13 Mei 2016

React Native
Get Started With React Native Layouts
Dalam tutorial ini, Anda akan belajar cara menata aplikasi React Native dan bagaimana menerapkan tata letak yang biasa digunakan dalam aplikasi.

Ancheta Wernher-Bel
26 Okt 2016

React Native
Animate Your React Native App
Animasi dapat memberi napas kehidupan ke aplikasi Anda dan membuat UI Anda lebih intuitif. Dalam tutorial ini, Anda akan belajar cara menerapkan berbagai jenis animasi di ...

Wernher-Bel Ancheta
03 Oktober 2016

React Native
Creating a Dictionary App Using React Native for Android
React Native Facebook adalah framework open source yang kuat yang memungkinkan Anda untuk membuat aplikasi Android dan iOS asli dengan cepat dan mudah hanya dengan ...

Ashraff Hathibelagal
19 Okt 2015

React Native