小程序点餐界面添加购物车左右摆动动画


Posted in Javascript onSeptember 23, 2020

效果图

小程序点餐界面添加购物车左右摆动动画

动画代码

这里 只提供图中购物车动画代码,不提供以上点餐界面(需要点餐界面 点击这里:Gitee仓库)。

在触发代码中使用 this.cartWwing() 调用动画,不理解请访问教程。

/**
 * 点击商品+号购物车摆动
 * @return void 
 */
cartWwing: function()
{

 // 创建动画实例(animation)
 var animation = wx.createAnimation({
 duration: 100,//动画持续时间
 timingFunction: 'ease-in',//动画以低速开始
 //具体配置项请查看文档
 })

 // 通过实例描述对象()
 animation.translateX(6).rotate(21).step()
 animation.translateX(-6).rotate(-21).step()
 animation.translateX(0).rotate(0).step()

 // 导出动画
 this.setData({
 ani: animation.export()
 })

},

总结

到此这篇关于小程序点餐界面添加购物车左右摆动动画的文章就介绍到这了,更多相关小程序购物车左右摆动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
常用简易JavaScript函数
Apr 09 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
老生常谈js中的MVC
Jul 25 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
详解vue引入子组件方法
Feb 12 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
原生js实现购物车功能
Sep 23 #Javascript
详解微信小程序动画Animation执行过程
Sep 23 #Javascript
原生js实现分页效果
Sep 23 #Javascript
原生js实现购物车
Sep 23 #Javascript
javascript实现简易计算器功能
Sep 23 #Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 #Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 #Javascript
You might like
php split汉字
2009/06/05 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
php cli配置文件问题分析
2015/10/15 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
axios学习教程全攻略
2017/03/26 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
gearman的安装启动及python API使用实例
2014/07/08 Python
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Python异常处理总结
2014/08/15 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
七年级地理教学反思
2014/01/26 职场文书
应届生自荐信范文
2014/02/21 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
css3新特性的应用示例分析
2022/03/16 HTML / CSS
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle