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


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 相关文章推荐
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
JQuery性能优化的几点建议
May 14 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
JavaScript中的类型检查
Feb 03 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 get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
PHP实现微信发红包程序
2015/08/24 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
js实现电灯开关效果
2021/01/19 Javascript
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
python 重定向获取真实url的方法
2018/05/11 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
英文版网络工程师求职信
2013/10/28 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
SQL Server Agent 服务无法启动
2022/04/20 SQL Server