[Mugeda HTML5技术教程之18]如何在Android应用中使用Mugeda动画内容

1.简介

本文主要介绍如何在Android应用程序中使用Mugeda动画。Mgeda动画是标准HTML5格式的动画，在Android应用程序中可以使用WebView来加载Mugeda动画。动画内容本身可以放在应用程序本地，也可以放在远端。

先来看一下Mugeda动画的格式。下图中展示了一个典型Mugeda动画的文件结构。对于

Android应用程序来说，需要加载index.html来打开动画。

 

2. 示例

下面用一个实例在演示如何使用，这个实例的界面如下图所示。中间的白色区域是WebView用来展现Mugeda动画。点击本地动画按钮让WebView加载本地动画，点击远端动画让WebView加载远端服务器上的动画。

2.1 创建工程并添加Mugeda动画到本地

首先需要创建一个Android工程，这里不赘述了。创建好工程之后，为了加载本地动画，首先需要将Mugeda动画添加到工程中，我们将它放到assets目录下。

2.2 添加并配置WebView

2.2.1 修改应用程序的布局文件activity_main.xml，改成下面的内容：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

   xmlns:tools="http://schemas.android.com/tools"

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:orientation="vertical"

   tools:context=".MainActivity" >

   <WebView

       android:id="@+id/webview"

       android:layout_width="match_parent"

       android:layout_height="0dp"

       android:layout_weight="1" />

   <LinearLayout

       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="远端动画"

           />

       

   </LinearLayout>

   

</LinearLayout>

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：

http://192.168.1.100/mugeda/index.html

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("http://192.168.1.100/mugeda/index.html");

}

});

 

}

}

请注意将上面红色的URL换成您测试时候的实际地址。

2.4 添加网络权限

为了让android应用程序访问远端服务器，需要开启网络权限，需要配置AndroidManifest.XML文件。将下面这句话添加到AndroidManifest.XML文件中即可：

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

2.5 结果

之后将应用程序部署到测试机上，点击本地动画或远端动画，会看到下面的效果。

3. 更多效果

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设置为透明后，下面说一下如何将动画本身设置为透明。首先打开动画编辑页面，修改背景颜色在左下方，如图所示。

   

     图 1 

 

 图 2

                       

 图 3