小程序实现购物车商品飞入效果-贝塞尔曲线动画

看过很多文章，几乎都是JS计算，控制三个点实现，对我菜鸟的我来说太难了，我这边是用来position+CSS3 cubic-bezier() 函数，既然是分享，我会尽量贴完整代码，害，有的博客，没头没尾，不适合我这种菜鸡，希望能帮到需要的小伙伴

1、我这边不实现可以连续点击球体抛物线效果，通过定时器控制点击的频率，这个代码可以通用，没什么限制，不考虑IE啥的兼容鬼问题。
2、我是原生小程序，里面调用了 wx.createSelectorQuery().in(this).select(cls).boundingClientRect(rect => { }).exec();获取底部购物车的位置，如果是vue或者react 可以通过ref获取组件实例信息，这个具体看自己怎么调用了

WXML

 <!-- 购物车添加-加号 -->
<view class="addImg_box" bindtap="handleAddFood" data-food="{{item}}"><image class="img-add " src="{{fileUrl+'banner/details/add.png' }}" lazy-load="{{true}}"></image></view><!-- 购物车贝塞尔曲线运动，球体 -->
<view wx:if="{{ballDisplay}}" id="ball" style="top:{{ballTop}};left:{{ballLeft}}"></view><!-- tabbar栏 --><view class="position-tab"><view class="tab-icon"><view class="tab-icon-box"><view class="tab-icon-item" bindtap="handleTabEvent" data-index="1"><van-icon name="service" color="#515151" size="20px" /><text class="text">客服</text></view><view class="tab-icon-item"  id="tab-cart" bindtap="handleTabEvent" data-index="2"><!-- 这是我的购物车图标位置，fiexd-cart-animate是购物车放大动画 --><van-icon class="{{cartScale?'fiexd-cart-animate':'' }}" name="cart" wx:if="{{!popupShow}}" color="#383637" size="20px" info="{{allIFoodNum}}" /><van-icon name="cart" wx:else="{{popupShow}}" color="#ffd027" size="20px" info="{{allIFoodNum}}" /><text class="text {{ popupShow?'tab_active':''}}">已选</text></view></view></view><view class="tab-subscribe">立即预约<view class="tab-bottom"><button hover-class="button-active" class="tab-bottom-btn" open-type="getUserInfo" bindgetuserinfo="handlePurchase"></button></view></view></view>

CSS

/* 购物车抛物线  这里只涉及球体的css，贝塞尔曲线动画的css，还有购物车放大的效果，其他布局自由发挥 */
#ball{position: fixed;width:30rpx;height:30rpx;background-color: red;border-radius: 50%;z-index:99999 !important;/* cubic-bezier(.27,-.27,.36,1.04) 这个是关键css代码，第二个值是负数，实现回弹效果，具体自己调试 */transition: 0.5s top cubic-bezier(.27,-.27,.36,1.04), 0.5s left cubic-bezier(.29,.68,.64,1);
}
.fiexd-cart-animate{animation: aCartScale 300ms cubic-bezier(.17,.67,.83,.67);animation-fill-mode: backwards;
}@keyframes aCartScale{0%{-webkit-transform: scale(1.15);}100% {-webkit-transform: scale(1);}
}

JS部分

