编程 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实现的模拟jquery的animate自定义动画(2.5K)

Jul 20 Javascript

js展开闭合效果演示代码

Jul 24 Javascript

javascript原生和jquery库实现iframe自适应高度和宽度

Jul 18 Javascript

JavaScript字符串对象fromCharCode方法入门实例（用于把Unicode值转换为字符串）

Oct 17 Javascript

深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解

Apr 03 Javascript

再谈javascript注入黑客必备！

Sep 14 Javascript

jquery-mobile表单的创建方法详解

Nov 23 Javascript

Jquery删除css属性的简单方法

Dec 04 Javascript

vue 表单输入格式化中文输入法异常问题

May 30 Javascript

使用svg实现动态时钟效果

Jul 17 Javascript

JavaScript 中 JSON.parse 函数和 JSON.stringify 函数

Dec 05 Javascript

node.js使用express框架进行文件上传详解

Mar 03 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 smarty模版引擎中的缓存应用

2009/12/11 PHP

ThinkPHP添加更新标签的方法

2014/12/05 PHP

PHP的邮件群发系统phplist配置方法详细总结

2016/03/30 PHP

PHP文件上传处理案例分析

2016/10/15 PHP

php die()与exit()的区别实例详解

2016/12/03 PHP

PHP中递归的实现实例详解

2017/11/14 PHP

Laravel模型事件的实现原理详解

2018/03/14 PHP

php微信分享到朋友圈、QQ、朋友、微博

2019/02/18 PHP

JavaScript Cookie显示用户上次访问的时间和次数

2009/12/08 Javascript

JS图片无缝滚动(简单利于使用)

2013/06/17 Javascript

微信小程序 WXDropDownMenu组件详解及实例代码

2016/10/24 Javascript

微信小程序 wxapp地图 map详解

2016/10/31 Javascript

火狐和ie下获取javascript 获取event的方法(推荐)

2016/11/26 Javascript

JS html时钟制作代码分享

2017/03/03 Javascript

深入理解vue中的$set

2017/06/01 Javascript

js实现从左向右滑动式轮播图效果

2017/07/07 Javascript

Three.js实现浏览器变动时进行自适应的方法

2017/09/26 Javascript

Vue实现点击后文字变色切换方法

2018/02/11 Javascript

JS随机密码生成算法

2019/09/23 Javascript

javascript 关于赋值、浅拷贝、深拷贝的个人理解

2019/11/01 Javascript

Vant 中的Toast设置全局的延迟时间操作

2020/11/04 Javascript

Python的Tornado框架实现图片上传及图片大小修改功能

2016/06/30 Python

一行代码让 Python 的运行速度提高100倍

2018/10/08 Python

python Tensor和Array对比分析

2020/01/08 Python

Python库安装速度过慢解决方案

2020/07/14 Python

Linux安装Python3如何和系统自带的Python2并存

2020/07/23 Python

Html5跳转到APP指定页面的实现

2020/01/14 HTML / CSS

马来西亚最大的电器网站：Senheng

2017/10/13 全球购物

马德里运动鞋商店：Nigra Mercato

2020/02/16 全球购物

博柏利美国官方网站：Burberry美国

2020/11/19 全球购物

代办出身证明书

2014/10/21 职场文书

班主任先进事迹材料

2014/12/17 职场文书

个人工作能力自我评价

2015/03/05 职场文书

小学家长意见怎么写

2015/06/03 职场文书

Java基础之this关键字的使用

2021/06/30 Java/Android

《传颂之物虚伪的假面》BD发售宣传CM公开

2022/04/04 日漫