EA&UML日拱一卒-0基础学习微信小程序(16)-使用移动平均消除抖动
2018-01-24 19:36
671 查看
增加了表盘的图形显示以后,这个小程序看起来是那么回事了。但是还有一个小毛病,数字也好,表盘的旋转速度,都不是很均匀。今天就来解决这个问题。
简单移动平均法
移动平均的计算公式如下: Ft=(At-1+At-2+At-3+…+At-n)/n,式中
Ft--对下一期的预测值;
n--移动平均的时期个数;
At-1,At-2,At-3和At-n分别表示前两次、前三次直至前n期的实际值。
简单的说,就是保留最近n次的值,然后求这些值的平均值。这样一来个别数据的抖动就会被其他数据中和,从而减少数据的抖动。
logs.js
Page({
data: {
angle: '--',
directions:[0,
0, 0, 0, 0]
},
//指南针描画
drawCompass: function (direction)
{
//此处省略
},
//事件处理函数
onLoad: function ()
{
var that
= this;
wx.onCompassChange(function (res)
{
//在数组尾部添加新数据
that.data.directions.push(res.direction);
//从数组头部删除一个数据
that.data.directions.shift();
//数组元素求和
var total
= that.data.directions.reduce(function (prev,
v) { return prev
+ v })
//求平均值
var average
= total / that.data.directions.length
that.drawCompass(average);
//保留1位小数
var direction
= average.toFixed(1) + '°';
that.setData({ angle: direction })
});
},
})
主要的变化有两点:一个是在data中增加了一个名为directions的数组,并用5个0初始化;再有就是在 wx.onCompassChange中增加了计算移动平均的处理,详细可以参考注释。
参考资料
数组用法:
0基础学习微信小程序(11)-ECMAScript3数组操作方法
0基础学习微信小程序(12)-ECMAScript5数组操作方法
写在文章的最后
既然已经读到这里了,拜托大家再用一分钟时间,将文章转发到各位的朋友圈,微信群中。本公众号的成长需要您的支持!
以上就是今天的文章,欢迎点赞并推荐给您的朋友!
阅读更多更新文章,请扫描下面二维码,关注微信公众号【面向对象思考】
简单移动平均法
移动平均的计算公式如下: Ft=(At-1+At-2+At-3+…+At-n)/n,式中
Ft--对下一期的预测值;
n--移动平均的时期个数;
At-1,At-2,At-3和At-n分别表示前两次、前三次直至前n期的实际值。
简单的说,就是保留最近n次的值,然后求这些值的平均值。这样一来个别数据的抖动就会被其他数据中和,从而减少数据的抖动。
logs.js
Page({
data: {
angle: '--',
directions:[0,
0, 0, 0, 0]
},
//指南针描画
drawCompass: function (direction)
{
//此处省略
},
//事件处理函数
onLoad: function ()
{
var that
= this;
wx.onCompassChange(function (res)
{
//在数组尾部添加新数据
that.data.directions.push(res.direction);
//从数组头部删除一个数据
that.data.directions.shift();
//数组元素求和
var total
= that.data.directions.reduce(function (prev,
v) { return prev
+ v })
//求平均值
var average
= total / that.data.directions.length
that.drawCompass(average);
//保留1位小数
var direction
= average.toFixed(1) + '°';
that.setData({ angle: direction })
});
},
})
主要的变化有两点:一个是在data中增加了一个名为directions的数组,并用5个0初始化;再有就是在 wx.onCompassChange中增加了计算移动平均的处理,详细可以参考注释。
参考资料
数组用法:
0基础学习微信小程序(11)-ECMAScript3数组操作方法
0基础学习微信小程序(12)-ECMAScript5数组操作方法
写在文章的最后
既然已经读到这里了,拜托大家再用一分钟时间,将文章转发到各位的朋友圈,微信群中。本公众号的成长需要您的支持!
以上就是今天的文章,欢迎点赞并推荐给您的朋友!
阅读更多更新文章,请扫描下面二维码,关注微信公众号【面向对象思考】
相关文章推荐
- EA&UML日拱一卒-0基础学习微信小程序(13)-一个都不能少
- EA&UML日拱一卒-0基础学习微信小程序(5)- Hello world!
- EA&UML日拱一卒-0基础学习微信小程序(14)-最简单的指南针
- EA&UML日拱一卒-0基础学习微信小程序(4)- 安装开发工具
- EA&UML日拱一卒-0基础学习微信小程序(10)-注册页面
- EA&UML日拱一卒-0基础学习微信小程序(2)- 关于小程序
- EA&UML日拱一卒-0基础学习微信小程序(11)-ECMAScript3数组操作方法
- EA&UML日拱一卒-0基础学习微信小程序(7)-WXSS和CSS
- EA&UML日拱一卒-0基础学习微信小程序(1)- 开篇
- EA&UML日拱一卒-0基础学习微信小程序(15)-弄得像真的一样
- EA&UML日拱一卒-0基础学习微信小程序(6)- 配置文件的形式和内容
- EA&UML日拱一卒-0基础学习微信小程序(3)- 创建自己的小程序账号
- EA&UML日拱一卒-0基础学习微信小程序(12)-ECMAScript5数组操作方法
- EA&UML日拱一卒-0基础学习微信小程序(17)-学到什么程度算行?
- EA&UML日拱一卒-0基础学习微信小程序(9)-C++程序员眼中的app.js
- EA&UML日拱一卒-0基础学习微信小程序(8)-事件处理和数据绑定
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (13)-使用类优化程序结构
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (6)-播放音频
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (10)-定时器
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (9)-利用条件渲染实现列表控件