微信小程序动画(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 相关文章推荐
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 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
Mysql的常用命令
2006/10/09 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
第四章之BootStrap表单与图片
2016/04/25 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
tab栏切换原理
2017/03/22 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
Python fileinput模块使用实例
2015/06/03 Python
简单实现python画圆功能
2018/01/25 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
详解flask表单提交的两种方式
2018/07/21 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
给学校的建议书
2014/03/12 职场文书
创意广告词
2014/03/17 职场文书
3分钟演讲稿
2014/04/30 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
离婚财产分配协议书
2014/10/21 职场文书
第二次离婚起诉书
2015/05/18 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
python内置进制转换函数的操作
2021/06/02 Python
python字符串的多行输出的实例详解
2021/06/08 Python