本發(fā)明實(shí)施例涉及數(shù)據(jù)處理技術(shù)領(lǐng)域，具體涉及一種動(dòng)畫效果實(shí)現(xiàn)方法及裝置。

背景技術(shù)：

目前，ios(蘋果公司的移動(dòng)操作系統(tǒng))端、android(谷歌公司開發(fā)的移動(dòng)操作系統(tǒng))端都可以實(shí)現(xiàn)動(dòng)畫效果，而超文本標(biāo)記語言5(Hyper Text Markup Language5，H5)端還無法實(shí)現(xiàn)動(dòng)畫效果，主要原因在于：ios端、android端都提供了地圖原生的能力，直接依賴相關(guān)應(yīng)用程序編程接口(Application Programming Interface，API)就可以實(shí)現(xiàn)動(dòng)畫效果，而H5端沒有提供這類接口，因而H5端無法依賴相關(guān)接口實(shí)現(xiàn)動(dòng)畫效果。

技術(shù)實(shí)現(xiàn)要素：

有鑒于此，本發(fā)明實(shí)施例提供了一種動(dòng)畫效果實(shí)現(xiàn)方法及裝置，能夠不依賴相關(guān)接口實(shí)現(xiàn)動(dòng)畫效果。

本發(fā)明實(shí)施例提供的動(dòng)畫效果實(shí)現(xiàn)方法，包括：

根據(jù)根數(shù)據(jù)源繪制可縮放矢量圖形SVG線路；

依次獲取所述SVG線路的起點(diǎn)、各個(gè)拐點(diǎn)以及終點(diǎn)處的平面坐標(biāo)以構(gòu)成平面點(diǎn)集；

為自定義對(duì)象添加過渡屬性，并設(shè)置過渡時(shí)間，以使得所述自定義對(duì)象根據(jù)所述平面點(diǎn)集，在所述SVG線路的相鄰點(diǎn)之間按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)，以形成動(dòng)畫效果。

本發(fā)明實(shí)施例提供的動(dòng)畫效果實(shí)現(xiàn)裝置，包括：

繪制單元，用于根據(jù)根數(shù)據(jù)源繪制可縮放矢量圖形SVG線路；

點(diǎn)集形成單元，用于依次獲取所述SVG線路的起點(diǎn)、各個(gè)拐點(diǎn)以及終點(diǎn)處的平面坐標(biāo)以構(gòu)成平面點(diǎn)集；

動(dòng)畫實(shí)現(xiàn)單元，用于為自定義對(duì)象添加過渡屬性，并設(shè)置過渡時(shí)間，以使得所述自定義對(duì)象根據(jù)所述平面點(diǎn)集，在所述SVG線路的相鄰點(diǎn)之間按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)，以形成動(dòng)畫效果。

本發(fā)明實(shí)施例，可以不依賴相關(guān)接口實(shí)現(xiàn)動(dòng)畫效果，而依賴根數(shù)據(jù)源實(shí)現(xiàn)動(dòng)畫效果，即直接根據(jù)根數(shù)據(jù)源實(shí)時(shí)繪制SVG線路，取所繪制的SVG線路的起點(diǎn)、拐點(diǎn)及終點(diǎn)的平面坐標(biāo)構(gòu)成平面點(diǎn)集，通過為自定義對(duì)象添加過渡屬性并設(shè)置過渡時(shí)間，使得自定義對(duì)象根據(jù)所述平面點(diǎn)集，在所述SVG線路的相鄰點(diǎn)之間按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)，以形成動(dòng)畫效果，本發(fā)明實(shí)施例的方法能夠在H5端實(shí)現(xiàn)動(dòng)畫效果。

附圖說明

為了更清楚地說明本發(fā)明實(shí)施例中的技術(shù)方案，下面將對(duì)實(shí)施例描述中所需要使用的附圖作簡(jiǎn)單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的一些實(shí)施例，對(duì)于本領(lǐng)域技術(shù)人員來講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)這些附圖獲得其他的附圖。

圖1是本發(fā)明實(shí)施例所提供的動(dòng)畫效果實(shí)現(xiàn)方法的一個(gè)場(chǎng)景示意圖；

圖2是本發(fā)明實(shí)施例所提供的動(dòng)畫效果實(shí)現(xiàn)方法的一個(gè)流程示意圖；

圖3是本發(fā)明實(shí)施例所提供的動(dòng)畫效果實(shí)現(xiàn)方法的另一流程示意圖；

圖4是本發(fā)明實(shí)施例所提供的動(dòng)畫效果實(shí)現(xiàn)裝置的一個(gè)結(jié)構(gòu)示意圖；

圖5是本發(fā)明實(shí)施例所提供的動(dòng)畫效果實(shí)現(xiàn)裝置的另一結(jié)構(gòu)示意圖。

具體實(shí)施方式

下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對(duì)本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域技術(shù)人員在沒有作出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。

由于H5端缺乏實(shí)現(xiàn)動(dòng)畫效果的相關(guān)接口，因而現(xiàn)有技術(shù)還無法在H5端實(shí)現(xiàn)動(dòng)畫效果，故本發(fā)明實(shí)施例提供了一種動(dòng)畫效果實(shí)現(xiàn)方法及裝置，能夠不依賴相關(guān)接口實(shí)現(xiàn)動(dòng)畫效果，為在H5端實(shí)現(xiàn)動(dòng)畫效果提供了有效的解決方案。本發(fā)明實(shí)施例提供的動(dòng)畫效果實(shí)現(xiàn)方法可實(shí)現(xiàn)在動(dòng)畫效果實(shí)現(xiàn)裝置中，動(dòng)畫效果實(shí)現(xiàn)裝置可以為手機(jī)、平板電腦等終端設(shè)備。本發(fā)明實(shí)施例動(dòng)畫效果實(shí)現(xiàn)方法一個(gè)具體實(shí)施場(chǎng)景可如圖1所示，首先根據(jù)根數(shù)據(jù)源繪制可縮放矢量圖形(Scalable Vector Graphics，SVG)線路，然后依次獲取所述SVG線路的起點(diǎn)、各個(gè)拐點(diǎn)及終點(diǎn)(例如圖1中的A、B、C、D點(diǎn))處的平面坐標(biāo)(即平面直角坐標(biāo)，點(diǎn)用x、y表示)以構(gòu)成平面點(diǎn)集；為自定義對(duì)象添加過渡(transition)屬性，并設(shè)置過渡時(shí)間，以使得所述自定義對(duì)象根據(jù)所述平面點(diǎn)集，在所述SVG線路的相鄰點(diǎn)(例如AB，BC，CD)之間按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)，以形成動(dòng)畫效果。本發(fā)明實(shí)施例的方法，直接根據(jù)根數(shù)據(jù)源生成SVG線路，在為自定義對(duì)象添加過渡屬性之后并設(shè)置過渡時(shí)間之后，自定義對(duì)象直接根據(jù)平面點(diǎn)集，在SVG線路的相鄰點(diǎn)之間按照所述過渡時(shí)間進(jìn)行切換運(yùn)動(dòng)，從而實(shí)現(xiàn)了動(dòng)畫效果。

