微信小程序 动画的简单实例


Posted in Javascript onOctober 12, 2017

微信小程序——简易动画案例

wxml:

<view class="container">
<view animation="{{animation}}" class="view">我在做动画</view>
</view>
<button type="primary" bindtap="translate">旋转</button>

js:

//js
Page({
 data: {

 },
 onReady: function () {
  // 页面渲染完成
  //实例化一个动画
  this.animation = wx.createAnimation({
   // 动画持续时间,单位ms,默认值 400
   duration: 400,
   /**
   * http://cubic-bezier.com/#0,0,.58,1 
   * linear 动画一直较为均匀
   * ease 从匀速到加速在到匀速
   * ease-in 缓慢到匀速
   * ease-in-out 从缓慢到匀速再到缓慢
   * 
   * http://www.tuicool.com/articles/neqMVr
   * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
   * step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
   */
   timingFunction: 'ease',
   // 延迟多长时间开始
   delay: 100,
   /**
   * 以什么为基点做动画 效果自己演示
   * left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%
   * top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%
   */
   transformOrigin: 'left top 0',
   success: function (res) {
    console.log(res)
   }
  })
 },
 /**
 *位移
 */
 translate: function () {
  //x轴位移100px

  this.animation.translate(100, 0).step()
  this.setData({
   //输出动画
   animation: this.animation.export()
  })
 }


})

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
简单的jQuery入门指引
Jul 28 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
详解JavaScript树结构
Jan 09 Javascript
基本DOM节点操作
Jan 17 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
node通过npm写一个cli命令行工具
Oct 12 #Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 #Javascript
AngularJS实现表单验证功能详解
Oct 12 #Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 #Javascript
AngularJS 中的数据源的循环输出
Oct 12 #Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 #Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 #Javascript
You might like
3种平台下安装php4经验点滴
2006/10/09 PHP
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php适配器模式介绍
2012/08/14 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php类常量用法实例分析
2015/07/09 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
pandas如何处理缺失值
2019/07/31 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
计算机应届毕业生自荐信范文
2014/02/23 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
学习三严三实心得体会
2014/10/13 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
清明节寄语2015
2015/03/23 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android