一、 背景前言和滑軌屏解密

第一次見(jiàn)到滑軌屏的演示視頻應(yīng)該在2018年的下半年，一個(gè)顯示屏在裝飾有黑白背景壁畫(huà)的墻上勻速前進(jìn)，宛如一片透明的玻璃跟蹤壁畫(huà)內(nèi)容顯示，也就是顯示屏實(shí)時(shí)所在位置所顯示的畫(huà)面內(nèi)容，就是顯示屏此刻對(duì)應(yīng)壁畫(huà)上的內(nèi)容，并且能將黑白背景壁畫(huà)添上色彩顯示。乍一看，還以為自己眼神不好！引人入勝，耐人尋味！當(dāng)時(shí)覺(jué)得有點(diǎn)意思、蠻有科技含量和趣味性！作為理工科的我，不自覺(jué)地會(huì)去想背后的原理是怎么樣的？是怎么去實(shí)現(xiàn)的呢？很快，就想明白了，不就是將這個(gè)靜態(tài)的黑白壁畫(huà)場(chǎng)景做成了兩個(gè)彩色視頻嘛（為什么是兩個(gè)？往返呀）。措辭有點(diǎn)狂傲，其實(shí)整個(gè)系統(tǒng)具體實(shí)施下來(lái)還是蠻復(fù)雜的，先別急著要打我的臉，暫且只是宏觀上敘述原理和要點(diǎn)。顯示屏勻速移動(dòng)速率 = 軌道長(zhǎng)度 / 視頻源播放時(shí)長(zhǎng)。

第二次見(jiàn)到滑軌屏的演示視頻，就更高級(jí)了，不僅能隨便非勻速手推動(dòng)態(tài)跟蹤顯示，還可以推到“任意”（為什么要加引號(hào)呢？現(xiàn)在想來(lái)，其實(shí)不是真正的任意位置，而是有位置標(biāo)記措施的）位置停下時(shí)，點(diǎn)擊進(jìn)去可查看更多內(nèi)容。當(dāng)時(shí)受第一次滑軌屏演示影響和一直站在掌握的信發(fā)系統(tǒng)的角度去看待這一問(wèn)題，百思不得其解。心想，Oh，My God！要實(shí)現(xiàn)這樣一種細(xì)膩連續(xù)的效果，得做多少個(gè)位置標(biāo)記和節(jié)目，以及多少各連續(xù)過(guò)度的切換視頻?。?/span>

第三次見(jiàn)到的是電動(dòng)滑軌屏演示視頻，與第二次見(jiàn)到的相當(dāng)，只不過(guò)在屏幕上增添了能設(shè)置滑軌屏前進(jìn)或后退的的虛擬按鈕?，F(xiàn)在想來(lái)，其實(shí)這套電控系統(tǒng)只要不考慮使用調(diào)速電機(jī)也沒(méi)什么，電機(jī)配合單片機(jī)和上位機(jī)軟件應(yīng)該也不難實(shí)現(xiàn)。

那么，大家最關(guān)心的問(wèn)題來(lái)了！對(duì)于上面第二次和第三次見(jiàn)到的滑軌屏演示視頻，背后原理是什么呢？ 踏破鐵鞋無(wú)覓處，得來(lái)全不費(fèi)工夫！眾里尋她千百度，伊人卻在燈火闌珊處！嘖嘖嘖，滿屏騷氣！此處，我似乎看到滿屏的口水泡沫星子。不賣(mài)關(guān)子了。在編寫(xiě)這個(gè)解密方案之前一直困惑著我的是，連續(xù)移動(dòng)過(guò)程中，顯示屏怎么輕易去實(shí)現(xiàn)動(dòng)態(tài)連續(xù)細(xì)膩的跟蹤顯示呢？其實(shí)So easy！連續(xù)移動(dòng)過(guò)程中，顯示屏動(dòng)態(tài)連續(xù)細(xì)膩的跟蹤顯示的，并非像第一次見(jiàn)到的滑軌屏演示視頻那樣，顯示屏移動(dòng)時(shí)，顯示內(nèi)容不是在播放過(guò)渡視頻或動(dòng)畫(huà)，而是在相對(duì)屏幕移動(dòng)一張背景底圖！這張底圖的比例和背景壁畫(huà)的比例一樣?，F(xiàn)在想來(lái)，或許第一次的原理也是在移動(dòng)一張背景底圖！What，你逗我呢？套路太深，我要回農(nóng)村！Next，Show time！

