[Mugeda HTML5技能教程之18]如安在Android應用中行使Mugeda動畫

 

1.簡介

本文首要先容如安在Android應用措施中行使Mugeda動畫。Mgeda動畫是尺度HTML5名目標動畫，在Android應用措施中可以行使WebView來加載Mugeda動畫。動畫內容自己可以放在應用措施當地，也可以放在遠端。

先來看一下Mugeda動畫的名目。下圖中展示了一個典范Mugeda動畫的文件布局。對付

Android應用措施來說，必要加載index.html來打開動畫。

 

 

 

• 示例

下面用一個實例在演示怎樣行使，這個實例的界面如下圖所示。中間的白色地區是WebView用來揭示Mugeda動畫。點擊當地震畫按鈕讓WebView加載當地震畫，點擊遠端動畫讓WebView加載遠端處事器上的動畫。

 

 

 

2.1 建設工程並添加Mugeda動畫到當地

起首必要建設一個Android工程，這裡不贅述了。建設好工程之後，為了加載當地震畫，起首必要將Mugeda動畫添加到工程中，我們將它放到assets目次下。

 

 

 

2.2 添加並設置WebView

2.2.1 修改應用措施的機關文件activity_main.xml，改成下面的內容：

xmlns:tools=""

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".MainActivity" >

android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> android:layout_width="match_parent" android:layout_height="50dp" > <Button android:id="@+id/local" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:text="當地震畫" /> <Button android:id="@+id/remote" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:text="遠端動畫" />

2.2.2 之後開始設置WebView:

public class MainActivity extends Activity {

WebView mWebView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//為WebView開啟JavaScript和ViewPort

mWebView = (WebView)findViewById(R.id.webview);

mWebView.getSettings().setJavaScriptEnabled(true);

mWebView.getSettings().setUseWideViewPort(true);

}

}

因為Mugeda動畫包括JavaScript代碼，可是WebView默認不執行JavaScript代碼，以是必要開啟。其它開啟ViewPort是為了可以或許更讓Mugeda動畫在各類屏幕上自順應。

2.3 綁定按鈕變亂，別離加載當地和遠端動畫：

設置好WebView之後，為2個按鈕配置變亂。

當地震畫按鈕點擊之後，加載當地URL寓目動畫：

file:///android_asset/mugeda/index.html

遠端地震畫按鈕點擊之後，加載遠端URL寓目動畫，請填入您測試時辰的URL：

 

public class MainActivity extends Activity {

WebView mWebView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//為WebView開啟JavaScript和ViewPort

mWebView = (WebView)findViewById(R.id.webview);

mWebView.getSettings().setJavaScriptEnabled(true);

mWebView.getSettings().setUseWideViewPort(true);

Button localBtn = (Button)findViewById(R.id.local);

Button remoteBtn = (Button)findViewById(R.id.remote);

//加載當地震畫

localBtn.setOnClickListener(new OnClickListener(){

@Override

public void onClick(View arg0) {

mWebView.loadUrl("file:///android_asset/mugeda/index.html");

}

});

//加載遠端動畫

remoteBtn.setOnClickListener(new OnClickListener(){

@Override

public void onClick(View arg0) {

mWebView.loadUrl("");

}

});

}

}

請留意將上面赤色的URL換成您測試時辰的現實地點。

2.4 添加收集權限

為了讓android應用措施會見遠端處事器，必要開啟收集權限，必要設置AndroidManifest.XML文件。將下面這句話添加到AndroidManifest.XML文件中即可：

2.5 功效

之後將應用措施陳設到測試機上，點擊當地震畫或遠端動畫，會看到下面的結果。

 

 

 

• 更多結果

3.1 透明配景

偶然為了到達某種結果，也許必要將WebView配景變透明，實現如下：

//配置配景透明

WebView.setBackgroundColor(Color.argb(0, 0, 0, 0));

//在高版本的Android體系中，必要封鎖硬件加快才氣讓配景透明

if(android.os.Build.VERSION.SDK_INT>=11){

WebView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

}

將WebView配置為透明後，下面說一下怎樣將動畫自己配置為透明。起首打開動畫編輯頁面，修改配景顏色在左下方

(