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

 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   }
变速动画函数

相关文章:

  • 2021-08-19
  • 2021-12-01
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-05-03
  • 2021-07-31
  • 2022-12-23
  • 2021-04-20
  • 2021-12-04
  • 2021-12-05
相关资源
相似解决方案