Javascript 对布局上的移动视图进行本机转换
我正在开发一个应用程序。 此应用程序有一个主屏幕，其中显示6个图标。当我按下图标时，导航器将导航到新屏幕。 当我按下图标时，在转换之前，它必须发生动画。 我不想对以前的问题使用Transitioner。 这是我的屏幕，当我按下一个图标时，我希望图标不透明度变为0，并在屏幕的左上方移动（标题的正下方）。 但我希望它能支持所有设备，我无法计算距离、平移、初始位置等，我用flexbox设计，而不是绝对位置 我尝试从位置0开始创建动画视图，并根据屏幕到达计算位置，但我无法再管理代码Javascript 对布局上的移动视图进行本机转换,javascript,react-native,react-native-animatable,Javascript,React Native,React Native Animatable,我正在开发一个应用程序。 此应用程序有一个主屏幕，其中显示6个图标。当我按下图标时，导航器将导航到新屏幕。 当我按下图标时，在转换之前，它必须发生动画。 我不想对以前的问题使用Transitioner。 这是我的屏幕，当我按下一个图标时，我希望图标不透明度变为0，并在屏幕的左上方移动（标题的正下方）。 但我希望它能支持所有设备，我无法计算距离、平移、初始位置等，我用flexbox设计，而不是绝对位置 我尝试从位置0开始创建动画视图，并根据屏幕到达计算位置，但我无法再管理代码 export def
export default class Home extends React.Component {
//tester.retrieveDataById()
constructor(props) {
super(props);
this.state = {
value: [
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) }
]
};
}
static navigationOptions = {..}
_onPressButton = (info, icon, index) => {
Animated.parallel([
Animated.timing(
this.state.value[1].fadeAnim,
{
toValue: index === 1 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[0].fadeAnim,
{
toValue: index === 0 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[2].fadeAnim,
{
toValue: index === 2 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[3].fadeAnim,
{
toValue: index === 3 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[4].fadeAnim,
{
toValue: index === 4 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[5].fadeAnim,
{
toValue: index === 5 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
)
]).start(() => {
console.log("dasd");
this.props.navigation.navigate(info, { icon: icon });
setTimeout(() => {
this.setState({
value: this.state.value.map(
element => (element.fadeAnim = { fadeAnim: new Animated.Value(1) })
) //restore the state when I come back from navigate
});
}, 500);
});
};
// the space in text is need for alignment among them
render() {
return (
<View style={{ flex: 1, backgroundColor: "#fff" }}>
<View style={styles.container}>
<View
style={{
flexDirection: "column",
justifyContent: "space-around"
}}
>
<Animated.View style={{ opacity: this.state.value[0].fadeAnim }}>
<TouchableOpacity
onPress={() => this._onPressButton("VenetoWelfare", Medal, 0)}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Medal
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
</TouchableOpacity>
<Text style={styles.text}>
text {"\n"} text {"\n"} text
</Text>
</Animated.View>
<Animated.View style={{ opacity: this.state.value[1].fadeAnim }}>
<TouchableOpacity
onPress={() =>
this._onPressButton("WelfareCollettivo", Collective, 1)
}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Collective
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
<Text style={styles.text}>
text {"\n"} text {"\n"}{" "}
</Text>
</TouchableOpacity>
</Animated.View>
<Animated.View style={{ opacity: this.state.value[2].fadeAnim }}>
<TouchableOpacity
onPress={() =>
this._onPressButton("AssistenzaSanitaria", Care, 2)
}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Care
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4),
transform: [{ translateY: -0 }]
}}
/>
<Text style={styles.text}>
text {"\n"} text {"\n"} text
</Text>
</TouchableOpacity>
</Animated.View>
</View>
<View
style={{
flexDirection: "column",
justifyContent: "space-around"
}}
>
<Animated.View style={{ opacity: this.state.value[3].fadeAnim }}>
<TouchableOpacity
onPress={() => this._onPressButton("Previdenza", Analysis, 3)}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Wallet
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
<Text style={styles.text}>
text {"\n"} {""}
{"\n"}{" "}
</Text>
</TouchableOpacity>
</Animated.View>
<Animated.View style={{ opacity: this.state.value[4].fadeAnim }}>
<TouchableOpacity
onPress={() =>
this._onPressButton("PrevidenzaComplementare", Wallet, 4)
}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Wallet
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
<Text style={styles.text}>
text {"\n"} text {"\n"}{" "}
</Text>
</TouchableOpacity>
</Animated.View>
<Animated.View style={{ opacity: this.state.value[5].fadeAnim }}>
<TouchableOpacity
onPress={() =>
this._onPressButton("WelfareAziendale", Industry, 5)
}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Industry
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
<Text style={styles.text}>
text {"\n"} text {"\n"}{" "}
</Text>
</TouchableOpacity>
</Animated.View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
flexDirection: "row",
justifyContent: "space-around"
},
text: {
fontSize: normalize(18),
textAlign: "center",
color: "#7A9DBC"
}
});
导出默认类Home.Component{
//tester.retrieveDataById（）
建造师（道具）{
超级（道具）；
此.state={
价值：[
{fadeAnim:new Animated.Value（1）}，
{fadeAnim:new Animated.Value（1）}，
{fadeAnim:new Animated.Value（1）}，
{fadeAnim:new Animated.Value（1）}，
{fadeAnim:new Animated.Value（1）}，
{fadeAnim:new Animated.Value（1）}
]
};
}
静态导航选项={..}
_按按钮=（信息、图标、索引）=>{
平行动画([
时间(
this.state.value[1].fadeAnim，
{
toValue:index==1？1:0，
期限：2000年，
放松，放松，放松，
useNativeDriver：真的吗
}
),
时间(
this.state.value[0].fadeAnim，
{
toValue:index==0？1:0，
期限：2000年，
放松，放松，放松，
useNativeDriver：真的吗
}
),
时间(
this.state.value[2].fadeAnim，
{
toValue:index==2？1:0，
期限：2000年，
放松，放松，放松，
useNativeDriver：真的吗
}
),
时间(
this.state.value[3].fadeAnim，
{
toValue:index==3？1:0，
期限：2000年，
放松，放松，放松，
useNativeDriver：真的吗
}
),
时间(
this.state.value[4].fadeAnim，
{
toValue:index==4？1:0，
期限：2000年，
放松，放松，放松，
useNativeDriver：真的吗
}
),
时间(
this.state.value[5].fadeAnim，
{
toValue:index==5？1:0，
期限：2000年，
放松，放松，放松，
useNativeDriver：真的吗
}
)
]).start（（）=>{
控制台日志（“dasd”）；
this.props.navigation.navigate（info，{icon:icon}）；
设置超时（（）=>{
这是我的国家({
value:this.state.value.map(
element=>（element.fadeAnim={fadeAnim:new Animated.Value（1）}）
)//从导航返回时恢复状态
});
}, 500);
});
};
//文本中的空格需要在它们之间对齐
render（）{
返回(
此按钮。\按按钮（“Venetowerfare”，奖牌，0）}
样式={{justifyContent:“中心”，alignItems:“中心”}
>
文本{“\n”}文本{“\n”}文本
点击此按钮（“WelfareColletivo”，集体，1）
}
样式={{justifyContent:“中心”，alignItems:“中心”}
>
文本{“\n”}文本{“\n”}{”“}
此按钮。\按按钮（“辅助疗养”，护理，2）
}
样式={{justifyContent:“中心”，alignItems:“中心”}
>
文本{“\n”}文本{“\n”}文本
点击此按钮（“Previdenza”，分析，3）}
样式={{justifyContent:“中心”，alignItems:“中心”}
>
文本{“\n”}{”“}
{“\n”}{”“}
此按钮。\按按钮（“PrevidenzaCompletementAre”，钱包，4）
}
样式={{justifyContent:“中心”，alignItems:“中心”}
>
文本{“\n”}文本{“\n”}{”“}
点击按钮（“WelfareAziendale”，工业，5）
}
样式={{justifyContent:“中心”，alignItems:“中心”}
>
文本{“\n”}文本{“\n”}{”“}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“fff”，
flexDirection:“行”，
为内容辩护：“周围的空间”
},
正文：{
字体大小：规格化（18），
textAlign：“居中”，
颜色：“7A9DBC”
}
});
我不知道如何翻译，因为图标插入到特定视图中。尝试使用尺寸来获得屏幕的宽度和高度。然后可以使用“标注”中的值设置动画。示例：const SW=Dimensions.get（'window'）.width/100；然后在动画中使用SW变量作为值，这样会更有响应性每个图标必须移动到不同的坐标值（translatex和translate y），因为它们位于6 dif中