Animated APIを使用してVegaでアニメーションを作成する方法
この記事では、Animated APIを使用して、クリック時にランダムな位置に移動するインタラクティブなボタンを作成します。hello-worldテンプレートを基にアニメーション機能を追加して、スムーズでインタラクティブなエクスペリエンスをFire TVアプリに組み込みます。Vegaでは、アニメーションを実装する主なアプローチとして、Animated API（React Nativeの組み込みのAPI）、React Native Reanimated、Lottieの3つがサポートされています。このチュートリアルでは、追加の依存関係が必要なく、アニメーションの基礎を学ぶのに最適なAnimated APIを利用します。
前提条件
- Vega開発環境がセットアップされていること
- hello-worldテンプレートプロジェクトが作成されていること
- React NativeとTypeScriptに関する基本的な知識
- テスト用のVega仮想デバイス
Animated APIとuseRef()のインポート
App.tsxファイルを開き、先頭にあるインポートを更新します。ReactのインポートにuseRef()を追加し、react-nativeのインポートにAnimatedを追加します。
import React, {useState, useRef} from 'react'; // ここにuseRefを追加
import {
StyleSheet,
Text,
ImageBackground,
View,
Image,
Animated // ここにAnimatedを追加
} from 'react-native';
import {Link} from './components/Link';
useRef()フックは、アニメーション値の永続的な参照を作成するために使用されます。Animatedは、スムーズなアニメーションを作成するReact Nativeのアニメーションライブラリを提供します。
位置参照の定義
Appコンポーネント内で、useState()行の後に位置参照を追加します。
export const App = () => {
const [image, setImage] = useState(images.vega);
// 次の行を追加します。
const position = useRef(new Animated.ValueXY({x: 0, y: 0})).current;
const styles = getStyles();
// ...残りのコンポーネント
これにより、useRef()を使用して、x座標とy座標を格納する位置参照が作成されます。この値は、コンポーネントの再レンダリング後も保持されます。
アニメーション関数の作成
Appコンポーネント内で、returnステートメントの前に次の関数を追加します。
const getRandomNumber = (min: number, max: number) => {
return Math.random() * (max - min) + min;
};
const handleImagePress = () => {
const randomX = getRandomNumber(-100, 100);
const randomY = getRandomNumber(-100, 100);
Animated.timing(position, {
toValue: {x: randomX, y: randomY},
duration: 1000,
useNativeDriver: false,
}).start();
};
これにより、1秒（1000ミリ秒）かけて画像をランダムな位置に移動するアニメーションが作成されます。
Animated.Viewによる画像のラッピング
returnステートメント内にある画像のViewを見つけて、Animated.Viewでラップします。
変更前：
<View style={styles.image}>
<Image source={image} />
</View>
変更後：
<Animated.View style={[styles.image, position.getLayout()]}>
<Image source={image} />
</Animated.View>
position.getLayout()呼び出しにより、アニメーション化されたxとyの値がViewのスタイルに適用されます。
画像をクリック可能にする手順
画像をクリック可能にするために、ImageをTouchableOpacityコンポーネントでラップします。まず、インポートを更新します。
import {
StyleSheet,
Text,
ImageBackground,
View,
Image,
Animated,
TouchableOpacity // これを追加
} from 'react-native';
次に、画像セクションを更新します。
<Animated.View style={[styles.image, position.getLayout()]}>
<TouchableOpacity onPress={handleImagePress}>
<Image source={image} />
</TouchableOpacity>
</Animated.View>
アニメーションのテスト
プロジェクトをビルドし、Vega仮想デバイスで実行します。
npm install && npx react-native build-vega
vega run-app <パッケージファイル.vpkg>
これで、画面の右側にある画像をクリックすると、画像がアニメーション化されてランダムな位置に移動します。
関連コンテンツ
Last updated: 2026年4月17日
