微信小程序动画(Animation)的实现及执行步骤


Posted in Javascript onOctober 28, 2018

简单总结一下微信动画的实现及执行步骤。

一、实现方式

官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

因为小程序是数据驱动的,给这句话加上数字标注分为三步:

微信小程序动画(Animation)的实现及执行步骤

前两步是定义一个动画并设置都要干什么,然后把这个设置好的“规则”扔给界面上的某个元素,让它按照这个规则执行。

当然如果有多个元素的animation="{{ani}}",也都会执行这个动画规则。

二、用例子说话

新建一个小程序,把没用的删掉修改一下,做个简单例子,上图

微信小程序动画(Animation)的实现及执行步骤

代码如下:

index.wxml,一个helloworld,一个按钮

<view class="container">
 <view class="usermotto" animation="{{ani}}">
  <text class="user-motto">{{motto}}</text>
 </view>
 <button bindtap='start'>动画</button>
</view>

index.wxss, 为了看着方便加了个边框

.usermotto {
 margin-top: 100px;
 border: solid;
}

index.js

Page({
 data: {
  motto: 'Hello World',
 },
 start:function(){
  var animation = wx.createAnimation({
   duration: 4000,
   timingFunction: 'ease',
   delay: 1000
  });
  animation.opacity(0.2).translate(100, -100).step()
  this.setData({
   ani: animation.export()
  })
 }
})

 三、相关参数及方法

简单介绍一下例子中的几个参数和方法(其他的详见官方文档):

      duration: 动画持续多少毫秒
      timingFunction: “运动”的方式,例子中的 'ease'代表动画以低速开始,然后加快,在结束前变慢 
      delay: 多久后动画开始运行

      opacity(0.2) 慢慢变透明

      translate(100, -100) 向X轴移动100的同时向Y轴移动-100

      step(): 一组动画完成,例如想让上例中的HelloWorld向右上方移动并变透明后,再次向左移动50可以继续写 animation.translateX( -50).step() , 作用就是向右上方移动和变透明是同时进行, 这两种变化完成之后才会进行向左运行的一步。

例子:Github

总结

以上所述是小编给大家介绍的微信小程序动画(Animation)的实现及执行步骤,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 #Javascript
javascript中函数的写法实例代码详解
Oct 28 #Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 #Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 #Javascript
vue中使用protobuf的过程记录
Oct 26 #Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 #Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 #Javascript
You might like
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
PHP Directory 函数的详解
2013/03/07 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
php 浮点数比较方法详解
2017/05/05 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
Javascript常考语句107条收集
2010/03/09 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
基于Python的身份证号码自动生成程序
2014/08/15 Python
Python中的高级数据结构详解
2015/03/27 Python
Python中的异常处理简明介绍
2015/04/13 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
Python Socket使用实例
2017/12/18 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
代码实例讲解python3的编码问题
2019/07/08 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
业务副厂长岗位职责
2014/01/03 职场文书
教研处工作方案
2014/05/26 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang