微信小程序加入购物车动画

最近在做的一个小程序项目，需要一个加入购物车动画，倒腾了一下总算实现了想要的效果。

代码如下(用的是wepy2.x语法)：

//wxml
//通过点击事件对象 获取到点击的位置
<imagesrc="{{imgDomain}}mini/ic_btn_add.png"class="img"@tap.stop="onCartAmountChange(item, index, $event)"
/>//红点
<viewclass="good_box"animation="{{animation}}"style="left: {{bus_x}}px; top: {{bus_y}}px; opacity: 0"
>
</view>

//wxss
.good_box {width: 30rpx;height: 30rpx;position: absolute;border-radius: 50%;overflow: hidden;left: 50%;top: 50%;z-index: 9999;background: #fe3c53;
}

//js
data: {linePos: null,hh: '',animation: null,bus_x: '',bus_y: '',
},
onLoad() {this.getContentHeight()
},onShow() {//首先计算购物车的位置this.busPos = {};this.busPos['x'] = 240; //x轴坐标是固定的this.busPos['y'] = this.hh - 19;
},methods: {getContentHeight() {let systemInfo = wx.getSystemInfoSync();this.hh = systemInfo.windowHeight;},onCartAmountChange(goods, index, event) {this.tapEvent = event;//把事件对象先保存起来，后期加入购物车成功后再用来实现动画
}//加入购物车成功诗调用
this.touchOnGoods(this.tapEvent)/*加入购物车动效*/touchOnGoods: function(e) {this.finger = {};var topPoint = {};this.finger['x'] = e.touches['0'].clientX; //点击的位置this.finger['y'] = e.touches['0'].clientY;if (this.finger['y'] < this.busPos['y']) {topPoint['y'] = this.finger['y'] - 150;} else {topPoint['y'] = this.busPos['y'] - 150;}topPoint['x'] = Math.abs(this.finger['x'] - this.busPos['x']) / 2;if (this.finger['x'] > this.busPos['x']) {topPoint['x'] =(this.finger['x'] - this.busPos['x']) / 2 + this.busPos['x'];} else {//topPoint['x'] =(this.busPos['x'] - this.finger['x']) / 2 + this.finger['x'];}this.linePos = this.bezier([this.busPos, topPoint, this.finger], 30);this.startAnimation(e);},startAnimation: function(e) {var index = 0,that = this,bezier_points = that.linePos['bezier_points'];that.hide_good_box = false;that.bus_x = that.finger['x'];that.bus_y = that.finger['y'];var len = bezier_points.length;index = len;let animation = wx.createAnimation({duration: 33,timingFunction: 'ease-out'});animation.opacity(1).step();for (let i = index - 1; i > -1; i--) {let deltX = bezier_points[i]['x'] - that.finger['x'];let deltY = bezier_points[i]['y'] - that.finger['y'];animation.translate(deltX, deltY).step();}animation.opacity(0).step();this.animation = animation.export();},
//获得了从点击到购物车之间轨迹的点的位置bezier: function(pots, amount) {var pot;var lines;var ret = [];var points;for (var i = 0; i <= amount; i++) {points = pots.slice(0);lines = [];while ((pot = points.shift())) {if (points.length) {lines.push(pointLine([pot, points[0]], i / amount));} else if (lines.length > 1) {points = lines;lines = [];} else {break;}}ret.push(lines[0]);}function pointLine(points, rate) {var pointA,pointB,pointDistance,xDistance,yDistance,tan,radian,tmpPointDistance;var ret = [];pointA = points[0]; //点击pointB = points[1]; //中间xDistance = pointB.x - pointA.x;yDistance = pointB.y - pointA.y;pointDistance = Math.pow(Math.pow(xDistance, 2) + Math.pow(yDistance, 2),1 / 2);tan = yDistance / xDistance;radian = Math.atan(tan);tmpPointDistance = pointDistance * rate;ret = {x: pointA.x + tmpPointDistance * Math.cos(radian),y: pointA.y + tmpPointDistance * Math.sin(radian)};return ret;}return {bezier_points: ret};}
}

实现代码主要参考自这篇文章，主要两点不同。

1.原文中实现动画原理:通过不断去改变fixed定位红点的 top和left值，其中用了setTimeout和setInterval定时器，我拿来用的时候，在安卓中是正常的，IOS没有效果。所以我采用了微信小程序自带的动画API。

2.原文中红点的显示隐藏是通过标签的hidden属性来控制。我用小程序动画API的时候好像有点冲突，所以换成了opacity的值来显示隐藏红点。

微信小程序加入购物车动画相关推荐

微信小程序（购物车）--在wxml中设置保留小数位数
微信小程序(购物车)–在wxml中设置保留小数位数一.在该页面文件夹下新建一个wxs后缀的文件 var filters = {toFix: function (value) {return valu ...
微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序js过度动画
微信小程序js过度动画如有错误还请大神指教.如果觉得不错可以关注我了解更多. 一,我们先来看看效果吧. 二,我们用的是js的逐帧动画,css也可有相同的效果,我们这里用js // pages/arr ...
微信小程序登录页动画-云层漂浮
前言 2017年前端火了,微信小程序.weex.reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波. 上效果图(GI动态图) 当我看到这张背景图的时候, ...
微信小程序没登录跳到登录页怎么做_微信小程序登录页动画怎么做
2017年5月22日,微信小程序推出之时,限制非常多,现在越来越开放.微信小程序动画怎么做也受到越来越多人的关注,下面从多个方面来谈谈微信小程序怎么做的一些内容. 前言 2017年前端火了,微信小程序 ...
微信小程序实现购物车功能，包含完整小程序代码和运行效果截图
微信小程序实现购物车功能,在商场比较常见,今天刚刚做好,效果不错. 下面从js文件,json文件,wxml文件和wxss文件,分享给大家. 直接上代码: 目录 1.index.js文件内容 2.ind ...
微信小程序实现购物车页面
微信小程序实现购物车页面先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价单个商品购买数量的增加和减少删除商品.当购物车为空时,页面会变为空购物车的布局根据设计图,我们 ...
[转]微信小程序之购物车 —— 微信小程序实战商城系列（5）
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...
微信小程序学习做动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 微信扫码学习,在线指导微信小程序动画效果的实现
微信小程序之购物车功能
前言以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求先来弄清楚购物车的需求. 单选.全选和取消, ...

微信小程序加入购物车动画

微信小程序加入购物车动画相关推荐

最新文章

热门文章