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


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 相关文章推荐
flexigrid 参数说明
Nov 23 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 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抓取https的内容的代码
2010/04/06 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
php数组合并的二种方法
2014/03/21 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python3爬取数据至mysql的方法
2018/06/26 Python
使用python实现飞机大战游戏
2020/03/23 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
营销与策划个人求职信
2013/09/22 职场文书
中式婚礼主持词
2014/03/13 职场文书
工作说明书范文
2014/05/07 职场文书
项目经理任命书内容
2014/06/06 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
演讲开场白和结束语
2015/05/29 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
python tkinter实现定时关机
2021/04/21 Python