使用动画API在Vega中创建动画
使用动画API在Vega中创建动画
开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅最新的发布说明。
在本文中，您将使用动画API构建一个交互式按钮，该按钮在选择后会移动到随机位置。您将从hello-world模板开始，添加动画功能，以便在Fire TV应用中创建流畅的交互式体验。Vega支持三种主要的动画方法：动画API（内置于React Native）、React Native Reanimated和Lottie。本教程重点介绍动画API，它不需要额外的依赖关系，非常适合学习动画基础知识。
先决条件
- Vega开发环境已设置
- hello-world模板项目已创建
- React Native和TypeScript的基础知识
- 用于测试的Vega虚拟设备
导入动画API和useRef()
打开您的App.tsx文件并更新顶部的导入内容。将useRef() 添加到React导入中，并将Animated添加到react-native导入中。
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包装图像
在返回语句中找到图像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值应用于视图的样式。
使图像可点击
使用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日
