uniapp加入购物车抛物线效果

实现 UniApp 中添加到购物车的抛物线动画效果
为了实现在 UniApp 应用中点击商品图标后，该图标沿贝塞尔曲线移动至购物车图标的动画效果，在项目中可以采用 CSS 动画配合 JavaScript 来完成。具体来说，通过监听用户的点击事件触发自定义组件中的动画逻辑。
创建动画路径
创建一个名为 cart-animation 的全局样式文件来定义贝塞尔曲线运动轨迹：
@keyframes move-to-cart {
to {
transform: translate(300px, -400px); /* 调整此值以匹配实际页面布局 */
opacity: 0;
}
}
登录后复制
对于更复杂的路径，则可以通过 cubic-bezier() 函数来自定义三次方贝塞尔曲线[^1]。
编写 HTML 结构
在模板部分引入用于显示商品缩略图的小图片以及隐藏的目标位置（即购物车）。当发生交互行为时，克隆一份原节点并附加给 body 或其他合适的容器作为临时元素执行过渡动作。
<template>
<!-- 商品列表项 -->
<view class="goods-item">
<image :src="item.imgUrl"></image> <!-- 绑定数据源 -->
...
</view>

<!-- 隐藏目标点 (购物车) -->
<view id="target-point" style="position:absolute;"></view>
</template>
登录后复制
添加 JavaScript 控制器代码
最后一步是在方法里处理触摸/点击手势响应函数，并启动相应的视觉反馈过程。这里假设已经获取到了起始坐标起点与终点的位置信息。
methods: {
addToCart(event){
const {x,y} = event.touches[0]; // 获取触控点相对于屏幕左上角的距离
let imgSrc = this.item.imgUrl; // 假设 item 对象中有存储图像链接属性

// 构造新的 DOM 元素代表正在飞行的商品快照
var flyImg=document.createElement('img');
Object.assign(flyImg.style,{
position:'fixed',
zIndex:999,
top:`${y}px`,
left:`${x}px`
});
flyImg.src=imgSrc;

document.body.appendChild(flyImg);

setTimeout(() => {
requestAnimationFrame(()=>{
flyImg.classList.add('move'); // 开启 css transition 效果

// 计算结束后的绝对定位参数
const targetRect = document.getElementById('target-point').getBoundingClientRect();
Object.assign(flyImg.style,{
top:`${targetRect.top+window.scrollY}px`,
left:`${targetRect.left+window.scrollX}px`,
width:"0",
height:"0"
});

// 移除不再需要的 dom 元素
setTimeout(()=>flyImg.remove(),800);
})
},16);
}
}
登录后复制
上述代码片段展示了如何捕捉用户操作瞬间的状态变化，并据此构建出平滑自然的动态视效体验。