data:{ballDisplay: false,//控制球体显示ballTop: 100,//球体的top值ballLeft: 0,//球体的left值originTop: 0,//保留原位置top，其实可以简化掉，暂时不操作，小伙伴看着来originLeft: 0,//保留原位置leftstart: false,//控制点击购物的频率cartScale: false,//控制点击购物车的放大效果
}//购物车添加事件，部分JS是我的业务逻辑handleAddItemFood(e) {console.log(e, '添加事件对象');//传入当前点击位置的 x y值，起点，封装的函数里面通过wx.createSelectorQuery()获取 购物车图标的重点位置let eObj = {x: e.touches["0"].clientX,//相对于可视区域的值y: e.touches["0"].clientY}// 禁止动画多次触发if (this.data.start) {return;}//当执行完动画效果，再实现购物车图标角标的值计算，当调用完 this.setAnimationBall(eObj)，说明动画已经执行完毕this.setAnimationBall(eObj).then(() => {let obj = e.currentTarget.dataset.food;let arr = this.data.checkFoodsItem;if (arr.length > 0) {let index = this.data.checkFoodsItem.findIndex(v => v.ID === obj.ID);if (index == -1) {arr.push(obj)} else {arr[index].num++}} else {arr.push(obj)}this.setData({checkFoodsItem: arr})this.chcekComputed()})},// 购物车抛物线事件封装--------------// 获取节点信息-原生小程序的apigetRects(cls) {return new Promise((resolve, reject) => {wx.createSelectorQuery().in(this).select(cls).boundingClientRect(rect => {resolve(rect);}).exec();});},// 初始化球体的位置initBallPos() {this.setData({ballTop: `${100}px`,ballLeft: `${270}px`,originTop: `${100}px`,originLeft: `${270}px`});},//购物车添加事件的球体动画，promise封装是为了球体到了购物车再实现角标数量添加的效果setAnimationBall(parmas) {return new Promise((resolve, reject) => {//防止多次触发this.data.start = true;//再次初始化 球体点击的当前位置，具体自己根据情况修改值this.setData({ballTop: `${parmas.y - 10}px`,ballLeft: `${parmas.x - 5}px`,originTop: `${parmas.y - 10}px`,originLeft: `${parmas.x -5}px`,cartScale: false,ballDisplay: true});// 获取小球终点位置this.getRects("#tab-cart").then(rect => {console.log(rect, '小球终点位置');let left = Math.floor(rect.left) + Math.floor(rect.width / 2) - 5;let top = Math.ceil(rect.top)this.setData({ballTop: `${top +5}px`,ballLeft: `${left}px`});// 定时器延时跟动画时长一致，飞完隐藏掉，再把小球重置到初始位置。let {originLeft,originTop} = this.data;setTimeout(() => {this.setData({ballDisplay: false,ballTop: originTop,ballLeft: originLeft,start: false,//放开频率cartScale: true,//球体到购物车图标时，图标放大效果});resolve()}, 500);});})},
//初始化球体的位置onReady: function () {this.initBallPos()},

效果图，小弟不会搞gif。。然后就是这样效果

小程序实现购物车商品飞入效果-贝塞尔曲线动画相关推荐

微信小程序实现购物车功能，包含完整小程序代码和运行效果截图
微信小程序实现购物车功能,在商场比较常见,今天刚刚做好,效果不错. 下面从js文件,json文件,wxml文件和wxss文件,分享给大家. 直接上代码: 目录 1.index.js文件内容 2.ind ...
微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序实战篇-商品详情页（二）
今天要讲解商品详情页中sku的弹出选着框,这个涉及css动画样式,css动画是新的知识点,我们之前并没有接触过,请大家做好笔记,我们要做的效果是酱紫的~ 这个布局难点是需要绘制一个阴影背景.弹出的动画 ...
微信小程序实现购物车页面
微信小程序实现购物车页面先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价单个商品购买数量的增加和减少删除商品.当购物车为空时,页面会变为空购物车的布局根据设计图,我们 ...
微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果效果图: 源码: <view class="mainFra ...
c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
小程序canvas绘制商品海报实现分享朋友圈
小程序canvas绘制商品海报实现分享朋友圈效果图: 实现步骤就是点击生成图片在canvas画布中画出一张海报然后保存在本地在imags标签中展示,此处尽可能的把canvas组件隐藏但是不能 ...
微信小程序（购物车）--在wxml中设置保留小数位数
微信小程序(购物车)–在wxml中设置保留小数位数一.在该页面文件夹下新建一个wxs后缀的文件 var filters = {toFix: function (value) {return valu ...
微信小程序 - 实现购物车结算
示例源码下载:小程序-实现购物车结算

小程序实现购物车商品飞入效果-贝塞尔曲线动画

小程序实现购物车商品飞入效果-贝塞尔曲线动画相关推荐

最新文章

热门文章