以下分別進(jìn)行詳細(xì)說明，需說明的是，以下實(shí)施例的序號(hào)不作為對(duì)實(shí)施例優(yōu)選順序的限定。

實(shí)施例一

如圖2所示，本實(shí)施例的方法包括以下步驟：

步驟201、根據(jù)根數(shù)據(jù)源繪制SVG線路；

SVG是基于可擴(kuò)展標(biāo)記語言(Extensible Markup Language，XML)，用于描述二維矢量圖形的一種圖形格式，它由萬維網(wǎng)聯(lián)盟制定，是一個(gè)開放標(biāo)準(zhǔn)。SVG嚴(yán)格遵從XML語法，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式，而矢量圖形用點(diǎn)和線來描述物體，所以文件會(huì)比較小，同時(shí)也能提供高清晰的畫面，適合于直接打印或輸出，因而本實(shí)施例將根據(jù)根數(shù)據(jù)源繪制出SVG線路。具體的繪制方法可如下：

(1)根據(jù)根數(shù)據(jù)源規(guī)劃自定義線路；

即直接根據(jù)根數(shù)據(jù)源提供的數(shù)據(jù)規(guī)劃一條動(dòng)畫線路。

(2)獲取所述自定義線路的起點(diǎn)、各個(gè)拐點(diǎn)及終點(diǎn)處的地理坐標(biāo)以構(gòu)成地理點(diǎn)集；

地理坐標(biāo)，即用經(jīng)度、緯度表示地面點(diǎn)位置的球面坐標(biāo)，地理點(diǎn)集中包括所述自定義線路的起點(diǎn)、各個(gè)拐點(diǎn)及終點(diǎn)處的地理坐標(biāo)。

(3)根據(jù)所述地理點(diǎn)集在地圖上繪制所述SVG線路。

具體實(shí)現(xiàn)中，地圖可以提供折線(Polyline)函數(shù)，而Polyline函數(shù)用于繪制一條由一系列指定的點(diǎn)連接而成的折線，其函數(shù)聲明如下：

BOOL Polyline(LPPOINT IpPoints，int nCount)；

其中，參數(shù)IpPoints指向POINT結(jié)構(gòu)或者CPoint集合，CPoint集合中按順序存放了折線連接點(diǎn)的坐標(biāo)，而nCount是連接點(diǎn)的個(gè)數(shù)，該參數(shù)必須要大于1，如果畫線成功，則函數(shù)返回TRUE，否則返回FALSE。

具體在本實(shí)施例中，可以采用地圖提供的Polyline函數(shù)根據(jù)所述地理點(diǎn)集，在地圖上繪制出SVG線路。SVG線路是根據(jù)根數(shù)據(jù)源在地圖上最終畫出來呈現(xiàn)的地圖線路，自定義線路在地圖上的表現(xiàn)就是SVG線路。

步驟202、依次獲取所述SVG線路的起點(diǎn)、各個(gè)拐點(diǎn)以及終點(diǎn)處的平面坐標(biāo)以構(gòu)成平面點(diǎn)集；

具體地，可以將上述地理點(diǎn)集中包括的各個(gè)地理坐標(biāo)依次換算成平面坐標(biāo)以構(gòu)成所述平面點(diǎn)集。平面坐標(biāo)也稱平面直角坐標(biāo)，其用(x，y)值表示一個(gè)點(diǎn)。具體在本實(shí)施例中，即將經(jīng)緯度轉(zhuǎn)換成x、y值，其實(shí)際原理是將經(jīng)緯度按一定的投影方式投影為平面直角坐標(biāo)系中的平面直角坐標(biāo)x、y，具體可以采用相關(guān)的轉(zhuǎn)換工具自動(dòng)轉(zhuǎn)換，也可以采用相關(guān)的算法自行計(jì)算轉(zhuǎn)換，此處不做具體限定。

步驟203、為自定義對(duì)象添加過渡屬性，并設(shè)置過渡時(shí)間，以使得所述自定義對(duì)象根據(jù)所述平面點(diǎn)集，在所述SVG線路的相鄰點(diǎn)之間按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)，以形成動(dòng)畫效果。

自定義對(duì)象可以指SVG線路上運(yùn)動(dòng)對(duì)象的顯示標(biāo)志，例如可以為箭頭或其他具有方向的指示圖標(biāo)等，此處不做具體限定。

在執(zhí)行本步驟之前，可以設(shè)置所述自定義對(duì)象繼承地圖原生對(duì)象的坐標(biāo)切換顯示功能，以使得所述自定義對(duì)象能夠在不同的平面坐標(biāo)處切換顯示。接下來根據(jù)所述平面點(diǎn)集，將所述自定義對(duì)象設(shè)置在所述SVG線路的起點(diǎn)處顯示(即將自定義對(duì)象放置在SVG線路的起點(diǎn)坐標(biāo)處)，并將與所述起點(diǎn)相鄰的拐點(diǎn)(即第一個(gè)拐點(diǎn))設(shè)置為過渡終點(diǎn)，然后為自定義對(duì)象添加過渡屬性，并設(shè)置過渡時(shí)間。

過渡屬性，是一種可以實(shí)現(xiàn)動(dòng)畫交互效果的屬性，該屬性是一個(gè)復(fù)合屬性，包括：執(zhí)行變換的屬性：transition-property；變換延續(xù)的時(shí)間：transition-duration；在延續(xù)時(shí)間段，變換的速率變化：transition-timing-function；變換延遲時(shí)間：transition-delay這四個(gè)子屬性，通過這四個(gè)子屬性的配合來完成一個(gè)完整的過渡效果。下面分別介紹這四個(gè)子屬性：

transition-property是用來指定當(dāng)元素其中一個(gè)屬性改變時(shí)執(zhí)行過渡效果，其主要有以下幾個(gè)值：none(沒有屬性改變)，all(所有屬性改變)，indent(元素屬名稱)。當(dāng)其值為none時(shí)，過渡馬上停止執(zhí)行，當(dāng)指定為all時(shí)，則元素產(chǎn)生任何屬性值變化時(shí)都將執(zhí)行過渡效果，ident可以指定元素的某一個(gè)屬性值。

transition-duration是用來指定元素轉(zhuǎn)換過程的持續(xù)時(shí)間，取值：<time>為數(shù)值，單位為s(秒)或者ms(毫秒)，可以作用于所有元素。

transition-timing-function的值允許根據(jù)時(shí)間的推進(jìn)去改變屬性值的變換速率，transition-timing-function有6個(gè)可能值：ease：(逐漸變慢)，也是默認(rèn)值；linear：(勻速)；ease-in：(加速)；ease-out：(減速)；ease-in-out：(加速然后減速)；cubic-bezier：(該值允許自定義一個(gè)時(shí)間曲線)。

transition-delay是用來指定一個(gè)動(dòng)畫開始執(zhí)行的時(shí)間，也就是說當(dāng)改變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)間開始執(zhí)行過渡效果，其取值：<time>為數(shù)值，單位為s(秒)或者ms(毫秒)，其使用和transition-duration極其相似，也可以作用于所有元素。

