Question

我想为游戏桌设置一张卡片动画。如何将卡的组件移到游戏桌的组件？ Onpress Result 我尝试过：

    this.state.cards.find(c => c.id == id).ref.layout.animate({
      from: { bottom: -20, bottom: 0 },
      to: { bottom: 416, bottom: 196 },

但是.animate方法基于父视图的x和y而不是屏幕的x y。这是我的代码的一部分：

  <View style={styles.board}>
            <ImageBackground source={require('../../assets/ornement.png')} resizeMode='contain' style={styles.ornement}>
              <View onLayout={ref => this.test = ref}>
                <Text style={boardStyle.message}>Test</Text>
              </View>
              <View style={boardStyle.boardContent} ref={event => this.view = event}>
                {this.state.board.map((r, i) => <Image key={i} style={boardStyle.image} resizeMode='contain' source={CardUtils.PathOfimgCard(r.fullName)} />
                )}
              </View>
            </ImageBackground>
          </View>

          <View style={styles.deck}>

            {this.state.deck.map((r, i) =>
              <Card onRef={(ref) => this.state.cards.push({ id: r.id, ref: ref })} key={i} ctx={r} action={this.play} select={this.state.cardSelect.find(c => c.id == r.id) != null} id={r.id} path={CardUtils.PathOfimgCard(r.fullName)} style={deckStyle} />
            )}
          </View>

卡组件：


            <Animatable.View ref={event => this.layout = event} iterationCount={3} delay={5000} direction="alternate" style={this.props.style.touchZone}   >

                <TouchableOpacity onPress={() => this.props.action(this.props.id)} >
                    <View ref={event => this.view = event}>
                        <ImageBackground source={this.props.path} style={this.props.select ? this.props.style.active : this.props.style.image} resizeMode='contain' >
                            {!this.props.ctx.canPlay ? <Image style={[this.props.select ? this.props.style.active : this.props.style.image, styles.image]} resizeMode='contain' source={require('../../assets/black.png')} /> : <Image></Image>}
                        </ImageBackground>
                    </View>
                </TouchableOpacity>
            </Animatable.View>

先谢谢您

如何将一个组件动画化为另一个组件？

0 个答案: