• 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
  • 微信公众号
您的位置:首页 > 程序设计 >微信小程序 > 关于微信小程序的动画效果的实现

关于微信小程序的动画效果的实现

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-11-30

匿名通过本文主要向大家介绍了微信小程序,动画等相关知识,希望对您有所帮助,也希望大家支持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()来改动数据源。切换动画完成。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注微课江湖!

相关推荐:

微信小程序loading组件显示载入动画的用法介绍

关于微信小程序中顶部导航栏的实现

微信小程序中小说阅读小程序的实现

以上就是关于微信小程序的动画效果的实现的详细内容,更多请关注微课江湖其它相关文章!

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

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

  • 微信小程序跟读 demo代码
  • 微信小程序-GetWeApp聊天室 代码
  • 微信小程序demo 仿手机淘宝
  • 微信小程序 Artand 瀑布流风格 代码demo
  • 微信小程序高仿手机QQ应用程序
  • 微信小程序-小商城前台
  • 微信小程序仿手机淘宝demo代码
  • 微信小程序仿Apple Music demo代码
  • 微信小程序整合一套UI库
  • 微信小程序妹子图片展示demo代码

相关文章

  • 2018-11-30微信小程序通过api接口将json数据展现到小程序
  • 2018-11-30微信小程序中数据过滤的实现方法介绍(代码)
  • 2017-11-12微信小程序开发-路由
  • 2018-11-30微信小程序 页面跳转传参的介绍
  • 2018-11-30 微信小程序实现【回到顶部】的按钮效果
  • 2018-11-30小程序中生命周期的解析(附代码)
  • 2018-11-30实现MFC简单的加密解密小程序介绍
  • 2018-11-30小程序开发之天气预报
  • 2018-11-30关于微信小程序收藏功能的实现
  • 2018-11-30微信小程序Page中data数据操作和函数调用详解

文章分类

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

最近更新的内容

    • 关于微信小程序中图片处理的问题总结
    • 基础组件入门教程总结
    • 微信小程序开发:如何实现网络请求(GET请求)
    • 微信小程序数据分析指南
    • 小程序开发欢迎界面的代码实例
    • 微信小程序实现鼠标拖动效果实现方法
    • 小程序:post请求
    • 微信小程序组件解读和分析:checkbox复选项介绍
    • 微信小程序之获取session_key与openid的案例(图)
    • 案例分享--小程序图片分组上传

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

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