微信小程序 简单动画入门
来源:互联网 发布:网络大电影名词解释 编辑:程序博客网 时间:2024/04/27 05:28
一、什么是微信小程序?
小程序在我的理解中只是高度封装的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()来改动数据源。切换动画完成。
0 0
- 微信小程序 简单动画入门
- 属性动画-简单入门
- 微信小程序入门-简单页面编写
- 简单入门程序:汉诺塔
- Kafka简单入门程序
- SpringMvc简单入门程序
- WPF入门(五)-WPF简单动画实现
- ObjectAnimator 安卓属性动画简单入门
- Three.js入门----简单立方体动画
- 简单的GObject程序-入门
- gdb调试程序简单入门
- MyBatis 介绍、简单入门程序
- SpringMVC简单地入门程序
- lucene简单的入门程序
- 简单入门小程序 01
- 简单入门小程序02
- 简单入门小程序03
- 第四个程序opengl简单的动画效果。
- java集合中对象某属性比较排序
- NS3 使用eclipse编辑器
- POJ 2342 Anniversary party(树状DP)
- Java中的数据结构(一):PCollection接口定义、PArrayList的实现
- 解决 button 的背景图片被拉伸
- 微信小程序 简单动画入门
- Java分布式应用如何入门以及有哪些资料?
- 【实训记录】山东大学场馆管理系统实训笔记之——数据库设计
- Linux中基于hadoop安装hive(CentOS7+hadoop2.8.0+hive2.1.1)
- 双目标定log文件
- idea2017创建maven web项目
- Swagger-Codegen的简单使用
- VMwareTools安装
- Python--time模块