https://github.com/puti94/react-native-addcarview
react-native的一个添加购物车动画效果控件
https://github.com/puti94/react-native-addcarview
Last synced: about 2 months ago
JSON representation
react-native的一个添加购物车动画效果控件
- Host: GitHub
- URL: https://github.com/puti94/react-native-addcarview
- Owner: puti94
- Created: 2018-03-05T13:46:12.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-06T08:31:47.000Z (about 7 years ago)
- Last Synced: 2025-03-26T02:35:01.145Z (2 months ago)
- Language: JavaScript
- Size: 820 KB
- Stars: 18
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-addcarview
一个简单实用的实现添加购物车动画的控件
- 安装:`npm install react-native-addcarview --save` or `yarn add react-native-addcarview`
- 使用:
```
{
startAddShopAnim(this.renderCarImage(), {
beforeView: this.beforeView,
afterView: this.afterView,
topFix: 60,
endScale: 0.5,
duration: 1000,
callBack: () => {
this.setState({number: this.state.number += 1})
}
})
}}/>
{
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})
}
})
}}/>
this.beforeView = ref}
style={{width: 120, height: 120, borderRadius: 10}}
source={{uri: imageUrl}}/>
this.afterView = ref}
style={{
position: 'absolute',
bottom: 10,
right: 10,
backgroundColor: 'gray'
}}>购物车{this.state.number}
```
- 注意点:动画开始结束位置是通过传入组件调用measureInWindow方法测量得到的，请确保传入控件有measureInWindow方法。如果没有这个方法（大部分组件有），也可以传入坐标
## 示例图