過渡屬性的這四個(gè)子屬性，只有<transition-duration>是必需值且不能為0。其中，<transition-duration>和<transition-delay>都是時(shí)間。當(dāng)兩個(gè)時(shí)間同時(shí)出現(xiàn)時(shí)，第一個(gè)是<transition-duration>，第二個(gè)是<transition-delay>；當(dāng)只有一個(gè)時(shí)間時(shí)，它是<transition-duration>，而<transition-delay>為默認(rèn)值0。具體在本實(shí)施例中，所設(shè)置的過渡時(shí)間即transition-duration。

在為自定義對(duì)象添加過渡屬性，并設(shè)置過渡時(shí)間之后，自定義對(duì)象將在所述SVG線路的起點(diǎn)與第一個(gè)拐點(diǎn)之間，按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)。

此后，可以每隔上述過渡時(shí)間，根據(jù)所述平面點(diǎn)集重新設(shè)置一次過渡終點(diǎn)，直至將所述SVG線路的終點(diǎn)設(shè)置為所述過渡終點(diǎn)。例如圖1所示的場(chǎng)景中，第一次可以將B點(diǎn)設(shè)置為過渡終點(diǎn)，第二次可以將C點(diǎn)設(shè)置為過渡終點(diǎn)，最后一次將D點(diǎn)設(shè)置為過渡終點(diǎn)，則自定義對(duì)象將按照過渡時(shí)間，沿著A點(diǎn)運(yùn)動(dòng)到D點(diǎn)(即在第一個(gè)過渡時(shí)間T內(nèi)從A點(diǎn)運(yùn)動(dòng)到B點(diǎn)，接著在第二個(gè)過渡時(shí)間T內(nèi)從B點(diǎn)運(yùn)動(dòng)到C點(diǎn)，在第三個(gè)過渡時(shí)間T內(nèi)從C點(diǎn)運(yùn)動(dòng)到D點(diǎn))，從而形成動(dòng)畫效果。

需要說明的是，本實(shí)施例所提到的所述SVG線路的相鄰點(diǎn)，并非SVG線路上任意兩個(gè)相鄰的點(diǎn)，該相鄰點(diǎn)指的是根據(jù)所述平面點(diǎn)集得到的相鄰點(diǎn)，該相鄰點(diǎn)的類型包括起點(diǎn)與拐點(diǎn)，拐點(diǎn)與拐點(diǎn)，拐點(diǎn)與終點(diǎn)。即本實(shí)施例的自定義對(duì)象，是根據(jù)根數(shù)據(jù)源的數(shù)據(jù)(指定地理坐標(biāo)點(diǎn)轉(zhuǎn)換得到的平面坐標(biāo)點(diǎn))，在指定點(diǎn)之間進(jìn)行切換運(yùn)動(dòng)實(shí)現(xiàn)動(dòng)畫效果的，而非直接沿著SVG線路上的所有點(diǎn)直接運(yùn)動(dòng)實(shí)現(xiàn)動(dòng)畫效果的。

本實(shí)施例，可以不依賴相關(guān)接口實(shí)現(xiàn)動(dòng)畫效果，而依賴根數(shù)據(jù)源實(shí)現(xiàn)動(dòng)畫效果，即直接根據(jù)根數(shù)據(jù)源實(shí)時(shí)繪制SVG線路，取所繪制的SVG線路的起點(diǎn)、拐點(diǎn)及終點(diǎn)的平面坐標(biāo)構(gòu)成平面點(diǎn)集，通過為自定義對(duì)象添加過渡屬性并設(shè)置過渡時(shí)間，使得自定義對(duì)象根據(jù)所述平面點(diǎn)集，在所述SVG線路的相鄰點(diǎn)之間按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)，以形成動(dòng)畫效果，本發(fā)明實(shí)施例的方法能夠在H5端實(shí)現(xiàn)動(dòng)畫效果，且能夠使得自定義對(duì)象沿著自定義線路運(yùn)動(dòng)。

實(shí)施例二

實(shí)施例一所描述的方法，本實(shí)施例將舉例作進(jìn)一步詳細(xì)說明，如圖3所示，本實(shí)施例的方法包括：

步驟301、根據(jù)根數(shù)據(jù)源規(guī)劃自定義線路；

即直接根據(jù)根數(shù)據(jù)源提供的數(shù)據(jù)規(guī)劃一條動(dòng)畫線路。

步驟302、獲取所述自定義線路的起點(diǎn)、各個(gè)拐點(diǎn)及終點(diǎn)處的地理坐標(biāo)以構(gòu)成地理點(diǎn)集；

地理坐標(biāo)，即用經(jīng)度、緯度表示地面點(diǎn)位置的球面坐標(biāo)，地理點(diǎn)集中包括所述自定義線路的起點(diǎn)、各個(gè)拐點(diǎn)及終點(diǎn)處的地理坐標(biāo)。

步驟303、根據(jù)所述地理點(diǎn)集在地圖上繪制SVG線路；

具體實(shí)現(xiàn)中，地圖可以提供折線(Polyline)函數(shù)，而Polyline函數(shù)用于繪制一條由一系列指定的點(diǎn)連接而成的折線，其函數(shù)聲明如下：

BOOL Polyline(LPPOINT IpPoints，int nCount)；

其中，參數(shù)IpPoints指向POINT結(jié)構(gòu)或者CPoint集合，該集合按順序存放折線連接點(diǎn)的坐標(biāo)，而nCount是連接點(diǎn)的個(gè)數(shù)，該參數(shù)必須要大于1，如果畫線成功，則函數(shù)返回TRUE，否則返回FALSE。

具體在本實(shí)施例中，可以采用地圖提供的Polyline函數(shù)根據(jù)所述地理點(diǎn)集，在地圖上繪制出SVG線路。SVG線路是根據(jù)根數(shù)據(jù)源在地圖上最終畫出來呈現(xiàn)的地圖線路，自定義線路在地圖上的表現(xiàn)就是SVG線路。

步驟304、將所述地理點(diǎn)集中包括的各個(gè)地理坐標(biāo)依次換算成平面坐標(biāo)以構(gòu)成平面點(diǎn)集；

具體地，可以將上述地理點(diǎn)集中包括的各個(gè)地理坐標(biāo)依次換算成平面坐標(biāo)以構(gòu)成所述平面點(diǎn)集。平面坐標(biāo)也稱平面直角坐標(biāo)，其用(x，y)值表示一個(gè)點(diǎn)。具體在本實(shí)施例中，即將經(jīng)緯度轉(zhuǎn)換成x、y值，其實(shí)際原理是將經(jīng)緯度按一定的投影方式投影為平面直角坐標(biāo)系中的平面直角坐標(biāo)x、y，具體可以采用相關(guān)的轉(zhuǎn)換工具自動(dòng)轉(zhuǎn)換，也可以采用相關(guān)的算法自行計(jì)算轉(zhuǎn)換，此處不做具體限定。

步驟305、設(shè)置自定義對(duì)象繼承地圖原生對(duì)象的坐標(biāo)切換顯示功能，以使得所述自定義對(duì)象能夠在不同的平面坐標(biāo)處切換顯示；

自定義對(duì)象可以為SVG線路上運(yùn)動(dòng)對(duì)象的顯示標(biāo)志，例如可以為箭頭或其他具有方向的指示圖標(biāo)等，此處不做具體限定。

