初めに

今回は、React Nativeを使用して、アニメーション効果のあるタップバーを作成する方法について説明します。この例では、Animated コンポーネント、useState、useRef フックを使用して、アニメーション付きのメニューバーを作成します。このメニューバーは、タップすると拡大し、アイコンが回転する動きをします。

実装の概要

useState フックを使用して、メニューの開閉状態を管理します。
useRef と Animated.Value を使用してアニメーション状態を追跡します。
Animated.timing を使用して、メニューの開閉アニメーションを制御します。

コード例

import React, { useState, useRef } from 'react';
import { View, TouchableOpacity, Animated, StyleSheet, Dimensions, Easing } from 'react-native';
import { FontAwesome5 } from '@expo/vector-icons';

const windowWidth = Dimensions.get('window').width;

const TapBar = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  const animation = useRef(new Animated.Value(0)).current;

  const buttonSize = 60;

  const toggleMenu = () => {
    Animated.timing(animation, {
      toValue: menuOpen ? 0 : 1,
      duration: 400,
      easing: Easing.elastic(1),
      useNativeDriver: false,
    }).start();

    setMenuOpen(!menuOpen);
  };

  // 省略: スタイル定義とレンダリングコンポーネント
};

export default TapBar;

スタイルの定義

styles オブジェクトを使用して、コンポーネントのスタイリングを行います。例えば、container スタイルでは、メニューバーの基本的なレイアウトを定義します。

const styles = StyleSheet.create({
  container: {
    // スタイル定義
  },
  // その他のスタイル
});

完成したTapBar

まとめ

React Nativeでアニメーション付きのTapBarを簡単に作成してみました。時間があれば、もう少し改良していきま〜す！