react-native的一个添加购物车动画效果控件
一个简单实用的实现添加购物车动画的控件
安装: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方法。如果没有这个方法（大部分组件有），也可以传入坐标
示例图
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
