爱程序网

[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

关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助