步驟306、根據(jù)所述平面點(diǎn)集，將所述自定義對(duì)象設(shè)置在所述SVG線路的起點(diǎn)處顯示，并將與所述起點(diǎn)相鄰的拐點(diǎn)設(shè)置為過渡終點(diǎn)；

即將自定義對(duì)象放置在所述SVG線路的起點(diǎn)坐標(biāo)處，并將所述SVG線路的第一個(gè)拐點(diǎn)設(shè)置為過渡終點(diǎn)。

上述將地理坐標(biāo)轉(zhuǎn)換成平面坐標(biāo)并將自定義對(duì)象設(shè)置在指定位置的主要實(shí)現(xiàn)代碼可如下：

myOverlay.prototype.anima＝function(pnt){

var pixel＝this.getProjection().fromLatLngToDivPixel(pnt)；//地理坐標(biāo)轉(zhuǎn)換成平面坐標(biāo)

this.dom.style.left＝pixel.getX()+’px’；//將自定義對(duì)象放置在指定位置

this.dom.style.top＝pixel.getY()+’px’；

}

步驟307、為自定義對(duì)象添加過渡屬性，并設(shè)置過渡時(shí)間，以使得所述自定義對(duì)象在所述SVG線路的相鄰點(diǎn)之間按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)，以形成動(dòng)畫效果；

過渡屬性，是一種可以實(shí)現(xiàn)動(dòng)畫交互效果的屬性，該屬性是一個(gè)復(fù)合屬性，包括：執(zhí)行變換的屬性：transition-property；變換延續(xù)的時(shí)間：transition-duration；在延續(xù)時(shí)間段，變換的速率變化：transition-timing-function；變換延遲時(shí)間：transition-delay這四個(gè)子屬性，通過這四個(gè)子屬性的配合來完成一個(gè)完整的過渡效果。

過渡屬性的這四個(gè)子屬性，只有<transition-duration>是必需值且不能為0。其中，<transition-duration>和<transition-delay>都是時(shí)間。當(dāng)兩個(gè)時(shí)間同時(shí)出現(xiàn)時(shí)，第一個(gè)是<transition-duration>，第二個(gè)是<transition-delay>；當(dāng)只有一個(gè)時(shí)間時(shí)，它是<transition-duration>，而<transition-delay>為默認(rèn)值0。具體在本實(shí)施例中，所設(shè)置的過渡時(shí)間即transition-duration。

在為自定義對(duì)象添加過渡屬性，并設(shè)置過渡時(shí)間之后，自定義對(duì)象將在所述SVG線路的起點(diǎn)與第一個(gè)拐點(diǎn)之間，按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)。

需要說明的是，本實(shí)施例所提到的所述SVG線路的相鄰點(diǎn)，并非SVG線路上任意兩個(gè)相鄰的點(diǎn)，該相鄰點(diǎn)指的是根據(jù)所述平面點(diǎn)集得到的相鄰點(diǎn)，該相鄰點(diǎn)的類型包括起點(diǎn)與拐點(diǎn)，拐點(diǎn)與拐點(diǎn)，拐點(diǎn)與終點(diǎn)。即本實(shí)施例的自定義對(duì)象，是根據(jù)根數(shù)據(jù)源的數(shù)據(jù)(指定地理坐標(biāo)點(diǎn)轉(zhuǎn)換得到的平面坐標(biāo)點(diǎn))，在指定點(diǎn)之間進(jìn)行切換運(yùn)動(dòng)實(shí)現(xiàn)動(dòng)畫效果的，而非直接沿著SVG線路上的所有點(diǎn)直接運(yùn)動(dòng)實(shí)現(xiàn)動(dòng)畫效果的。

步驟308、每隔所述過渡時(shí)間，根據(jù)所述平面點(diǎn)集重新設(shè)置所述過渡終點(diǎn)，直至將所述SVG線路的終點(diǎn)設(shè)置為所述過渡終點(diǎn)。

所述過渡終點(diǎn)包括所述SVG線路上的拐點(diǎn)和終點(diǎn)，即根據(jù)所述平面點(diǎn)集，依次將所述SVG線路的其他拐點(diǎn)和終點(diǎn)設(shè)置為所述過渡終點(diǎn)，該遞歸過程的主要階段實(shí)現(xiàn)代碼可如下：

var tag＝0；

