编程 Javascript

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

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()来改动数据源。切换动画完成。

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

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

- Author -

进击的Jary

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

奇妙的js

Sep 24 Javascript

javascript tips提示框组件实现代码

Nov 19 Javascript

将HTMLCollection/NodeList/伪数组转换成数组的实现方法

Jun 20 Javascript

jQuery $.data()方法使用注意细节

Dec 31 Javascript

文档对象模型DOM通俗讲解

Nov 01 Javascript

JS实现根据出生年月计算年龄

Jan 10 Javascript

基于jquery实现简单的分页控件

Mar 17 Javascript

关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法

Jun 13 Javascript

promise和co搭配生成器函数方式解决js代码异步流程的比较

May 25 Javascript

nuxt.js中间件实现拦截权限判断的方法

Nov 21 Javascript

小程序scroll-view安卓机隐藏横向滚动条的实现详解

May 16 Javascript

js实现经典贪吃蛇小游戏

Mar 19 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 传值赋值与引用赋值的区别

2010/12/29 PHP

zf框架的db类select查询器join链表使用示例(zend框架)

2014/03/14 PHP

destoon官方标签大全

2014/06/20 PHP

php实现数组中索引关联数据转换成json对象的方法

2015/07/08 PHP

PHP 7.4 新语法之箭头函数实例详解

2019/05/09 PHP

XHTML-Strict 内允许出现的标签

2006/12/11 Javascript

纯文字版返回顶端的js代码

2013/08/01 Javascript

jQuery中extend函数详解

2015/02/13 Javascript

一道优雅面试题分析js中fn()和return fn()的区别

2016/07/05 Javascript

AngularJS 依赖注入详解和简单实例

2016/07/28 Javascript

JS解决iframe之间通信和自适应高度的问题

2016/08/24 Javascript

JavaScript中原型链存在的问题解析

2016/09/25 Javascript

详解Angular的双向数据绑定(MV-VM)

2016/12/26 Javascript

jQuery 导航自动跟随滚动的实现代码

2018/05/30 jQuery

微信小程序首页的分类功能和搜索功能的实现思路及代码详解

2018/09/11 Javascript

React 全自动数据表格组件——BodeGrid的实现思路

2019/06/12 Javascript

js实现无缝轮播图效果

2020/03/09 Javascript

js中forEach，for in，for of循环的用法示例小结

2020/03/14 Javascript

Vue computed 计算属性代码实例

2020/04/22 Javascript

vue $mount 和 el的区别说明

2020/09/11 Javascript

vue监听键盘事件的相关总结

2021/01/29 Vue.js

[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典

2018/12/16 DOTA

python获得图片base64编码示例

2014/01/16 Python

举例介绍Python中的25个隐藏特性

2015/03/30 Python

python使用webbrowser浏览指定url的方法

2015/04/04 Python

python使用opencv驱动摄像头的方法

2018/08/03 Python

关于django 1.10 CSRF验证失败的解决方法

2019/08/31 Python

现代绅士日常奢侈品：Todd Snyder

2019/12/13 全球购物

德国净水壶和滤芯品牌：波尔德PearlCo（家用净水器）

2020/04/29 全球购物

投标保密承诺书

2014/05/19 职场文书

装修施工安全责任书

2014/07/24 职场文书

2014年医务科工作总结

2014/12/18 职场文书

2015年教师节广播稿

2015/08/19 职场文书

《社戏》教学反思

2016/02/22 职场文书

一篇文章弄清楚Ajax请求的五个步骤

2022/03/17 Javascript

Java数组详细介绍及相关工具类

2022/04/14 Java/Android