编程 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 相关文章推荐

jquery 跨域访问问题解决方法(笔记)

Jun 08 Javascript

THREE.JS入门教程(6)创建自己的全景图实现步骤

Jan 25 Javascript

JQuery实现点击div以外的位置隐藏该div窗口

Sep 13 Javascript

jQuery实现带动画效果的二级下拉导航方法

Mar 11 Javascript

js实现图片无缝滚动特效

Mar 19 Javascript

jquery实现拖动效果

Aug 10 Javascript

angular ng-click防止重复提交实例

Jun 16 Javascript

jQuery实现标签子元素的添加和赋值方法

Feb 24 jQuery

详解jQuery中的isPlainObject()使用方法

Feb 27 jQuery

jQuery中$原理实例分析

Aug 13 jQuery

vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

Nov 05 Javascript

React + Threejs + Swiper 实现全景图效果的完整代码

Jun 28 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 debug 安装技巧

2011/04/30 PHP

phpstorm最新激活码分享亲测phpstorm2020.2.3版可用

2020/11/22 PHP

dropdownlist之间的互相联动实现（显示与隐藏）

2009/11/24 Javascript

基于jquery实现漂亮的动态信息提示效果

2011/08/02 Javascript

js锁屏解屏通过对$.ajax进行封装实现

2014/07/31 Javascript

AngularJS iframe跨域打开内容时报错误的解决办法

2015/01/26 Javascript

nodejs实现HTTPS发起POST请求

2015/04/23 NodeJs

js实现索引图片切换效果

2015/11/21 Javascript

JQuery实现Ajax加载图片的方法

2015/12/24 Javascript

jquery+css3实现会动的小圆圈效果

2016/01/27 Javascript

微信小程序时间格式化（util.formatTime(new Date)）详解

2016/11/16 Javascript

JS数字千分位格式化实现方法总结

2016/12/16 Javascript

javascript history对象详解

2017/02/09 Javascript

原生JS实现图片网格式渐显、渐隐效果

2017/06/05 Javascript

分分钟学会vue中vuex的应用（入门教程）

2017/09/14 Javascript

bootstrap-Treeview实现级联勾选

2017/11/23 Javascript

仿京东快报向上滚动的实例

2017/12/13 Javascript

centos 上快速搭建ghost博客方法分享

2018/05/23 Javascript

jQuery滑动效果实现方法分析

2018/09/05 jQuery

pytyon 带有重复的全排列

2013/08/13 Python

python 调用有道api接口的方法

2019/01/03 Python

解决使用PyCharm时无法启动控制台的问题

2019/01/19 Python

pytest中文文档之编写断言

2019/09/12 Python

python基于plotly实现画饼状图代码实例

2019/12/16 Python

Tensorflow 实现分批量读取数据

2020/01/04 Python

python创建文本文件的简单方法

2020/08/30 Python

简单html5代码获取地理位置

2014/03/31 HTML / CSS

HTML5的一个显示电池状态的API简介

2015/06/18 HTML / CSS

Sahajan美国：阿育吠陀护肤品牌

2021/01/09 全球购物

华美博弈C/VC工程师笔试试题

2012/07/16 面试题

介绍一下Ruby的特点

2013/01/20 面试题

英文产品推荐信

2015/03/27 职场文书

Mysql 如何批量插入数据

2021/04/06 MySQL

新手入门Mysql--sql执行过程

2021/06/20 MySQL

微信小程序APP页面的之间的相互传递参数以及自定义组件

2022/04/19 Javascript

mysqldump进行数据备份详解

2022/07/15 MySQL