function go(s,cb){//記錄過渡時(shí)間

var time＝0；

for(var j＝0；j<s；j++){//根據(jù)傳入的點(diǎn)集開始遞歸

～function(z,s){

var aa＝z；

var t＝s；

setTimeout(function)。

本實(shí)施例，可以不依賴相關(guān)接口實(shí)現(xiàn)動(dòng)畫效果，而依賴根數(shù)據(jù)源實(shí)現(xiàn)動(dòng)畫效果，即直接根據(jù)根數(shù)據(jù)源實(shí)時(shí)繪制SVG線路，取所繪制的SVG線路的起點(diǎn)、拐點(diǎn)及終點(diǎn)的平面坐標(biāo)構(gòu)成平面點(diǎn)集，通過為自定義對(duì)象添加過渡屬性并設(shè)置過渡時(shí)間，使得自定義對(duì)象根據(jù)所述平面點(diǎn)集，在所述SVG線路的相鄰點(diǎn)之間按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)，以形成動(dòng)畫效果，本實(shí)施例的方法能夠在H5端實(shí)現(xiàn)動(dòng)畫效果，且能夠使得自定義對(duì)象沿著自定義線路運(yùn)動(dòng)。

實(shí)施例三

為了更好地實(shí)施以上方法，本發(fā)明實(shí)施例還提供一種動(dòng)畫效果實(shí)現(xiàn)裝置，如圖4所示，本實(shí)施例的裝置包括：繪制單元401，點(diǎn)集形成單元402及動(dòng)畫實(shí)現(xiàn)單元403，如下：

(1)繪制單元401；

繪制單元401，用于根據(jù)根數(shù)據(jù)源繪制SVG線路。

SVG是基于可擴(kuò)展標(biāo)記語言(Extensible Markup Language，XML)，用于描述二維矢量圖形的一種圖形格式，它由萬維網(wǎng)聯(lián)盟制定，是一個(gè)開放標(biāo)準(zhǔn)。SVG嚴(yán)格遵從XML語法，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式，而矢量圖形用點(diǎn)和線來描述物體，所以文件會(huì)比較小，同時(shí)也能提供高清晰的畫面，適合于直接打印或輸出，因而本實(shí)施例繪制單元401將根據(jù)根數(shù)據(jù)源繪制出SVG線路，繪制單元401可以包括規(guī)劃子單元，獲取子單元及繪制子單元，具體如下：

規(guī)劃子單元，用于根據(jù)根數(shù)據(jù)源規(guī)劃自定義線路；

即規(guī)劃子單元直接根據(jù)根數(shù)據(jù)源提供的數(shù)據(jù)規(guī)劃一條動(dòng)畫線路。

獲取子單元，用于獲取所述自定義線路的起點(diǎn)、各個(gè)拐點(diǎn)及終點(diǎn)處的地理坐標(biāo)以構(gòu)成地理點(diǎn)集；

地理坐標(biāo)，即用經(jīng)度、緯度表示地面點(diǎn)位置的球面坐標(biāo)，地理點(diǎn)集中包括所述自定義線路的起點(diǎn)、各個(gè)拐點(diǎn)及終點(diǎn)處的地理坐標(biāo)。

繪制子單元，根據(jù)所述地理點(diǎn)集在地圖上繪制所述SVG線路。

具體實(shí)現(xiàn)中，地圖可以提供折線(Polyline)函數(shù)，而Polyline函數(shù)用于繪制一條由一系列指定的點(diǎn)連接而成的折線，其函數(shù)聲明如下：

BOOL Polyline(LPPOINT IpPoints，int nCount)；

其中，參數(shù)IpPoints指向POINT結(jié)構(gòu)或者CPoint集合，該集合按順序存放折線連接點(diǎn)的坐標(biāo)，而nCount是連接點(diǎn)的個(gè)數(shù)，該參數(shù)必須要大于1，如果畫線成功，則函數(shù)返回TRUE，否則返回FALSE。

具體在本實(shí)施例中，繪制子單元可以采用地圖提供的Polyline函數(shù)根據(jù)所述地理點(diǎn)集，在地圖上繪制出SVG線路。SVG線路是根據(jù)根數(shù)據(jù)源在地圖上最終畫出來呈現(xiàn)的地圖線路，自定義線路在地圖上的表現(xiàn)就是SVG線路。

(2)點(diǎn)集形成單元402；

點(diǎn)集形成單元402，用于依次獲取所述SVG線路的起點(diǎn)、各個(gè)拐點(diǎn)以及終點(diǎn)處的平面坐標(biāo)以構(gòu)成平面點(diǎn)集。

具體地，點(diǎn)集形成單元402可以將上述地理點(diǎn)集中包括的各個(gè)地理坐標(biāo)依次換算成平面坐標(biāo)以構(gòu)成所述平面點(diǎn)集。平面坐標(biāo)也稱平面直角坐標(biāo)，其用(x，y)值表示一個(gè)點(diǎn)。具體在本實(shí)施例中，即將經(jīng)緯度轉(zhuǎn)換成x、y值，其實(shí)際原理是將經(jīng)緯度按一定的投影方式投影為平面直角坐標(biāo)系中的平面直角坐標(biāo)x、y，具體可以采用相關(guān)的轉(zhuǎn)換工具自動(dòng)轉(zhuǎn)換，也可以采用相關(guān)的算法自行計(jì)算轉(zhuǎn)換，此處不做具體限定。

(3)動(dòng)畫實(shí)現(xiàn)單元403；

動(dòng)畫實(shí)現(xiàn)單元403，用于為自定義對(duì)象添加過渡屬性，并設(shè)置過渡時(shí)間，以使得所述自定義對(duì)象根據(jù)所述平面點(diǎn)集，在所述SVG線路的相鄰點(diǎn)之間按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)，以形成動(dòng)畫效果。

自定義對(duì)象可以為SVG線路上運(yùn)動(dòng)對(duì)象的顯示標(biāo)志，例如可以為箭頭或其他具有方向的指示圖標(biāo)等，此處不做具體限定。

本實(shí)施例的裝置還可以包括第一設(shè)置單元及第二設(shè)置單元，其中，第一設(shè)置單元可以設(shè)置所述自定義對(duì)象繼承地圖原生對(duì)象的坐標(biāo)切換顯示功能，以使得所述自定義對(duì)象能夠在不同的平面坐標(biāo)處切換顯示。接下來第二設(shè)置單元根據(jù)所述平面點(diǎn)集，將所述自定義對(duì)象設(shè)置在所述SVG線路的起點(diǎn)處顯示(即將自定義對(duì)象放置在SVG線路的起點(diǎn)坐標(biāo)處)，并將與所述起點(diǎn)相鄰的拐點(diǎn)(即第一個(gè)拐點(diǎn))設(shè)置為過渡終點(diǎn)，然后動(dòng)畫實(shí)現(xiàn)單元為自定義對(duì)象添加過渡屬性，并設(shè)置過渡時(shí)間。

過渡屬性，是一種可以實(shí)現(xiàn)動(dòng)畫交互效果的屬性，該屬性是一個(gè)復(fù)合屬性，包括：執(zhí)行變換的屬性：transition-property；變換延續(xù)的時(shí)間：transition-duration；在延續(xù)時(shí)間段，變換的速率變化：transition-timing-function；變換延遲時(shí)間：transition-delay這四個(gè)子屬性，通過這四個(gè)子屬性的配合來完成一個(gè)完整的過渡效果。下面分別介紹這四個(gè)子屬性：

transition-property是用來指定當(dāng)元素其中一個(gè)屬性改變時(shí)執(zhí)行過渡效果，其主要有以下幾個(gè)值：none(沒有屬性改變)，all(所有屬性改變)，indent(元素屬名稱)。當(dāng)其值為none時(shí)，過渡馬上停止執(zhí)行，當(dāng)指定為all時(shí)，則元素產(chǎn)生任何屬性值變化時(shí)都將執(zhí)行過渡效果，ident可以指定元素的某一個(gè)屬性值。

transition-duration是用來指定元素轉(zhuǎn)換過程的持續(xù)時(shí)間，取值：<time>為數(shù)值，單位為s(秒)或者ms(毫秒)，可以作用于所有元素。

transition-timing-function的值允許根據(jù)時(shí)間的推進(jìn)去改變屬性值的變換速率，transition-timing-function有6個(gè)可能值：ease：(逐漸變慢)，也是默認(rèn)值；linear：(勻速)；ease-in：(加速)；ease-out：(減速)；ease-in-out：(加速然后減速)；cubic-bezier：(該值允許自定義一個(gè)時(shí)間曲線)。

transition-delay是用來指定一個(gè)動(dòng)畫開始執(zhí)行的時(shí)間，也就是說當(dāng)改變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)間開始執(zhí)行過渡效果，其取值：<time>為數(shù)值，單位為s(秒)或者ms(毫秒)，其使用和transition-duration極其相似，也可以作用于所有元素。

過渡屬性的這四個(gè)子屬性，只有<transition-duration>是必需值且不能為0。其中，<transition-duration>和<transition-delay>都是時(shí)間。當(dāng)兩個(gè)時(shí)間同時(shí)出現(xiàn)時(shí)，第一個(gè)是<transition-duration>，第二個(gè)是<transition-delay>；當(dāng)只有一個(gè)時(shí)間時(shí)，它是<transition-duration>，而<transition-delay>為默認(rèn)值0。具體在本實(shí)施例中，所設(shè)置的過渡時(shí)間即transition-duration。

在動(dòng)畫實(shí)現(xiàn)單元為自定義對(duì)象添加過渡屬性，并設(shè)置過渡時(shí)間之后，自定義對(duì)象將在所述SVG線路的起點(diǎn)與第一個(gè)拐點(diǎn)之間，按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)。

