前言

好久没有写过博客了，最近做了个微信小程序(后面统称小程序)加入购物车动画效果，然后给大家分享下。还是老规矩，先看效果图镇楼。
因为是demo，所以UI美观度请无视，如果是你需要的效果或者功能，那就请接下来往下看。

准备

准备一张购物车图片，如下

实现

实现这个效果主要就是用小程序提供的动画相关的API，如果你对小程序动画相关的API还不了解，可以移步官方教程：微信小程序动画官方教程。

原理

右下角放一个购物车的icon，然后设置position为fixed，让购物车按钮浮动在content上。不理解为什么要这么做的请参考我之前的系列文章微信小程序布局技巧。
页面上放置一个position为fixed的飞行点，也就是上图中的绿色点，默认隐藏。
在页面渲染完成之后获取购物车在页面中的坐标。
通过tap事件获取到tap点的坐标，将步骤2中的飞行点移动到点击处。
通过小程序动画相关的API（Animation.left和Animation.top）来执行动画到购物车处。

布局

<view class="container"><view wx:for='12345678901234567' class="item" bindtap="addshopcar" hover-class="hover">商品{{index}}</view>
</view>
<view class="dot" animation='{{ani}}' hidden="{{!showdot}}">+1</view>
<view class="count">{{count}}</view>
<view class="shopcar" id="shopcar"><image src="../../images/shopcar.png" class="shopcarimg"></image>
</view>

在和pages同级目录新增一个images目录，将购物车图片放入images根目录，然后引用，想必上面的布局文件应该没有什么问题和难度。

样式

.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;box-sizing: border-box;
} .item {width: 720rpx;height: 100rpx;display: flex;flex-direction: row;align-items: center;font-weight: bold;padding-left: 30rpx;border-bottom: 1rpx solid #efeff4;
}.hover {background: #d9d9db;
}.dot {top: 0;left: 0;position: fixed;width: 40rpx;height: 40rpx;border-radius: 50%;background: #1dae01;display: flex;flex-direction: row;justify-content: center;align-items: center;font-size: 24rpx;color: white;
}.shopcar {position: fixed;right: 40rpx;bottom: 60rpx;
}.shopcarimg {width: 48rpx;height: 48rpx;
}.count {color: red;position: fixed;font-weight: bold;right: 30rpx;bottom: 100rpx;
}

布局中用到的样式文件就是以上这些，基本都是一些常规属性，如果对以上还是不能理解，可以查看我之前的布局技巧的系列文章。

逻辑实现

由于代码量也不多，直接就贴出来了，然后关键步骤会做好注释

//方便引用自身
var that
Page({data: {//购物车x坐标animationx: 0,//购物车y坐标animationy: 0,//是否显示飞行物，默认不显示showdot: false,//动画对象ani: {},//商品记数count: 0},onLoad(options) {that = this},onReady() {//页面渲染完后获取购物车在页面中的坐标const query = wx.createSelectorQuery()query.select('#shopcar').boundingClientRect()query.selectViewport().scrollOffset()query.exec(function(res) {let point = res[0]//坐标修正，让飞行物可以正好落在购物车正中心，20是飞行物宽度一半然后转化成pxvar xtemp = (point.left + point.right) / 2 - 20 / 750 * wx.getSystemInfoSync().windowWidthvar ytemp = (point.top + point.bottom) / 2 - 20 / 750 * wx.getSystemInfoSync().windowWidthconsole.log('xtemp : ' + xtemp + ' ytemp : ' + ytemp)that.setData({//获取修正后坐标animationx: xtemp,animationy: ytemp})})},addshopcar(e){if(that.data.showdot == true){return}//获取点击点坐标var touches = e.touches[0]//坐标修正，同上，这么做是为了让飞行点落到点击的中心let toptemp = touches.clientY - 20 / 750 * wx.getSystemInfoSync().windowWidthlet lefttemp = touches.clientX - 20 / 750 * wx.getSystemInfoSync().windowWidthconsole.log('toptemp : ' + toptemp + ' lefttemp : ' + lefttemp)var animation1 = wx.createAnimation({duration: 1,timingFunction: 'ease'})//通过极短的时间让飞行点移动到手指点击位置，同时让飞行点显示出来animation1.left(lefttemp).top(toptemp).step()that.setData({ani: animation1.export(),showdot: true})//然后让飞行点飞行到购物车坐标处，形成添加效果setTimeout(function(){const animation = wx.createAnimation({duration: 1500,timingFunction: 'ease'})//通过Animation的left和top这两个API，将飞行点移动到购物车坐标处animation.left(that.data.animationx).top(that.data.animationy).step()that.setData({ani: animation.export()})setTimeout(function () {var counttemp = that.data.count + 1that.setData({showdot: false,ani: null,count: counttemp})}.bind(this), 1520)//这里也是要稍微延后，后隐藏飞行点，然后清除动画，增加购物计数器},5)//注意这里要稍微延后，保证前面移动到手指点击处的动画完成}
})

以上就是所有的逻辑实现了，然后对比注释然后，发现是不是一切都如此简单了。

尾巴

当然你也可以再每个item固定地方放置按钮，然后点击按钮来实现不同的效果，各位自由发挥了。
老规矩，喜欢我的文章，欢迎素质三连：点赞，评论，关注，谢谢大家！

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

java模拟购物车窗体小程序,微信小程序实现购物车效果示例源码
[实例简介] [实例截图] [核心代码] // pages/shopcart/shopcart.js Page({ /** * 页面的初始数据 */ data: { 'goodList': [ { ' ...
微信小程序实现购物车功能，包含完整小程序代码和运行效果截图
微信小程序实现购物车功能,在商场比较常见,今天刚刚做好,效果不错. 下面从js文件,json文件,wxml文件和wxss文件,分享给大家. 直接上代码: 目录 1.index.js文件内容 2.ind ...
微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序抖音效果
微信小程序抖音效果方法一:swiper-item 里放video 看见有人说这样不能放,有人说现在可以放了,我放了之后可以滑动,效果还行 wxml: <swiper vertical=&qu ...
微信小程序（购物车）--在wxml中设置保留小数位数
微信小程序(购物车)–在wxml中设置保留小数位数一.在该页面文件夹下新建一个wxs后缀的文件 var filters = {toFix: function (value) {return valu ...
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
【微信小程序】幻灯片效果实现
[微信小程序]幻灯片效果实现 <view style="height: {{276-headHeight}}px;" class="bgIndex"> ...
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果由于最近一段时间真的是太忙了,没有顾上即使更新博客,还请粉丝们见谅,最近要实现这样一个效果,这个效果跟淘宝二层楼和新 ...
微信小程序实现购物车页面
微信小程序实现购物车页面先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价单个商品购买数量的增加和减少删除商品.当购物车为空时,页面会变为空购物车的布局根据设计图,我们 ...

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

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

前言

准备

实现

原理

布局

样式

逻辑实现

尾巴

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

最新文章

热门文章