微信小程序的动画效果详解
前言
由于公司计划有变，所以从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()来改动数据源。切换动画完成。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了JS如何理解data URL，对data URL感兴趣的同学，可以参考下2021-04-04
JavaScript使用 for...in 、 for...of 或者 forEach() 遍历元素的示例
for...in 、 for...of 和 forEach 都是用于循环遍历集合元素的方法,但它们之间有一些重要的区别,本文通过实例代码介绍JavaScript使用 for...in 、 for...of 或者 forEach() 遍历元素的相关知识,感兴趣的朋友一起看看吧2023-09-09
这篇文章主要介绍了使用js转化毫秒为时间格式的具体实现,需要的朋友可以参考下2014-04-04
从我们接触前端开始，每个项目的根目录下一般都会有一个package.json文件，这个文件定义了当前项目所需要的各种模块，以及项目的配置信息，本文就详细的来介绍一下2021-07-07
uni-app是一个使用Vue.js开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于UniApp开发H5接入微信登录的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
下面小编就为大家带来一篇js 自带的 map() 方法全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了原生js FileReader对象实现图片上传本地预览效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
js判断代码，比较全，大家可以看下代码，熟悉常见判断代码。2009-04-04
进度条的应用是为了显示的告诉用户文件上传了多少,本文主要介绍了JavaScript获取上传进度的几种方式,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
这篇文章主要介绍了JS实现的简洁纵向滑动菜单(滑动门)效果,通过简单的页面元素遍历实现华东切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
最新评论