此后，更新單元可以每隔上述過渡時(shí)間，根據(jù)所述平面點(diǎn)集重新設(shè)置一次過渡終點(diǎn)，直至將所述SVG線路的終點(diǎn)設(shè)置為所述過渡終點(diǎn)。例如圖1所示的場(chǎng)景中，第一次可以將B點(diǎn)設(shè)置為過渡終點(diǎn)，第二次可以將C點(diǎn)設(shè)置為過渡終點(diǎn)，最后一次將D點(diǎn)設(shè)置為過渡終點(diǎn)，則自定義對(duì)象將按照過渡時(shí)間，沿著A點(diǎn)運(yùn)動(dòng)到D點(diǎn)(即在第一個(gè)過渡時(shí)間T內(nèi)從A點(diǎn)運(yùn)動(dòng)到B點(diǎn)，接著在第二個(gè)過渡時(shí)間T內(nèi)從B點(diǎn)運(yùn)動(dòng)到C點(diǎn)，在第三個(gè)過渡時(shí)間T內(nèi)從C點(diǎn)運(yùn)動(dòng)到D點(diǎn))，從而形成動(dòng)畫效果。

需要說明的是，本實(shí)施例所提到的所述SVG線路的相鄰點(diǎn)，并非SVG線路上任意兩個(gè)相鄰的點(diǎn)，該相鄰點(diǎn)指的是根據(jù)所述平面點(diǎn)集得到的相鄰點(diǎn)，該相鄰點(diǎn)的類型包括起點(diǎn)與拐點(diǎn)，拐點(diǎn)與拐點(diǎn)，拐點(diǎn)與終點(diǎn)。即本實(shí)施例的自定義對(duì)象，是根據(jù)根數(shù)據(jù)源的數(shù)據(jù)(指定地理坐標(biāo)點(diǎn)轉(zhuǎn)換得到的平面坐標(biāo)點(diǎn))，在指定點(diǎn)之間進(jìn)行切換運(yùn)動(dòng)實(shí)現(xiàn)動(dòng)畫效果的，而非直接沿著SVG線路上的所有點(diǎn)直接運(yùn)動(dòng)實(shí)現(xiàn)動(dòng)畫效果的。

需要說明的是，上述實(shí)施例提供的動(dòng)畫效果實(shí)現(xiàn)裝置在實(shí)現(xiàn)動(dòng)畫效果時(shí)，僅以上述各功能模塊的劃分進(jìn)行舉例說明，實(shí)際應(yīng)用中，可以根據(jù)需要而將上述功能分配由不同的功能模塊完成，即將設(shè)備的內(nèi)部結(jié)構(gòu)劃分成不同的功能模塊，以完成以上描述的全部或者部分功能。另外，上述實(shí)施例提供的動(dòng)畫效果實(shí)現(xiàn)裝置與動(dòng)畫效果實(shí)現(xiàn)方法屬于同一構(gòu)思，其具體實(shí)現(xiàn)過程詳見方法實(shí)施例，此處不再贅述。

本實(shí)施例中，可以不依賴相關(guān)接口實(shí)現(xiàn)動(dòng)畫效果，而依賴根數(shù)據(jù)源實(shí)現(xiàn)動(dòng)畫效果，即繪制單元直接根據(jù)根數(shù)據(jù)源實(shí)時(shí)繪制SVG線路，點(diǎn)集形成單元取所繪制的SVG線路的起點(diǎn)、拐點(diǎn)及終點(diǎn)的平面坐標(biāo)構(gòu)成平面點(diǎn)集，動(dòng)畫實(shí)現(xiàn)單元通過為自定義對(duì)象添加過渡屬性并設(shè)置過渡時(shí)間，使得自定義對(duì)象根據(jù)所述平面點(diǎn)集，在所述SVG線路的相鄰點(diǎn)之間按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)，以形成動(dòng)畫效果，本實(shí)施例的方法能夠在H5端實(shí)現(xiàn)動(dòng)畫效果，且能夠使得自定義對(duì)象沿著自定義線路運(yùn)動(dòng)。

實(shí)施例四

本發(fā)明實(shí)施例還提供了一種動(dòng)畫效果實(shí)現(xiàn)裝置，如圖5所示，其示出了本發(fā)明實(shí)施例所涉及的裝置的結(jié)構(gòu)示意圖，具體來講：

該裝置可以包括射頻(RF，Radio Frequency)電路501、包括有一個(gè)或一個(gè)以上計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)的存儲(chǔ)器502、輸入單元503、顯示單元504、傳感器505、音頻電路506、無線保真(WiFi，Wireless Fidelity)模塊507、包括有一個(gè)或者一個(gè)以上處理核心的處理器508、以及電源509等部件。本領(lǐng)域技術(shù)人員可以理解，圖5中示出的裝置結(jié)構(gòu)并不構(gòu)成對(duì)裝置的限定，可以包括比圖示更多或更少的部件，或者組合某些部件，或者不同的部件布置。其中：

RF電路501可用于收發(fā)信息或通話過程中，信號(hào)的接收和發(fā)送，特別地，將基站的下行信息接收后，交由一個(gè)或者一個(gè)以上處理器508處理；另外，將涉及上行的數(shù)據(jù)發(fā)送給基站。通常，RF電路501包括但不限于天線、至少一個(gè)放大器、調(diào)諧器、一個(gè)或多個(gè)振蕩器、用戶身份模塊(SIM，Subscriber Identity Module)卡、收發(fā)信機(jī)、耦合器、低噪聲放大器(LNA，Low Noise Amplifier)、雙工器等。此外，RF電路501還可以通過無線通信與網(wǎng)絡(luò)和其他設(shè)備通信。所述無線通信可以使用任一通信標(biāo)準(zhǔn)或協(xié)議，包括但不限于全球移動(dòng)通訊系統(tǒng)(GSM，Global System of Mobile communication)、通用分組無線服務(wù)(GPRS，General Packet Radio Service)、碼分多址(CDMA，Code Division Multiple Access)、寬帶碼分多址(WCDMA，Wideband Code Division Multiple Access)、長(zhǎng)期演進(jìn)(LTE，Long Term Evolution)、電子郵件、短消息服務(wù)(SMS，Short Messaging Service)等。

存儲(chǔ)器502可用于存儲(chǔ)軟件程序以及模塊，處理器508通過運(yùn)行存儲(chǔ)在存儲(chǔ)器502的軟件程序以及模塊，從而執(zhí)行各種功能應(yīng)用以及數(shù)據(jù)處理。存儲(chǔ)器502可主要包括存儲(chǔ)程序區(qū)和存儲(chǔ)數(shù)據(jù)區(qū)，其中，存儲(chǔ)程序區(qū)可存儲(chǔ)操作系統(tǒng)、至少一個(gè)功能所需的應(yīng)用程序(比如聲音播放功能、圖像播放功能等)等；存儲(chǔ)數(shù)據(jù)區(qū)可存儲(chǔ)根據(jù)裝置的使用所創(chuàng)建的數(shù)據(jù)(比如音頻數(shù)據(jù)、電話本等)等。此外，存儲(chǔ)器502可以包括高速隨機(jī)存取存儲(chǔ)器，還可以包括非易失性存儲(chǔ)器，例如至少一個(gè)磁盤存儲(chǔ)器件、閃存器件、或其他易失性固態(tài)存儲(chǔ)器件。相應(yīng)地，存儲(chǔ)器502還可以包括存儲(chǔ)器控制器，以提供處理器508和輸入單元503對(duì)存儲(chǔ)器502的訪問。

