09 微信小程序中 一些封装的函数

Posted 2020-11-25 Zcb0812

变速改变任意对象的任意属性大小的动画函数：

 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>

index.wxml

  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 })

index.js

1 view{
2   background-color: purple;
3 }

index.wxss