react-native-addcarview

一个简单实用的实现添加购物车动画的控件

• 安装:npm install react-native-addcarview --save or yarn add react-native-addcarview
• 使用:

            <View style={styles.container}>
            
              <Button title={'添加购物车(传入控件)'} onPress={() => {
                  startAddShopAnim(this.renderCarImage(), {
                      beforeView: this.beforeView,
                      afterView: this.afterView,
                      topFix: 60,
                      endScale: 0.5,
                      duration: 1000,
                      callBack: () => {
                          this.setState({number: this.state.number  += 1})
                      }
                  })
              }}/>
              <Button title={'添加购物车(传入坐标)'} onPress={() => {
                  startAddShopAnim(this.renderCarImage(), {
                      beforeValue: {x: 200, y: 200},
                      afterValue: {x: 300, y: 400},
                      endRotateZ: 360,
                      duration: 5000,
                      endScale: 2,
                      callBack: () => {
                          this.setState({number: this.state.number     += 1})
                      }
                  })
              }}/>
  
              <Image ref={ref => this.beforeView = ref}
                     style={{width: 120, height: 120, borderRadius: 10}}
                     source={{uri: imageUrl}}/>
              <Text ref={ref => this.afterView = ref}
                    style={{
                        position: 'absolute',
                        bottom: 10,
                        right: 10,
                        backgroundColor: 'gray'
                    }}>购物车{this.state.number}</Text>
              <ShoppingCarView/>
          </View>
  
  

• 注意点:动画开始结束位置是通过传入组件调用measureInWindow方法测量得到的，请确保传入控件有measureInWindow方法。如果没有这个方法（大部分组件有），也可以传入坐标

示例图