輸入單元503可用于接收輸入的數(shù)字或字符信息，以及產(chǎn)生與用戶設(shè)置以及功能控制有關(guān)的鍵盤、鼠標(biāo)、操作桿、光學(xué)或者軌跡球信號(hào)輸入。具體地，在一個(gè)具體的實(shí)施例中，輸入單元503可包括觸敏表面以及其他輸入設(shè)備。觸敏表面，也稱為觸摸顯示屏或者觸控板，可收集用戶在其上或附近的觸摸操作(比如用戶使用手指、觸筆等任何適合的物體或附件在觸敏表面上或在觸敏表面附近的操作)，并根據(jù)預(yù)先設(shè)定的程式驅(qū)動(dòng)相應(yīng)的連接裝置?？蛇x的，觸敏表面可包括觸摸檢測(cè)裝置和觸摸控制器兩個(gè)部分。其中，觸摸檢測(cè)裝置檢測(cè)用戶的觸摸方位，并檢測(cè)觸摸操作帶來的信號(hào)，將信號(hào)傳送給觸摸控制器；觸摸控制器從觸摸檢測(cè)裝置上接收觸摸信息，并將它轉(zhuǎn)換成觸點(diǎn)坐標(biāo)，再送給處理器508，并能接收處理器508發(fā)來的命令并加以執(zhí)行。此外，可以采用電阻式、電容式、紅外線以及表面聲波等多種類型實(shí)現(xiàn)觸敏表面。除了觸敏表面，輸入單元503還可以包括其他輸入設(shè)備。具體地，其他輸入設(shè)備可以包括但不限于物理鍵盤、功能鍵(比如音量控制按鍵、開關(guān)按鍵等)、軌跡球、鼠標(biāo)、操作桿等中的一種或多種。

顯示單元504可用于顯示由用戶輸入的信息或提供給用戶的信息以及終端的各種圖形用戶接口，這些圖形用戶接口可以由圖形、文本、圖標(biāo)、視頻和其任意組合來構(gòu)成。顯示單元504可包括顯示面板，可選的，可以采用液晶顯示器(LCD，Liquid Crystal Display)、有機(jī)發(fā)光二極管(OLED，Organic Light-Emitting Diode)等形式來配置顯示面板。進(jìn)一步的，觸敏表面可覆蓋顯示面板，當(dāng)觸敏表面檢測(cè)到在其上或附近的觸摸操作后，傳送給處理器508以確定觸摸事件的類型，隨后處理器508根據(jù)觸摸事件的類型在顯示面板上提供相應(yīng)的視覺輸出。雖然在圖5中，觸敏表面與顯示面板是作為兩個(gè)獨(dú)立的部件來實(shí)現(xiàn)輸入和輸入功能，但是在某些實(shí)施例中，可以將觸敏表面與顯示面板集成而實(shí)現(xiàn)輸入和輸出功能。

裝置還可包括至少一種傳感器505，比如光傳感器、運(yùn)動(dòng)傳感器以及其他傳感器。具體地，光傳感器可包括環(huán)境光傳感器及接近傳感器，其中，環(huán)境光傳感器可根據(jù)環(huán)境光線的明暗來調(diào)節(jié)顯示面板的亮度，接近傳感器可在終端移動(dòng)到耳邊時(shí)，關(guān)閉顯示面板和/或背光。作為運(yùn)動(dòng)傳感器的一種，重力加速度傳感器可檢測(cè)各個(gè)方向上(一般為三軸)加速度的大小，靜止時(shí)可檢測(cè)出重力的大小及方向，可用于識(shí)別裝置姿態(tài)的應(yīng)用(比如橫豎屏切換、相關(guān)游戲、磁力計(jì)姿態(tài)校準(zhǔn))、振動(dòng)識(shí)別相關(guān)功能(比如計(jì)步器、敲擊)等；至于裝置還可配置的陀螺儀、氣壓計(jì)、濕度計(jì)、溫度計(jì)、紅外線傳感器等其他傳感器，在此不再贅述。

音頻電路506、揚(yáng)聲器，傳聲器可提供用戶與終端之間的音頻接口。音頻電路506可將接收到的音頻數(shù)據(jù)轉(zhuǎn)換后的電信號(hào)，傳輸?shù)綋P(yáng)聲器，由揚(yáng)聲器轉(zhuǎn)換為聲音信號(hào)輸出；另一方面，傳聲器將收集的聲音信號(hào)轉(zhuǎn)換為電信號(hào)，由音頻電路506接收后轉(zhuǎn)換為音頻數(shù)據(jù)，再將音頻數(shù)據(jù)輸出處理器508處理后，經(jīng)RF電路501以發(fā)送給比如另一終端，或者將音頻數(shù)據(jù)輸出至存儲(chǔ)器502以便進(jìn)一步處理。音頻電路506還可能包括耳塞插孔，以提供外設(shè)耳機(jī)與裝置的通信。

WiFi屬于短距離無線傳輸技術(shù)，裝置通過WiFi模塊507可以幫助用戶收發(fā)電子郵件、瀏覽網(wǎng)頁和訪問流式媒體等，它為用戶提供了無線的寬帶互聯(lián)網(wǎng)訪問。雖然圖5示出了WiFi模塊507，但是可以理解的是，其并不屬于裝置的必須構(gòu)成，完全可以根據(jù)需要在不改變發(fā)明的本質(zhì)的范圍內(nèi)而省略。

處理器508是裝置的控制中心，利用各種接口和線路連接整個(gè)裝置的各個(gè)部分，通過運(yùn)行或執(zhí)行存儲(chǔ)在存儲(chǔ)器502內(nèi)的軟件程序和/或模塊，以及調(diào)用存儲(chǔ)在存儲(chǔ)器502內(nèi)的數(shù)據(jù)，執(zhí)行裝置的各種功能和處理數(shù)據(jù)，從而對(duì)裝置進(jìn)行整體監(jiān)控。可選的，處理器508可包括一個(gè)或多個(gè)處理核心；優(yōu)選的，處理器508可集成應(yīng)用處理器和調(diào)制解調(diào)處理器，其中，應(yīng)用處理器主要處理操作系統(tǒng)、用戶界面和應(yīng)用程序等，調(diào)制解調(diào)處理器主要處理無線通信?？梢岳斫獾氖牵鲜稣{(diào)制解調(diào)處理器也可以不集成到處理器508中。

裝置還包括給各個(gè)部件供電的電源509(比如電池)，優(yōu)選的，電源可以通過電源管理系統(tǒng)與處理器508邏輯相連，從而通過電源管理系統(tǒng)實(shí)現(xiàn)管理充電、放電、以及功耗管理等功能。電源509還可以包括一個(gè)或一個(gè)以上的直流或交流電源、再充電系統(tǒng)、電源故障檢測(cè)電路、電源轉(zhuǎn)換器或者逆變器、電源狀態(tài)指示器等任意組件。

盡管未示出，裝置還可以包括攝像頭、藍(lán)牙模塊等，在此不再贅述。具體在本實(shí)施例中，裝置中的處理器508會(huì)按照如下的指令，將一個(gè)或一個(gè)以上的應(yīng)用程序的進(jìn)程對(duì)應(yīng)的可執(zhí)行文件加載到存儲(chǔ)器502中，并由處理器508來運(yùn)行存儲(chǔ)在存儲(chǔ)器502中的應(yīng)用程序，從而實(shí)現(xiàn)各種功能：

根據(jù)根數(shù)據(jù)源繪制SVG線路；

依次獲取所述SVG線路的起點(diǎn)、各個(gè)拐點(diǎn)以及終點(diǎn)處的平面坐標(biāo)以構(gòu)成平面點(diǎn)集；

為自定義對(duì)象添加過渡屬性，并設(shè)置過渡時(shí)間，以使得所述自定義對(duì)象根據(jù)所述平面點(diǎn)集，在所述SVG線路的相鄰點(diǎn)之間按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)，以形成動(dòng)畫效果。

