微信小程序的动画效果详解


Posted in Javascript onJanuary 18, 2017

前言

由于公司计划有变,所以从H5页面改成去小程序写。所以在着手开发小程序。本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣。请前端大神们勿喷。

一、什么是微信小程序?

小程序在我的理解中只是高度封装的H5,封装了各种组件。根据官方的说法小程序运行不是在浏览器当中。姑且算是微信的插件吧。

二、小程序不能操纵DOM

小程序不能直接操纵DOM,鼓励的是数据绑定。例如vue.js这种。所以个人而言感觉跟如果习惯了用JQ去操纵DOM的开发者很不习惯。需要一个习惯的过程。

三、小程序不能引用JQ

小程序虽然可以引用外部JS。但是我一引用就出现异常。可能需要加以修改才能使用。我心想既然都做小程序了。不如按小程序的那一套走吧。所以就看小程序的API来走了。

四、使用小程序实现基本的切换动画

html代码

微信小程序的动画效果详解

js代码

微信小程序的动画效果详解

从上面的代码我们可以看到,我分别用了checkCodeBtnOpacity,checkCodeOpacity控制了两个块的透明度。用于隐藏。

用animationData保存动画数据。

然后给bindGetCheckCode绑定了一个click事件。

然后调用了微信的API wx.createAnimation ,然后调用了opacity(1)来显示,然后调用translateY(-100)Y轴平移来做一个上升的效果。

相关的API参数可以查看小程序API文档,地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html?t=2017112#wxcreateanimationobject

接着调用this.setData()来改动数据源。切换动画完成。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
JavaScript生成指定范围的时间列表
Mar 19 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 #Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 #Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 #Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 #Javascript
vue.js+Element实现表格里的增删改查
Jan 18 #Javascript
JS中Array数组学习总结
Jan 18 #Javascript
原生javascript实现图片放大镜效果
Jan 18 #Javascript
You might like
PHP新手上路(十四)
2006/10/09 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
鼠标图片振动代码
2006/07/06 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python实现视频下载功能
2017/03/14 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
银行求职信个人范文
2013/12/16 职场文书
中班中秋节活动反思
2014/02/18 职场文书
人民的好儿女观后感
2015/06/18 职场文书
会议简讯范文
2015/07/20 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python