二、 原理分析介紹

滑軌屏，可用于政府機(jī)關(guān)黨建和革命歷程，人物傳記，企業(yè)發(fā)展歷程等場(chǎng)合宣傳展示。一般來(lái)說(shuō)，整套滑軌屏系統(tǒng)由掛架、上下支撐導(dǎo)軌、顯示屏、線性位移傳感器、位置標(biāo)記、電控電動(dòng)機(jī)構(gòu)和其他附屬設(shè)備構(gòu)成。接下來(lái)，就通過(guò)下圖來(lái)詳細(xì)地?cái)⑹鱿略怼?/span>

首先，需要設(shè)計(jì)一張比例與背景墻比例相同的圖片。上圖中背景底圖長(zhǎng)寬比是4:1，假設(shè)顯示屏的分辨率是1080 × 1920，那么這張需要設(shè)計(jì)的圖片的大小是7680 × 1920。當(dāng)以平鋪方式顯示時(shí)，那么這張圖片只有1080 × 1920個(gè)像素能被顯示出來(lái)，也就是圖片右邊好大一部分不會(huì)被顯示出來(lái)。如上圖，顯示屏在最左側(cè)的位置線框所框住的背景墻區(qū)域一樣。雖然，圖片右邊部分不會(huì)被顯示出來(lái)，但在內(nèi)存中的圖片數(shù)據(jù)是實(shí)實(shí)在在存在的。當(dāng)我們推動(dòng)顯示屏從左往右移時(shí)，而APP是以顯示屏為參照物，以周期性采集到的線性位置傳感器實(shí)時(shí)位置數(shù)據(jù)為圖片的始末依據(jù)，將圖片從右往左移，這樣顯示屏被移動(dòng)過(guò)程中，就猶如一片透明的玻璃。

三、 物料選用和具體實(shí)施

1) 掛架：

2) 上下支撐導(dǎo)軌：

3) 顯示屏：宜采用超窄邊觸摸顯示屏，整體視覺(jué)效果會(huì)更好。采用Android或Windows操作系統(tǒng)皆可，但Windows操作系統(tǒng)添加掛載外設(shè)時(shí)，安裝驅(qū)動(dòng)更方便。硬件配置方面，一般配置即可，不必太高。

4) 線性位移傳感器：選用性?xún)r(jià)比較高的電阻尺，周期性獲取滑軌屏位移數(shù)據(jù)，通過(guò)獲取單個(gè)周期內(nèi)始末位置數(shù)據(jù)，便可計(jì)算出移動(dòng)底圖的速率，從而達(dá)到實(shí)時(shí)動(dòng)態(tài)跟蹤顯示的目的。

5) 位置標(biāo)記：目前公司出過(guò)的產(chǎn)品都是采用RFID讀卡器和位置卡片ID方式來(lái)區(qū)分不同的位置標(biāo)記點(diǎn)。若配置有線性位移傳感器，那么可以去掉RFID識(shí)別標(biāo)記點(diǎn)方式?？芍苯佑葾PP預(yù)設(shè)位置標(biāo)記點(diǎn)位置區(qū)間，工程上，無(wú)需變更硬件，較RFID更靈活，更方便操作。

6) 電動(dòng)機(jī)構(gòu)：選用12V或24V貫通式直線電機(jī)作為電動(dòng)式滑軌屏左右移動(dòng)動(dòng)力驅(qū)動(dòng)。

7) 附屬裝置：尼龍護(hù)線拖鏈，左右側(cè)終點(diǎn)需安裝緩沖彈簧，電動(dòng)滑軌屏需安裝行程開(kāi)關(guān)，防止過(guò)行程導(dǎo)致設(shè)備損壞。

四、 軟件設(shè)計(jì)需求

滑軌屏顯示場(chǎng)景有以下幾種：