具體地，所述處理器508可按照如下方式繪制SVG線路：

根據(jù)所述根數(shù)據(jù)源規(guī)劃自定義線路；

依次獲取所述SVG線路的起點(diǎn)、各個(gè)拐點(diǎn)以及終點(diǎn)處的平面坐標(biāo)以構(gòu)成平面點(diǎn)集；

根據(jù)所述地理點(diǎn)集在地圖上繪制所述SVG線路。

具體地，所述處理器508可按照如下方式構(gòu)成平面點(diǎn)集：

將所述地理點(diǎn)集中包括的各個(gè)地理坐標(biāo)依次換算成平面坐標(biāo)以構(gòu)成所述平面點(diǎn)集。

進(jìn)一步地，在為所述自定義對(duì)象添加過渡屬性，并設(shè)置過渡時(shí)間之前，所述處理器508還用于，

設(shè)置所述自定義對(duì)象繼承地圖原生對(duì)象的坐標(biāo)切換顯示功能，以使得所述自定義對(duì)象能夠在不同的平面坐標(biāo)處切換顯示。

進(jìn)一步地，在設(shè)置所述自定義對(duì)象繼承地圖原生對(duì)象的坐標(biāo)切換顯示功能之后，所述處理器508還用于，

根據(jù)所述平面點(diǎn)集，將所述自定義對(duì)象設(shè)置在所述SVG線路的起點(diǎn)處顯示，并將與所述起點(diǎn)相鄰的拐點(diǎn)設(shè)置為過渡終點(diǎn)。

進(jìn)一步地，在為所述自定義對(duì)象添加過渡屬性，并設(shè)置過渡時(shí)間之后，所述處理器508還用于，

每隔所述過渡時(shí)間，根據(jù)所述平面點(diǎn)集重新設(shè)置所述過渡終點(diǎn)，直至將所述SVG線路的終點(diǎn)設(shè)置為所述過渡終點(diǎn)。

本實(shí)施例的裝置，可以不依賴相關(guān)接口實(shí)現(xiàn)動(dòng)畫效果，而依賴根數(shù)據(jù)源實(shí)現(xiàn)動(dòng)畫效果，即直接根據(jù)根數(shù)據(jù)源實(shí)時(shí)繪制SVG線路，取所繪制的SVG線路的起點(diǎn)、拐點(diǎn)及終點(diǎn)的平面坐標(biāo)構(gòu)成平面點(diǎn)集，通過為自定義對(duì)象添加過渡屬性并設(shè)置過渡時(shí)間，使得自定義對(duì)象根據(jù)所述平面點(diǎn)集，在所述SVG線路的相鄰點(diǎn)之間按照所述過渡時(shí)間連續(xù)運(yùn)動(dòng)，以形成動(dòng)畫效果，本實(shí)施例的裝置能夠在H5端實(shí)現(xiàn)動(dòng)畫效果，且能夠使得自定義對(duì)象沿著自定義線路運(yùn)動(dòng)。

在本申請(qǐng)所提供的幾個(gè)實(shí)施例中，應(yīng)該理解到，所揭露的系統(tǒng)，裝置和方法，可以通過其它的方式實(shí)現(xiàn)。例如，以上所描述的裝置實(shí)施例僅僅是示意性的，例如，所述單元的劃分，僅僅為一種邏輯功能劃分，實(shí)際實(shí)現(xiàn)時(shí)可以有另外的劃分方式，例如多個(gè)單元或組件可以結(jié)合或者可以集成到另一個(gè)系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另一點(diǎn)，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些接口，裝置或單元的間接耦合或通信連接，可以是電性，機(jī)械或其它的形式。所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個(gè)地方，或者也可以分布到多個(gè)網(wǎng)絡(luò)單元上。可以根據(jù)實(shí)際的需要選擇其中的部分或者全部單元來實(shí)現(xiàn)本實(shí)施例方案的目的。

另外，在本發(fā)明各個(gè)實(shí)施例中的各功能單元可以集成在一個(gè)處理單元中，也可以是各個(gè)單元單獨(dú)物理存在，也可以兩個(gè)或兩個(gè)以上單元集成在一個(gè)單元中。上述集成的單元既可以采用硬件的形式實(shí)現(xiàn)，也可以采用軟件功能單元的形式實(shí)現(xiàn)。所述集成的單元如果以軟件功能單元的形式實(shí)現(xiàn)并作為獨(dú)立的產(chǎn)品銷售或使用時(shí)，可以存儲(chǔ)在一個(gè)計(jì)算機(jī)可讀取存儲(chǔ)介質(zhì)中?；谶@樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說對(duì)現(xiàn)有技術(shù)做出貢獻(xiàn)的部分或者該技術(shù)方案的全部或部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計(jì)算機(jī)軟件產(chǎn)品存儲(chǔ)在一個(gè)存儲(chǔ)介質(zhì)中，包括若干指令用以使得一臺(tái)計(jì)算機(jī)設(shè)備(可以是個(gè)人計(jì)算機(jī)，裝置，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個(gè)實(shí)施例所述方法的全部或部分步驟。而前述的存儲(chǔ)介質(zhì)包括：U盤、移動(dòng)硬盤、只讀存儲(chǔ)器(ROM，Read-Only Memory)、隨機(jī)存取存儲(chǔ)器(RAM，Random Access Memory)、磁碟或者光盤等各種可以存儲(chǔ)程序代碼的介質(zhì)。

以上所述，以上實(shí)施例僅用以說明本發(fā)明的技術(shù)方案，而非對(duì)其限制；盡管參照前述實(shí)施例對(duì)本發(fā)明進(jìn)行了詳細(xì)的說明，本領(lǐng)域的普通技術(shù)人員應(yīng)當(dāng)理解：其依然可以對(duì)前述各實(shí)施例所記載的技術(shù)方案進(jìn)行修改，或者對(duì)其中部分技術(shù)特征進(jìn)行等同替換；而這些修改或者替換，并不使相應(yīng)技術(shù)方案的本質(zhì)脫離本發(fā)明各實(shí)施例技術(shù)方案的精神和范圍。