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


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 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
javascript入门教程基础篇
Nov 16 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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强制运行广告的方法
2014/12/01 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
jquery事件与函数的使用介绍
2013/09/29 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
Python实现数据库编程方法详解
2015/06/09 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
总经理岗位职责描述
2014/02/08 职场文书
2014村务公开实施方案
2014/02/25 职场文书
计算机专业职业规划
2014/02/28 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
走进科学观后感
2015/06/18 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
nginx配置之并发频次限制
2022/04/18 Servers