微信小程序动画(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 相关文章推荐
js中eval详解
Mar 30 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
vue实现分页栏效果
Jun 28 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
vue实现自定义多选按钮
Jul 16 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 魔术函数使用说明
2010/05/14 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
简单的分页代码js实现
2016/05/17 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
python高阶爬虫实战分析
2018/07/29 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
护士进修自我鉴定
2014/02/07 职场文书
会走路的树教学反思
2014/02/20 职场文书
市场营销专业自荐书
2014/06/10 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
幽默导游词开场白
2015/05/29 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
Java 写一个简单的图书管理系统
2022/04/26 Java/Android