变速改变任意对象的任意属性大小的动画函数：
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
原文地址：https://www.cnblogs.com/zach0812/p/12302727.html
时间： 2024-11-09 06:13:50