前言
有一個問題, 給定一個物體的運動軌跡, 包含時間和坐標的數組, 如何使用這個數據來預測物體未來的運動走勢??
本文提供了一個很簡單的方式去實現這個算法. 效果夠用, 又簡單, 有一定的準確程度.
緣由
以前做過的一些手機應用, 沒有做動畫的, 也沒做手勢. 這個做起來挺麻煩的.
最近開始了新的手機項目(微信項目模板) , 基於 Blazor server side , 其組件化的方式可以很方便地把各種常用的通用的東西封裝成 組件/控件
於是, 就打算讓這段時間辛苦一些, 一次過把動畫的部分補上, 讓以後的項目更加牛逼, 意思是讓客戶更加樂意地掏錢.
問題
手勢的一個問題是力度/速度判斷, 劃得快, 劃得慢, 先快後慢, 先慢後快, 都得有一個合適的算法來得到一個最後速度.
這個算法一定要滿足基本的需求後, 要盡量簡單, 要目測, 理論上沒有bug .
這個時候, 半衰期算法就派上用場了. (不知道有沒有半衰期算法這玩意, 應該說是使用半衰期的原理)
原理
這是一個很簡單的權重計算, 有很多個不同時間點的坐標, 每個相鄰時間的兩個數據, 有距離差, 有時間差
關鍵是解決先慢後快, 先快後慢的數據的處理問題, 那麼我們只需要
把新的數據, 乘以更大的權重, 把老的數據, 乘以更小的權重, 最後得到這個距離權重的合成值, 就OK了.
預覽效果:
注意, 因為gif的幀數不夠, 要更好效果還是複製代碼運行一遍.
測試代碼:
<! DOCTYPE html >
< html >
< head >
< meta charset ="utf-8" />
< title > Half Life </ title >
< style >
html, body, canvas { width : 100% ; height : 100% ; margin : 0 ; padding : 0 ; box-sizing : border-box ; overflow : hidden ; }
</ style >
</ head >
< body >
< canvas ></ canvas >
< script type ="text/javascript" >
var CONST_HALF_LIFE_SPAN = 50 ; //半衰期,設置得越小,就越看淡以前的速度
var CONST_MAX_SAMPLES = 15 ; //保留最後15個點的數據減少無意義的運算量,主要看瀏覽器觸發onmousemove的頻率來調整.
var pts = [];
document.onmousemove = function (e) {
//儲存數據
pts.push({ time: Date.now(), x: e.clientX, y: e.clientY });
if (pts.length > CONST_MAX_SAMPLES) pts.shift();
//計算
var xs = 0 , ys = 0 ; //走過的路的長度.
var previtem = pts[ 0 ];
for ( var index = 1 ; index < pts.length; index ++ ) {
var newitem = pts[index ];
var t = newitem.time - previtem.time;
//讓這個數據衰減一次,衰減程度由時間差決定.
var halflifefactor = Math.pow( 0.5 , t / CONST_HALF_LIFE_SPAN);
//注意,這裏沒有計算速度,而是直接用距離來預測將來要走過的距離.
//走過的距離每一次都要衰減,每一段的路程都多次乘以各時間差的factor,
//原理是, 0.5 ^ (t1 + t2 + t3...)等於0.5 ^ t1 * 0.5 ^ t2 * 0.5 ^ t3 * ...
xs = xs * halflifefactor + newitem.x - previtem.x;
ys = ys * halflifefactor + newitem.y - previtem.y;
previtem = newitem;
}
//畫圖
var CONST_EFFECT_FACTOR = 2 ; //乘以一個因素來畫圖用,這裏數值可以充當'摩擦係數'大小的效果.
xs = Math.floor(xs * CONST_EFFECT_FACTOR);
ys = Math.floor(ys * CONST_EFFECT_FACTOR);
var x0 = e.clientX, y0 = e.clientY;
var canvas = document.querySelector( " canvas " );
var ctx = canvas.getContext( " 2d " );
var w = canvas.width = canvas.offsetWidth;
var h = canvas.height = canvas.offsetHeight;
ctx.clearRect( 0 , 0 , w, h);
ctx.lineWidth = 5 ;
ctx.strokeStyle = " blue " ;
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(x0 + xs, y0 + ys);
ctx.closePath();
ctx.stroke();
console.log(xs, ys)
}
</ script >
</ body >
</ html >
簡單講解
可以看出, 代碼量非常少. 與其說這是一種”算法” , 不然說是一種”思路”
代碼先是記錄每一點的數據, 然後放進 pts 數組
在鼠標移動後, 使用pts 數組, 計算出每一點的x , y 的移動量, 讓每一段的移動量都使用 半衰期 的方式進行調整.
最後得出的xs , ys ,是理論上“最近移動的距離.”
使用這個數值,作為“參考值” ,就可以用於更多的判斷.
例如我最近做的一個簡單的 swipe 組件,
手指滑動了1/4個屏幕,然後再加上理論的參考值, 一共超過了1/2個屏幕,就切換到下一個panel
這個參考值很重要. 如果手指只是很慢地滑動, 那麼參考值就很小, 就不應該切換. 如果手指很快地滑動, 那麼就應該切換panel
可改良的方案
上面方案, 是計算’移動距離’ 的, 它有一個弊端, 無論劃得多快, 移動的總數是有上限的.
這段代碼完全可以 除以t , 得到一個 速度值,
這更加合理, 但是注意速度的合成方式不能普通地累加.
這就留給有興趣的網友自己嘗試了. 也不難. 畢竟本文傳播的是 半衰期 的思路. 不宜說太細.
擴展思路
其實這種算法, 一直都有人用. 很奇怪的就是, 沒有看到什麼人專門寫文章介紹?
半衰期除了計算運動軌跡, 還可以很好地去統計熱度.
例如一篇文章, 一個視頻, 有不同時段的點擊數量. 每一天都不一樣.
怎樣使用最少的儲存方式, 去儲存一個合理的熱度參考值?
可行的方法是,儲存兩個數值 (就夠了) :
articleRateValue 用於儲存熱度值
articleRateTime 用於儲存熱度時間
每一次點擊, 都使用這個公式儲存:
articleRateValue = newclickcount + articleRateValue * POW(0.5, (NOW – articleRateTime) / HALF_LIFE_SPAN )
articleRateTime = NOW
排序的時候麻煩點, 要實時的計算 articleRateValue * POW(0.5, (NOW – articleRateTime) / HALF_LIFE_SPAN ) 來得到每個文章的熱度值.
(對於排序的問題, 還有兩個變通的做法, 如果以後有時間寫一篇文章細說這個熱度方案, 再詳細解說)
(最簡單的變通方法是, 每晚找服務器空閑的時候, 把表裡的數值都重新計算一次, 平時排序的時候不計算)
注意這裡有一個 HALF_LIFE_SPAN 的概念. 如果 HALF_LIFE_SPAN 是一天, 那麼昨天的熱度就佔1/2 權重, 前天的就佔 1/4 權重, 大前天的佔1/8
這樣按天算也有個弊端, 我想按週, 按月算那怎麼辦?
再存兩組數值 :
weeklyRateValue
weeklyRateTime
monthlyRateValue
monthlyRateTime
如此類推.
這樣做的最大好處是, 無需詳細地紀錄每一次的點擊數據. 非常節省空間.
缺點是, 每一組數據, 只適合一個半衰期時段的數值, 要儲存多個參考值得準備多組數據.
最後
時間過得真快. 這段時間挖的坑太多, 在業餘時間內根本沒有時間填坑..
5月初的時候實現了BlazorCefApp , 到現在開了幾個有意義的坑, Blazor微信項目模板 算是一個.
但是由於沒有時間寫博客, 有時只是偶爾把測試的視頻放到B站: https://space.bilibili.com/540073960
有興趣用Blazor 來做微信項目或手機網頁項目的, 可以去了解一下. 當項目成熟後, 會發佈到github上.
—-
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益
※教你寫出一流的銷售文案?
※別再煩惱如何寫文案,掌握八大原則!
【其他文章推薦】
※回頭車貨運收費標準
※產品缺大量曝光嗎?你需要的是一流包裝設計!
※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面
※推薦評價好的iphone維修中心
※教你寫出一流的銷售文案?
※台中搬家公司教你幾個打包小技巧,輕鬆整理裝箱!
※台中搬家遵守搬運三大原則,讓您的家具不再被破壞!