1) 滑動(dòng)過(guò)程中，APP周期性地或以串口中斷事件通過(guò)線性位置傳感器獲取滑軌屏始末位置參數(shù)，自動(dòng)計(jì)算底圖左移或右移速率移動(dòng)底圖，以實(shí)現(xiàn)細(xì)膩流暢實(shí)時(shí)動(dòng)態(tài)跟蹤壁畫(huà)顯示。

2) 當(dāng)滑軌屏進(jìn)入預(yù)設(shè)標(biāo)記點(diǎn)位置附近或區(qū)間內(nèi)時(shí)，例如，假設(shè)關(guān)鍵點(diǎn)的位置參數(shù)是100，考慮可操作性和更好的體驗(yàn)感，可預(yù)設(shè)標(biāo)記點(diǎn)位置區(qū)間為90～110，若滑軌屏進(jìn)入該區(qū)間，則激活該標(biāo)記點(diǎn)的觸摸互動(dòng)功能。用戶(hù)點(diǎn)擊屏幕后，便可進(jìn)入多級(jí)菜單互動(dòng)，了解該標(biāo)記點(diǎn)對(duì)應(yīng)的更多詳情。比如，顯示屏進(jìn)入上圖中“科技強(qiáng)國(guó)”標(biāo)記點(diǎn)區(qū)間內(nèi)，點(diǎn)擊后，用戶(hù)可以了解科技強(qiáng)國(guó)的更多信息。

3) 當(dāng)APP偵測(cè)滑軌屏位置坐標(biāo)數(shù)據(jù)在預(yù)設(shè)時(shí)長(zhǎng)后沒(méi)有變化，即靜止預(yù)設(shè)時(shí)長(zhǎng)后，則播放屏報(bào)畫(huà)面。

4) 由靜止?fàn)顟B(tài)變?yōu)橐苿?dòng)狀態(tài)時(shí)，若顯示屏進(jìn)入或已在標(biāo)記點(diǎn)區(qū)間內(nèi)，則跳轉(zhuǎn)到上述第2點(diǎn)順序執(zhí)行；否則，實(shí)時(shí)動(dòng)態(tài)跟蹤顯示壁畫(huà)內(nèi)容。

軟件設(shè)計(jì)總體上，盡可能實(shí)現(xiàn)通用性和開(kāi)放性，無(wú)需編譯打包和再次安裝，用戶(hù)素材應(yīng)可直接通過(guò)替換，達(dá)到變更的目的。具體要求如下：

1) 用戶(hù)模式和需要口令驗(yàn)證進(jìn)入的設(shè)計(jì)模式。

2) 無(wú)需編譯打包，通過(guò)替換目錄下的素材，實(shí)現(xiàn)內(nèi)容更新。

3) 開(kāi)放的位置關(guān)鍵點(diǎn)的點(diǎn)數(shù)和互動(dòng)菜單級(jí)數(shù)。

4) 所有互動(dòng)按鈕（如主頁(yè)、返回、上一頁(yè)、下一頁(yè)、放大、縮小、滑軌屏左移和右移），可通過(guò)替換目錄下按鈕圖標(biāo)，以滿足不同應(yīng)用場(chǎng)景的UI效果要求。在設(shè)計(jì)模式下，可通過(guò)拖拽（若具備參考線對(duì)齊功能更佳，方便多個(gè)按鈕拖拽排布參考對(duì)齊）或坐標(biāo)參數(shù)，自定義命令按鈕的位置。具有隱藏和顯示的屬性，以滿足不同應(yīng)用場(chǎng)景下的配置，例如，電動(dòng)滑軌屏需要在屏幕上放置左移和右移的控制按鈕，手動(dòng)滑軌屏則不需要這樣功能按鈕。

5) 素材翻頁(yè)時(shí)具有多種隨機(jī)動(dòng)畫(huà)效果。

6) 背景音樂(lè)和屏保功能，可開(kāi)啟和關(guān)閉。

7) 具備線性位移傳感器與滑軌對(duì)齊參數(shù)設(shè)定UI接口，方便實(shí)際安裝操作過(guò)程的工藝邊對(duì)齊。

五、 原理流程圖參考