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


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 相关文章推荐
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
Vue组件开发初探
Feb 14 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
Html5生成验证码的示例代码
May 10 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
图书管理程序(二)
2006/10/09 PHP
apache rewrite_module模块使用教程
2008/01/10 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
js实现抽奖功能
2020/11/24 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
python实现从web抓取文档的方法
2014/09/26 Python
python实现无证书加密解密实例
2014/10/27 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python对象与json相互转换的方法
2019/05/07 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
Python接口测试get请求过程详解
2020/02/28 Python
python实现密码强度校验
2020/03/18 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
美国网上订购鲜花:FTD
2016/09/23 全球购物
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
环卫工人慰问信
2015/02/15 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
Hive HQL支持2种查询语句风格
2022/06/25 数据库