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


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 相关文章推荐
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
jquery图片放大镜效果
Jun 23 jQuery
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
js实现双色球效果
Aug 02 Javascript
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
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
JS中style属性
2006/10/11 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
js简易版购物车功能
2017/06/17 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
python 调用HBase的简单实例
2016/12/18 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python中的Numpy矩阵操作
2018/08/12 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
Python threading的使用方法解析
2019/08/28 Python
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
两只小狮子教学反思
2014/02/05 职场文书
保密承诺书范文
2014/03/27 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
自书遗嘱范文
2015/08/07 职场文书
早恋主题班会
2015/08/14 职场文书
2016国庆促销广告语
2016/01/28 职场文书
实习报告范文
2019/07/30 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL