• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 微信小程序的动画效果详解

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

作者:进击的Jary 字体:[增加 减小] 来源:互联网 时间:2017-05-11

进击的Jary通过本文主要向大家介绍了微信小程序案例详解,微信小程序详解,微信小程序开发详解,ds1302程序详解,rc522程序详解等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

前言

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 微信小程序左右滑动切换页面详解及实例代码
  • 微信小程序 动态的设置图片的高度和宽度详解及实例代码
  • 微信小程序开发之相册选择和拍照详解及实例代码
  • 微信小程序中实现一对多发消息详解及实例代码
  • 微信小程序 详解页面跳转与返回并回传数据
  • 微信小程序的动画效果详解
  • 详解微信小程序开发之城市选择器 城市切换
  • 微信小程序 详解下拉加载与上拉刷新实现方法
  • 微信小程序 本地存储及登录页面处理实例详解
  • 微信小程序开发(一) 微信登录流程详解

相关文章

  • 2017-05-11利用iscroll4实现轮播图效果实例代码
  • 2017-05-11微信小程序 登录实例详解
  • 2017-05-11discuz表情的JS提取方法分析
  • 2017-05-11利用JavaScript在网页实现八数码启发式A*算法动画效果
  • 2017-05-11jQuery实现倒计时重新发送短信验证码功能示例
  • 2017-05-11原生js实现可拖动的登录框效果
  • 2017-05-11javascript常用的设计模式
  • 2017-05-11深入理解javascript的getTime()方法
  • 2017-05-11Angular开发者指南之入门介绍
  • 2017-05-11Vuex之理解Getters的用法实例

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Vue.js教程之axios与网络传输的学习实践
    • ThinkPHP+jquery实现“加载更多”功能代码
    • 基于Vue实现tab栏切换内容不断实时刷新数据功能
    • Bootstrap免费字体和图标网站(值得收藏)
    • js输入框使用正则表达式校验输入内容的实例
    • 教你用十行node.js代码读取docx的文本
    • jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
    • vue构建单页面应用实战
    • 微信小程序 flex实现导航实例详解
    • 原生Javascript插件开发实践

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有