总体思路其实跟H5的无差;
- 获取当前抛物线起始位置的坐标
- 获取购物车图标的坐标
- 通过创建一个 图标从 起始坐标点到终止坐标点 的动画效果(延时一秒),这样就造成一个抛物线的假象了。
上代码:
其中 animationElStatus 是需要动态计算起始及终止坐标点位置后的 动态样式。
此html样式,会在每次点击加入购物车时,动态写入style后触发,将img掉入购物车位置
注意这里的变量animationElStatus,使用模板字符串连接时,不能折行,不能忘记分号隔开样式
this.animationElStatus = top: ${endPoint.top}px; left: ${endPoint.left}px; transition: all 1s; transform: rotate(-720deg);
<view
id="animation-el"
v-show="animationElStatus"
:style="animationElStatus"
>
<img :src="`${cdnImageUrl}/privateMall/icon/icon_add.png`" />
</view>
endPoint记录当前终点坐标位置
uni.createSelectorQuery().select(‘#animation-end’).boundingClientRect 形如:document.getElementById()
let endPoint = null; // 动画截止点
mounted() {
// 提前获取最下方购物车位置
if (!endPoint) {
uni.createSelectorQuery().select('#animation-end').boundingClientRect((res) => {
endPoint = res
}).exec()
}
},
点击商品触发下列方法,通过传入当前起始坐标点
click传入的点击事件坐标,在detail中。
// 通过click事件记录起始点位置 子组件
toggleCheck(ev) {
const { x, y } = ev.detail
this.$emit('animationAddCart', {
x,
y
})
}
/**
* 商品掉入动画方法 父组件
*/
animationAddCart(position) {
if (!endPoint) return
this.animationElStatus = `top: ${position.y}px; left: ${position.x}px;`
setTimeout(() => {
this.animationElStatus = `top: ${endPoint.top}px; left: ${endPoint.left}px; transition: all 1s; transform: rotate(-720deg);`
}, 20);
setTimeout(() => {
this.animationElStatus = ''
}, 1000);
},