• 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代码

    微信小程序的动画效果0

    js代码

  微信小程序的动画效果1

从上面的代码我们可以看到,我分别用了checkCodeBtnOpacity,checkCodeOpacity控制了两个块的透明度。用于隐藏。

用animationData保存动画数据。

然后给bindGetCheckCode绑定了一个click事件。

然后调用了微信的API wx.createAnimation ,然后调用了opacity(1)来显示,然后调用translateY(-100)Y轴平移来做一个上升的效果。

接着调用this.setData()来改动数据源。切换动画完成。

【相关推荐】

1. 微信小程序开发和HTML5开发、css3开发的区别

2. HTML5实现上传图片预览效果代码

3. 分享HTML5 Canvas画印章效果实例代码

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

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

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

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

相关文章

  • 2018-08-20微信小程序 WXS
  • 2018-11-30js的自定义trim函数使用方法
  • 2018-11-30教你一个删除微信web开发者工具中失效项目的方法
  • 2017-06-20微信小程序Canvas增强组件 代码demo
  • 2018-11-30微信小程序 JS动态修改样式的实现代码
  • 2018-11-30Eclipse开发Android小程序的12种错误总结
  • 2018-11-30微信小程序中tabBar底部导航的介绍
  • 2018-11-30关于容器组件的6篇文章推荐
  • 2018-11-30小程序如何使用swiper组件实现图片切换
  • 2018-11-30微信小程序 action-sheet详解及实例代码

文章分类

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

最近更新的内容

    • 微信小程序中蓝牙的链接
    • 微信小程序如何处理本地图片按照屏幕尺寸的方法介绍
    • 微信小程序中支付后调用SDK的异步通知及验证处理订单方法
    • 使用DeviceOne实现微信小程序功能
    • 分享两种除了支付宝接口、微信接口,免接口收款之外的免接口付款方法
    • 详解微信小程序中增、删、改、查操作实例代码
    • Android中微信小程序支付倒计时功能
    • 微信小程序表单组件 开关 switch
    • 总结小程序开发中遇到的问题
    • 微信小程序 开发工具快捷键整理

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

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