[Mugeda HTML5 technical tutorial 18] How to Use Mugeda animated content in Android applications

1. Introduction

This article describes how to use Mugeda animation in Android applications. Mgeda is a standard HTML5 animation. In Android applications, you can use WebView to load Mugeda animations. The animation content can be stored locally or remotely in the application.

Let's take a look at the Mugeda animation format. Shows the file structure of a typical Mugeda animation. For

Android app to open the animation with the corresponding index.html.

 

2. Example

The following uses an instance to demonstrate how to use it. The instance interface is shown in. The white area in the middle is the WebView used to display the Mugeda animation. Click the local Animation button to let the WebView load the local animation, and click the remote animation to let the WebView load the animation on the remote server.

2.1 create a project and add the Mugeda animation to the local device

First, create an Android project. After creating the project, to load the local animation, first add the Mugeda animation to the project and place it in the assets Directory.

2.2 add and configure WebView

2.2.1 modify the layout file activity_main.xml of the application and change it to the following content:

<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 = "Local Animation"

/>

<Button

Android: id = "@ + id/remote"

Android: layout_width = "0dp"

Android: layout_height = "match_parent"

Android: layout_weight = "1"

Android: text = "remote Animation"

/>

</LinearLayout>

</LinearLayout>

Start configuring WebView after 2.2.2:

Public class MainActivity extends Activity {

WebView mWebView;

 

@ Override

Protected void onCreate (Bundle savedInstanceState ){

Super. onCreate (savedInstanceState );

SetContentView (R. layout. activity_main );

 

// Enable JavaScript and ViewPort for WebView

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

MWebView. getSettings (). setJavaScriptEnabled (true );

MWebView. getSettings (). setUseWideViewPort (true );

}

}

Because the Mugeda animation contains JavaScript code, WebView does not execute JavaScript code by default, so it must be enabled. In addition, ViewPort is enabled to make Mugeda animation more adaptive on various screens.

2.3 bind a button event to load local and remote animations respectively:

After configuring WebView, set events for the two buttons.

After clicking the local Animation button, load the local URL to watch the animation:

File: // android_asset/mugeda/index.html

After clicking the remote Animation button, load the remote URL to watch the animation. Enter the URL during the test:

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 );

 

// Enable JavaScript and ViewPort for WebView

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 );

// Load the local Animation

LocalBtn. setOnClickListener (new OnClickListener (){

@ Override

Public void onClick (View arg0 ){

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

}

});

 

// Load the remote Animation

RemoteBtn. setOnClickListener (new OnClickListener (){

@ Override

Public void onClick (View arg0 ){

MWebView. loadUrl ("http: // 192.168.1.100/mugeda/index.html ");

}

});

 

}

}

Note that the above red URL is replaced with the actual address during the test.

2.4 Add network Permissions

To allow android applications to access the remote server, you must enable Network permissions and configure the AndroidManifest. XML file. Add the following sentence to the AndroidManifest. XML file:

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

Result 2.5

Then deploy the application on the test machine. Click local or remote animation to see the following results.

3. More results

3.1 transparent background

 

Sometimes, to achieve a certain effect, you may need to make the WebView background transparent as follows:

// Set the background to transparent

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

// In a later Android system, hardware acceleration must be disabled to make the background transparent.

If (android. OS. Build. VERSION. SDK_INT> = 11 ){

WebView. setLayerType (WebView. LAYER_TYPE_SOFTWARE, null );

}

After setting WebView to transparent, the following describes how to set the animation to transparent. First, open the animation editing page and modify the background color in the lower left corner ,.