变速改变任意对象的任意属性大小的动画函数：
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 }
canvas 中的文字渲染函数（实现换行 和 加粗）：
1 /** 2 * 渲染文字 3 * 4 * @param {Object} obj 5 */ 6 drawText: function (ctx, obj) { 7 console.log('渲染文字') 8 ctx.save(); 9 ctx.setFillStyle(obj.color); 10 ctx.setFontSize(obj.size); 11 ctx.setTextAlign(obj.align); 12 ctx.setTextBaseline(obj.baseline); 13 if (obj.bold) { 14 console.log('字体加粗') 15 ctx.fillText(obj.text, obj.x, obj.y - 0.5); 16 ctx.fillText(obj.text, obj.x - 0.5, obj.y); 17 } 18 ctx.fillText(obj.text, obj.x, obj.y); 19 if (obj.bold) { 20 ctx.fillText(obj.text, obj.x, obj.y + 0.5); 21 ctx.fillText(obj.text, obj.x + 0.5, obj.y); 22 } 23 ctx.restore(); 24 }, 25 /** 26 * 文本换行 27 * 28 * @param {Object} obj 29 */ 30 textWrap: function (ctx,obj) { 31 console.log('文本换行') 32 let tr = this.getTextLine(ctx,obj); 33 for (let i = 0; i < tr.length; i++) { 34 if (i < obj.line) { 35 let txt = { 36 x: obj.x, 37 y: obj.y + (i * obj.height), 38 color: obj.color, 39 size: obj.size, 40 align: obj.align, 41 baseline: obj.baseline, 42 text: tr[i], 43 bold: obj.bold 44 }; 45 if (i == obj.line - 1) { 46 txt.text = txt.text.substring(0, txt.text.length - 3) + '......'; 47 } 48 this.drawText(ctx,txt); 49 } 50 } 51 }, 52 getTextLine: function (ctx,obj) { 53 ctx.setFontSize(obj.size); 54 let arrText = obj.text.split(''); 55 let line = ''; 56 let arrTr = []; 57 for (let i = 0; i < arrText.length; i++) { 58 var testLine = line + arrText[i]; 59 var metrics = ctx.measureText(testLine); 60 var width = metrics.width; 61 if (width > obj.width && i > 0) { 62 arrTr.push(line); 63 line = arrText[i]; 64 } else { 65 line = testLine; 66 } 67 if (i == arrText.length - 1) { 68 arrTr.push(line); 69 } 70 } 71 return arrTr; 72 },