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


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 相关文章推荐
10个实用的脚本代码工具
May 04 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 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 cookis创建实现代码
2009/03/16 PHP
php删除指定目录的方法
2015/04/03 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
<script defer> defer 是什么意思
2009/05/10 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
Python脚本实现代码行数统计代码分享
2015/03/10 Python
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python读大数据txt
2016/03/28 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
Python多线程的退出控制实现
2020/08/10 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
毕业生自荐信的主要内容
2013/10/29 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
二审答辩状范文
2015/05/22 职场文书
学习委员竞选稿
2015/11/20 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python