我一直在使用Expo开发一些很酷的程序,现在想建立一个Twitter的克隆版本。然而,在构建Twitter应用程序的加载动画时,遇到了一点小问题。
我正在使用IonIcons的"twitter-logo"来构建这个动画,但问题是该图标不像原始应用程序那样保持居中状态,它的动画效果有些奇怪。
要测试它,请把以下代码粘贴到您的App.js中,您就会看到该动画。
如果您没有Expo,只需将导入更改为react-native-vecto-icons。
import React from "react";
import { Animated, Easing, Text, View } from "react-native";
import Icon from "@expo/vector-icons/Ionicons";
AnimatedIcon = Animated.createAnimatedComponent(Icon);
export default class RootComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
isAnimating: false,
iconSize: new Animated.Value(60)
};
}
startAnimation = () => {
Animated.timing(this.state.iconSize, {
toValue: 1500,
duration: 1000,
easing: Easing.back(0.8)
}).start(() => this.setState({ isAnimating: false }));
};
componentDidMount() {
let x = setTimeout(() => {
let isLoading = !this.state.isLoading;
let isAnimating = !this.state.isAnimating;
this.setState({ isLoading, isAnimating });
this.startAnimation();
clearTimeout(x);
}, 2000);
}
render() {
if (this.state.isLoading || this.state.isAnimating)
return (
<Animated.View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#1b95e0"
}}
>
<AnimatedIcon
name={"logo-twitter"}
style={{
alignSelf: "center",
fontSize: this.state.iconSize
}}
color={"#fff"}
/>
</Animated.View>
);
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>TWITTER APP :)</Text>
</View>
);
}
}