微信小程序实现弹出菜单动画


Posted in Javascript onJune 21, 2019

微信小程序动画之弹出菜单,供大家参考,具体内容如下

效果图

微信小程序实现弹出菜单动画

js:

Page({
 data: {
  isPopping: false,
  animPlus: {},
  animCollect: {},
  animTranspond: {},
  animInput: {},
  animCloud:{},
  aninWrite:{},
 },
 //点击弹出
 plus: function () {
  if (this.data.isPopping) {
   //缩回动画
   this.popp();
   this.setData({
    isPopping: false
   })
  } else if (!this.data.isPopping) {
   //弹出动画
   this.takeback();
   this.setData({
    isPopping: true
   })
  }
 },
 input: function () {
  console.log("input")
 },
 transpond: function () {
  console.log("transpond")
 },
 collect: function () {
  console.log("collect")
 },
 cloud:function(){
  console.log("cloud")
 },
 write: function () {
  console.log("cloud")
 },


 //弹出动画
 popp: function () {
  //plus顺时针旋转
  var animationPlus = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationcollect = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationTranspond = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationInput = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationCloud = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationWrite = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  animationPlus.rotateZ(180).step();
  animationcollect.translate(-90, -100).rotateZ(180).opacity(1).step();
  animationTranspond.translate(-140, 0).rotateZ(180).opacity(1).step();
  animationInput.translate(-90, 100).rotateZ(180).opacity(1).step();
  animationCloud.translate(0, 135).rotateZ(180).opacity(1).step();
  animationWrite.translate(0, -135).rotateZ(180).opacity(1).step();
  this.setData({
   animPlus: animationPlus.export(),
   animCollect: animationcollect.export(),
   animTranspond: animationTranspond.export(),
   animInput: animationInput.export(),
   animCloud: animationCloud.export(),
   animWrite: animationWrite.export(),
  })
 },
 //收回动画
 takeback: function () {
  //plus逆时针旋转
  var animationPlus = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationcollect = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationTranspond = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationInput = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationCloud = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationWrite = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  animationPlus.rotateZ(0).step();
  animationcollect.translate(0, 0).rotateZ(0).opacity(0).step();
  animationTranspond.translate(0, 0).rotateZ(0).opacity(0).step();
  animationInput.translate(0, 0).rotateZ(0).opacity(0).step();
  animationCloud.translate(0, 0).rotateZ(0).opacity(0).step();
  animationWrite.translate(0, 0).rotateZ(0).opacity(0).step();
  this.setData({
   animPlus: animationPlus.export(),
   animCollect: animationcollect.export(),
   animTranspond: animationTranspond.export(),
   animInput: animationInput.export(),
   animCloud: animationCloud.export(),
   animWrite: animationWrite.export(),
  })
 },


 onLoad: function (options) {
  // 生命周期函数--监听页面加载
 },
 onReady: function () {
  // 生命周期函数--监听页面初次渲染完成
 },
 onShow: function () {
  // 生命周期函数--监听页面显示
 },
 onHide: function () {
  // 生命周期函数--监听页面隐藏
 },
 onUnload: function () {
  // 生命周期函数--监听页面卸载
 },
 onPullDownRefresh: function () {
  // 页面相关事件处理函数--监听用户下拉动作
 },
 onReachBottom: function () {
  // 页面上拉触底事件的处理函数
 },
 onShareAppMessage: function () {
  // 用户点击右上角分享
  return {
   title: 'title', // 分享标题
   desc: 'desc', // 分享描述
   path: 'path' // 分享路径
  }
 }
})

wxml:

<view>
 <image src="../../image/1.png" class="img-style" animation="{{animWrite}}" bindtap="write"></image>
 <image src="../../image/4.png" class="img-style" animation="{{animCollect}}" bindtap="collect"></image>
 <image src="../../image/2.png" class="img-style" animation="{{animTranspond}}" bindtap="transpond"></image>
 <image src="../../image/3.png" class="img-style" animation="{{animInput}}" bindtap="input"></image>
 <image src="../../image/5.png" class="img-style" animation="{{animCloud}}" bindtap="cloud"></image>
 <image src="../../image/6.png" class="img-switch-style" animation="{{animPlus}}" bindtap="plus"></image>
</view>

wxss:

.img-switch-style {
 height: 120rpx;
 width: 120rpx;
 position: absolute;
 bottom: 250rpx;
 right: 100rpx;
 z-index: 100;
}
 
.img-style {
 height: 120rpx;
 width: 120rpx;
 position: absolute;
 bottom: 250rpx;
 right: 100rpx;
 opacity: 0;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
js类的继承定义与用法分析
Jun 21 #Javascript
js中值引用和地址引用实例分析
Jun 21 #Javascript
微信小程序实现消息框弹出动画
Apr 18 #Javascript
前端Electron新手入门教程详解
Jun 21 #Javascript
javascript实现自由编辑图片代码详解
Jun 21 #Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 #Javascript
微信小程序实现圆形进度条动画
Nov 18 #Javascript
You might like
精通php的十大要点(上)
2009/02/04 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
php使用session二维数组实例
2014/11/06 PHP
PHP微信支付开发实例
2016/06/22 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
JsRender实用入门教程
2014/10/31 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
Python中运行并行任务技巧
2015/02/26 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
python中执行shell的两种方法总结
2017/01/10 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
如何开发一个JQuery插件
2016/07/28 面试题
医院搬迁方案
2014/06/14 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
python基础之爬虫入门
2021/05/10 Python
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android