🔬 Praktikum 13: Advanced Styling & Animations

Tujuan Praktikum

Membuat animasi fade, slide, dan bounce

Menggunakan Animated API bawaan React Native

Membuat UI interaktif dengan animasi

A. Fade In Animation

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

export default function App() {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const slideAnim = useRef(new Animated.Value(-100)).current;

  const fadeIn = () => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 800,
      useNativeDriver: true,
    }).start();
  };

  const slideIn = () => {
    Animated.spring(slideAnim, {
      toValue: 0,
      friction: 5,
      useNativeDriver: true,
    }).start();
  };

  useEffect(() => {
    fadeIn();
    slideIn();
  }, []);

  return (
    
      
        Fade In Card
        Card ini muncul dengan efek fade
      

      
        Slide In Card
        Card ini muncul dari kiri
      

       {
        fadeAnim.setValue(0);
        slideAnim.setValue(-100);
        fadeIn(); slideIn();
      }}>
        Replay Animasi
      
    
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 20 },
  card: { backgroundColor: '#fff', padding: 20, borderRadius: 12,
          marginBottom: 16, elevation: 3 },
  slideCard: { backgroundColor: '#e3f2fd' },
  title: { fontSize: 18, fontWeight: 'bold', marginBottom: 8 },
  btn: { backgroundColor: '#6200ee', padding: 14, borderRadius: 10,
         alignItems: 'center', marginTop: 20 },
  btnText: { color: '#fff', fontSize: 16, fontWeight: 'bold' },
});

B. Bounce & Scale Animation

const scaleAnim = useRef(new Animated.Value(1)).current;

const bounce = () => {
  Animated.sequence([
    Animated.timing(scaleAnim, { toValue: 1.3, duration: 150, useNativeDriver: true }),
    Animated.spring(scaleAnim, { toValue: 1, friction: 3, useNativeDriver: true }),
  ]).start();
};


  
    ❤️

C. Loading Spinner Custom

const spinAnim = useRef(new Animated.Value(0)).current;

useEffect(() => {
  Animated.loop(
    Animated.timing(spinAnim, {
      toValue: 1, duration: 1000, useNativeDriver: true,
    })
  ).start();
}, []);

const spin = spinAnim.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});


  ⚙️

D. Tugas Praktikum 13

1. Buat halaman profil dengan animasi fade-in untuk setiap elemen

2. Tambahkan tombol "Like" dengan efek bounce/scale

3. Buat loading spinner custom dengan animasi rotate

4. Screenshot dan kumpulkan source code

Advanced Styling & Animations