09 微信小程序中 一些封装的函数
Posted Zcb0812
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了09 微信小程序中 一些封装的函数相关的知识,希望对你有一定的参考价值。
变速改变任意对象的任意属性大小的动画函数:
1 //变速改变任意对象的任意属性大小的函数 2 animation_variableSpeed: function (ele, ele_tar, func_callback) { //ele 对象 attr 属性名字 targetPos 目标位置 func_callbk回调函数 3 var that = this; 4 var len = Object.getOwnPropertyNames(ele_tar).length; //它是获取ele_tar对象中 有多少个字段。 5 //清理定时器 6 clearInterval(ele.timeId); 7 ele.timeId = setInterval(function () { 8 for (var key in ele_tar) { 9 var attr = key; 10 var targetPos = ele_tar[key]; 11 12 if (attr == "opacity") { //透明度属性 13 //此时的 透明度的精度设计是 0.01 14 var curPos = parseInt( ele.opacity * 100); //透明度放大100倍方便计算(此时类型是数字类型) 15 var targetPos = parseInt(ele_tar[attr] * 100); //目标透明度也放大100倍 16 17 var step = (targetPos - curPos) / 10; 18 step = step > 0 ? Math.ceil(step) : Math.floor(step); 19 curPos += step; 20 21 ele[attr] = curPos / 100; //最后赋值的时候也要缩小100倍 22 console.log("cur: " + curPos + " tar:" + targetPos + " step:" + step + " "); 23 24 } else if (attr == "zIndex") { //层次的属性 25 ele[attr] = ele_tar[attr]; 26 27 } else { //普通的属性 28 //获取当前的位置 29 var curPos = parseInt(ele[attr]); 30 //每次移动的步数 31 var step = (targetPos - curPos) / 10; 32 step = targetPos > curPos ? Math.ceil(step) : Math.floor(step); //正数向上取整 负数向下取整 33 curPos += step; 34 ele[attr] = curPos; 35 console.log("cur: " + curPos + " tar:" + targetPos + " step:" + step + " "); 36 } 37 38 39 var flag = true; // 清理定时器 40 for (var key in ele_tar) { 41 var attr = key; 42 if( ele[attr] != ele_tar[attr] ){ 43 flag = false; 44 } 45 } 46 if(flag){ 47 console.log("清理定时器") 48 clearInterval(ele.timeId); 49 //所有的属性都更改完毕之后再调用回调函数! 50 if (func_callback) { //有 callbk 才可以调用 51 func_callback(); 52 } 53 } 54 } 55 that.setData({ele:ele}); 56 }, 15); 57 }
1 <view style="width:{{ele.w}}px;height:{{ele.h}}px;opacity:{{ele.opacity}};z-index:{{ele.zIndex}}"></view>
1 // pages/zcb/zcb.js 2 Page({ 3 4 /** 5 * 页面的初始数据 6 */ 7 data: { 8 9 }, 10 11 /** 12 * 生命周期函数--监听页面加载 13 */ 14 onLoad: function (options) { 15 var that = this; 16 var ele = { 17 w:300, 18 h:0, 19 opacity:1, 20 zIndex:1, 21 } 22 this.setData({ele:ele}); 23 24 // 需要改变的值 25 var ele_tar = { 26 w: 300, 27 h: 300, 28 opacity: 0.5, 29 zIndex: 1, 30 } 31 var ele_tar2 = { 32 w:0, 33 h:300, 34 opacity:1, 35 zIndex:1 36 } 37 this.animation_variableSpeed(ele,ele_tar,function(){ 38 that.animation_variableSpeed(ele,ele_tar2) 39 }); 40 41 }, 42 //变速改变任意对象的任意属性大小的函数 43 animation_variableSpeed: function (ele, ele_tar, func_callback) { //ele 对象 attr 属性名字 targetPos 目标位置 func_callbk回调函数 44 var that = this; 45 var len = Object.getOwnPropertyNames(ele_tar).length; //它是获取ele_tar对象中 有多少个字段。 46 //清理定时器 47 clearInterval(ele.timeId); 48 ele.timeId = setInterval(function () { 49 for (var key in ele_tar) { 50 var attr = key; 51 var targetPos = ele_tar[key]; 52 53 if (attr == "opacity") { //透明度属性 54 //此时的 透明度的精度设计是 0.01 55 var curPos = parseInt( ele.opacity * 100); //透明度放大100倍方便计算(此时类型是数字类型) 56 var targetPos = parseInt(ele_tar[attr] * 100); //目标透明度也放大100倍 57 58 var step = (targetPos - curPos) / 10; 59 step = step > 0 ? Math.ceil(step) : Math.floor(step); 60 curPos += step; 61 62 ele[attr] = curPos / 100; //最后赋值的时候也要缩小100倍 63 console.log("cur: " + curPos + " tar:" + targetPos + " step:" + step + " "); 64 65 } else if (attr == "zIndex") { //层次的属性 66 ele[attr] = ele_tar[attr]; 67 68 } else { //普通的属性 69 //获取当前的位置 70 var curPos = parseInt(ele[attr]); 71 //每次移动的步数 72 var step = (targetPos - curPos) / 10; 73 step = targetPos > curPos ? Math.ceil(step) : Math.floor(step); //正数向上取整 负数向下取整 74 curPos += step; 75 ele[attr] = curPos; 76 console.log("cur: " + curPos + " tar:" + targetPos + " step:" + step + " "); 77 } 78 79 80 var flag = true; // 清理定时器 81 for (var key in ele_tar) { 82 var attr = key; 83 if( ele[attr] != ele_tar[attr] ){ 84 flag = false; 85 } 86 } 87 if(flag){ 88 console.log("清理定时器") 89 clearInterval(ele.timeId); 90 //所有的属性都更改完毕之后再调用回调函数! 91 if (func_callback) { //有 callbk 才可以调用 92 func_callback(); 93 } 94 } 95 } 96 that.setData({ele:ele}); 97 }, 15); 98 } 99 100 101 })
1 view{ 2 background-color: purple; 3 }
以上是关于09 微信小程序中 一些封装的函数的主要内容,如果未能解决你的问题,请参考以下文章