2

我知道标题不是很具体，对此我感到非常抱歉，实际上我想不出比它更好的标题了。

现在来到我的设计，下面是想要的结果。我想用像动画一样的曲线来做（就像图像一样）。但问题是它像一条直线而不是弯曲的对角线。

_startCoin每当我单击按钮然后动画发生时都会调用函数

附图片

这是我的代码

const screenHeight = Math.round(Dimensions.get('window').height);
const screenWidth = Math.round(Dimensions.get('window').width);

export default class demoScreen extends Component {

state = {
    ready: false,
    CoinAdd: new Animated.Value(0),
};

_startCoin = () => {
    return Animated.parallel([
      Animated.timing(this.state.CoinAdd, {
        toValue: 1,
        duration: 1500,
        useNativeDriver: true
      })
    ]).start();
 };

render() {
    let { CoinAdd } = this.state;
    return (
      <View style={styles.container}>

      <TouchableOpacity style={styles.btn2} onPress={() => this._startCoin()}>
      <Text style={styles.textBtn}>Start Coin</Text>
    </TouchableOpacity>

    <Animated.View style={{
               transform: [
               {
                 translateY: CoinAdd.interpolate({
                 inputRange: [0, 1],
                 outputRange: [0, -((screenHeight/2)-50)]
                })
               },
               {
                 translateX: CoinAdd.interpolate({
                 inputRange: [0, 1],
                 outputRange: [0, -((screenWidth/2))]
               })
               }
               ],
               borderRadius: 12,
               justifyContent: "center",
               alignItems: 'center',
               zIndex: 2
              }}
            >
<Image style={{position: "absolute",  height: 30, width: 30, right: 0}} source={require('../../assets/coin.png')} />

</Animated.View>

);
}
}

任何形式的帮助将不胜感激。谢谢

4

0 回答 0