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

前言

由于公司计划有变，所以从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()来改动数据源。切换动画完成。

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

赞 (0)

相关推荐

  • 微信小程序 连续旋转动画（this.animation.rotate）详解

    微信小程序 连续旋转动画 一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一直旋转) onShow: function() { console.log('index---------onShow()') this.animation = wx.createAnimation({ duration: 1400, timingFunction: 'linear'

  • 微信小程序开发animation心跳动画效果

    微信小程序开发animation心跳动画效果

    本文实例为大家分享了微信小程序开发animation心跳动画,供大家参考,具体内容如下 1.微信小程序开发animation心跳动画 wxml文件中: <view class="bottomViewItem"> <view class="bottomMiddleHeaderView" bindtap="voteClick" data-id="value"> <view class="bo

  • 微信小程序 动画的简单实例

    微信小程序--简易动画案例 wxml: <view class="container"> <view animation="{{animation}}" class="view">我在做动画</view> </view> <button type="primary" bindtap="translate">旋转</button> js:

  • 微信小程序开发之录音机 音频播放 动画实例 (真机可用)

    微信小程序开发之录音机 音频播放 动画实例 (真机可用)

    趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评! 老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒. 3.我在录音完成后才加载列表. 下图就是从微信存储的文件里获取到的列表信息.有储存路径,

  • 微信小程序开发之animation循环动画实现的让云朵飘效果

    微信小程序开发之animation循环动画实现的让云朵飘效果

    本文实例讲述了微信小程序开发之animation循环动画实现的让云朵飘效果.分享给大家供大家参考,具体如下: 微信小程序提供了实现动画的api--animation,但却不能循环播放,都是一次性的,动完就Over了,下面提供一个用微信小程序的animation来实现循环动画的玩具,抛砖引玉,希望大家能想出更好的方法来实现真正的循环.说是玩具是因为这个循环动画通过js脚本的setInterval来实现的,但'setInterval'在实际运行中会出现越来越严重的延迟,这是由于js的单线程运行模式所

  • 微信小程序 小程序制作及动画（animation样式）详解

    微信小程序 小程序制作及动画（animation样式）详解

    微信小程序制作 实现效果图: 微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等 再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 在看到上图,小伙伴

  • 微信小程序开发之麦克风动画 帧动画 放大 淡出

    微信小程序开发之麦克风动画 帧动画 放大 淡出

    想做个录音机,第一步就卡在麦克风动画这里了. 先上gif.再吐槽. ① 上面gif中声波的动画是个半成品.没有循环播放.在微信小程序的开发文档上找了很久,也没找到循环模式的参数设置.用setInterval()并不执行动画.我在微信小程序文档 动画最下面找到这么一行字.这个锅是不是可以甩出去了? ps:如果有同学能实现动画循环,一定告诉我. ② 麦克风里面是个帧动画.没有前端的基础,只能用非主流的办法凑合了. 用wx:if{{}}判断js中定义的值是不是等于图片对应的数字来控制图片的显示和隐藏.

  • 微信小程序实现登录页云层漂浮的动画效果

    微信小程序实现登录页云层漂浮的动画效果

    前言 2017年前端火了,微信小程序.weex.reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波. 上效果图(GIF动态图) 当我看到这张背景图的时候,强迫症立马来了,这云朵为什么不动,于是开始了一波折腾. 知识点 认识animation animation 属性是一个简写属性,用于设置六个动画属性: 值 描述 animation-name 规定需要绑定到选择器的 keyframe 名称 animation-duration 规定完成动画所花费的

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

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

    前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是高度封装的H5,封装了各种组件.根据官方的说法小程序运行不是在浏览器当中.姑且算是微信的插件吧. 二.小程序不能操纵DOM 小程序不能直接操纵DOM,鼓励的是数据绑定.例如vue.js这种.所以个人而言感觉跟如果习惯了用JQ去操纵DOM的开发者很不习惯.需要一个习惯的过程. 三.小程序不能引用JQ

  • 微信小程序组件 marquee实例详解

    微信小程序组件 marquee实例详解 1. marquee标签 html是有marquee标签的,可以实现跑马灯效果,但小程序没有,所以要实现.这里考虑使用css3的animation实现. html的marquee是这样使用的. <marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1"

  • 微信小程序中input标签详解及简单实例

    微信小程序中input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对

  • 微信小程序Redux绑定实例详解

    微信小程序Redux绑定实例详解 安装 clone或者下载代码库到本地: git clone https://github.com/charleyw/wechat-weapp-redux 将dist/wechat-weapp-redux.js(或者拷贝minify的也可以)文件直接拷贝到小程序的工程中,例如(下面假设我们把第三方包都安装在libs目录下): cd wechat-weapp-redux cp -r dist/wechat-weapp-redux.js <小程序根目录>/libs

  • 微信小程序 Buffer缓冲区的详解

     微信小程序 Buffer缓冲区的详解 JavaScript 语言自身只有字符串数据类型,没有二进制数据类型. 但在处理像TCP流或文件流时,必须使用到二进制数据.因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门存放二进制数据的缓存区. 在 node.js 中,Buffer 类是随 Node 内核一起发布的核心库.Buffer 库为 Node.js 带来了一种存储原始数据的方法,可以让 Node.js 处理二进制数据,每当需要在 Node.js 中处理I/O操作中移动

  • 微信小程序 MD5的方法详解及实例代码

    微信小程序 MD5的方法详解 生成的文件可以放在  utils文件中哦!!! /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002. * Code also contributed by Greg Holt

  • 微信小程序 地图map实例详解

    微信小程序 地图map实例详解

    微信小程序 地图map实例详解 wxml: class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位 longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" co

  • 微信小程序日历组件calendar详解及实例

    微信小程序日历组件calendar详解及实例

    微信小程序日历组件calendar详解及实例 模版使用: src="../cal/calendar.wxml"> is="calendar" data="{{selected_value,days,month,years,lunar_years,lunar_month,lunar_days,selectDateType,l unar_selected_value}}"> JS代码使用: var Calendar = require('

  • 微信小程序 Toast自定义实例详解

    微信小程序 Toast自定义实例详解

    微信小程序 Toast自定义实例详解 实现类似于Android的Toast提示 index.js: var timer; var inputinfo = ""; var app = getApp() Page({ data: { animationData:"", showModalStatus:false }, onLoad: function () { }, showModal: function () { // 显示遮罩层 var animation = wx

  • 微信小程序 常用工具类详解及实例

    微信小程序 常用工具类详解 前言: 做微信小程序当中,会遇到好多的工具类util.js,这里记载下来以便平常使用 (Ps:建议通过目录查看) -获取日期(格式化) function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinut

随机推荐