Android for cool SVG animation effects

SVG is a very popular image file format, SVG strictly speaking should be an open standard vector graphics language, using SVG format we can directly use the code to depict the image, you can use any word processing tool to open the SVG image, by changing some of the code to make the image interactive function, and can be inserted into the HTML at any time through the browser (such as Firefox) to watch. Using the SVG format allows you to design exciting, high-resolution web graphics pages.

SVG format has the current network popular JPG and PNG formats do not have the advantage: you can arbitrarily enlarge the graphics display, but will not sacrifice the image quality at the expense of the SVG image can be retained in an editable and searchable state; On average, SVG files are much smaller than other format image files. Thus download also soon.

Let's take a look at some of the SVG uses on Android:

See from the above picture, if we ourselves to achieve such a special effect, very troublesome, but then to introduce an open source control, you can cooperate with SVG to achieve these effects.

First, let's look at the format of the SVG file, for example:

<svg xmlns= "http://www.w3.org/2000/svg" id= "svg" class= "svg" viewbox= "0 0 960 480" preserveaspectratio= "Xminymin Meet ">
        <path fill= "#B4BEC8" stroke= "#B4BEC8" stroke-width= "2px" stroke-miterlimit= "d=" M570.14 440.2l-29.165-28.99c-7.103-8.5-6.152-36.718-6.02-40.665h425.048c.133 3.947 1.082 32.164-6.018 40.666l-29.166 28.99c-1.237 1.404-1.712 2.505-1.623 3.37h-.054c.76 7.727 6.664 6.332 13.607 6.332h558.01c6.696 0 12.412 1. 13.493-5.56.58-.953.274-2.282-1.364-4.14z "style=" fill-opacity:1; stroke-opacity:0; -webkit-transition:fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; transition:fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; STROKE-DASHARRAY:474.095184326172PX, 474.095184326172px; stroke-dashoffset:0px; " ></path>

        <path fill= "#C8D2DC" stroke= "#C8D2DC" stroke-width= "2px" stroke-miterlimit= "d=" M727.488 355.125c0 8.514-6.597 15.42-14.738 15.42h-465.5c-8.14 0-14.74-6.906-14.74-15.42v45.42c0-8.517 6.6-15.42 14.74-15.42h465.5c8.142 0 14.738 6.903 14.738 15.42v309.705z "style=" fill-opacity:1; stroke-opacity:0; -webkit-transition:fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; transition:fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; stroke-dasharray:1645.18310546875px, 1645.18310546875px; stroke-dashoffset:0px; " ></path>

        <path fill= "#fff" stroke= "#C8D2DC" stroke-width= "2px" stroke-miterlimit= "d=" M489.01 343.713c-.042-4.223 3.447-6.254 3.605-6.352-1.963-2.866-5.018-3.263-6.102-3.31-2.602-.26-5.074 1.53-6.39 1.53s-3.356-1.49-5.506-1.448c-2.836.04-5.445 1.645-6.907 4.182-2.942 5.11-.75 12.672 2.116 16.814 1.4 2.02 3.072 4.305 5. 268 4.22 2.114-.08 2.913-1.362 5.467-1.362 2.556 0 3.274 1.363 5.51 1.322 2.273-.04 3.716-2.064 5.105-4.098 1.61-2.35 2.27 3-4.63 2.313-4.748-.05-.02-4.434-1.7-4.48-6.75m484.807 331.31c1.168-1.41 1.953-3.37 1.738-5.327-1.68.068-3.713 1.12-4.916 2.53-1.08 1.247-2.027 3.245-1.77 5.16 1.87.143 3.784-.95 4.947-2.362 "style=" fill-opacity:1; stroke-opacity:0; -webkit-transition:fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; transition:fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; STROKE-DASHARRAY:115.244583129883PX, 115.244583129883px; stroke-dashoffset:0px; " ></path>

        <path fill= "#3C4650" stroke= "#3C4650" stroke-width= "2px" stroke-miterlimit= "d=" M727.488 315.527v45.982c0-8.828-6.597-15.982-14.738-15.982h-465.5c-8.14 0-14.74 7.155-14.74 15.982v269.545H727.49z "Style=" FILL-OPACITY:1; stroke-opacity:0; -webkit-transition:fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; transition:fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; STROKE-DASHARRAY:1547.85571289063PX, 1547.85571289063px; stroke-dashoffset:0px; " ></path>

<path fill= "#141E28" stroke= "#141E28" stroke-width= "2px" stroke-miterlimit= "d=" M251.2 48.887h457.205v245.52h251.2z "style=" fill-opacity:1; stroke-opacity:0; -webkit-transition:fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; transition:fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; STROKE-DASHARRAY:1405.44995117188PX, 1405.44995117188px; stroke-dashoffset:0px; " ></path>
</svg>

The above code is very complex, if they are code, but we can notice that this way of writing, a bit like HTML, is to use the label

The most used tag is path, which is the path

Some people will also think that to achieve the dynamic effect of the photo, we can use the Android comes with the drawing classes and functions, complex curve path, we can use the path of the class to develop

That will not SVG inside the path, in fact, it is so, then we can be SVG in the path, corresponding to the Android, and then draw out just fine.

SVG also has a variety of tags:

Includes line lines, Circle Circle, rect rectangle, eliipse ellipse, polygon polygon, etc.

These can be converted to Java code as long as we have another SVG file

As a programmer, we certainly can not do this work manually, that involves two questions, one is the resolution of SVG, one is the parsing of the drawing

Fortunately, someone has already done the job and is open source on GitHub Https://github.com/geftimov/android-pathview

This article will be used as a simple example to use the open source control above

In order to parse SVG, we need to include a androidsvg.jar in our Lib

Let's take a look at the simple use of this control, as a custom control, we just need to add in the layout file

<?xml version= "1.0" encoding= "Utf-8",
<linearlayout
    xmlns:android= "http:// Schemas.android.com/apk/res/android "
    android:orientation=" vertical "
    Android: Background= "#ff0000"
    android:layout_width= "fill_parent"
    android:layout_height= " Fill_parent ";

<com.example.kaiyicky.myapplication.pathview
xmlns:app= "Http://schemas.android.com/apk/res-auto"
Android:id= "@+id/pathview"
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
App:pathcolor= "@android: Color/white"
app:svg= "@raw/ironman_white"
App:pathwidth= "5"/>
</LinearLayout>

In fact, App:svg specified an SVG file, we can put this article under the Raw directory

Then see the activity inside:

public class Mainactivity extends Fragmentactivity {

@Override
protected void OnCreate (Bundle savedinstancestate) {
Super.oncreate (savedinstancestate);
Setcontentview (R.layout.activity_main);

Final Pathview Pathview = (pathview) Findviewbyid (R.id.pathview);
Final path Path = Makeconvexarrow (50, 100);
Pathview.setpath (path);
Pathview.setfillafter (TRUE);
Pathview.usenaturalcolors ();
Pathview.setonclicklistener (New View.onclicklistener () {
@Override
public void OnClick (View v) {
Pathview.getpathanimator ().
Delay (100).
Duration (1500).
Interpolator (New Acceleratedecelerateinterpolator ()).
Start ();
}
});
}

    Private Path makeconvexarrow (float length, float height) {
        Final path Path = New Path ();
        Path.moveto (0.0f, 0.0f);
        Path.lineto (length/4f, 0.0f);
        Path.lineto (length, height/2.0f);
        Path.lineto (length/4f, height);
        Path.lineto (0.0f, height);
        path.lineto (length * 3f/4f, height/2f);
        Path.lineto (0.0f, 0.0f);
        path.close ();
        return path;
   }

}

See the section of the comment, call the Makeconvexarraw () method, if we do not specify an SVG file inside the XML file, we can also manually specify the drawing path in the code

Let the code run, click on the screen, and then achieve the following effects:

is so simple, as to make SVG files, you can find the artist to help, using PS and AI, you can convert the picture to SVG

Source :

Baidu Network disk Download: Http://pan.baidu.com/s/1pJ9pmnL

------------------------------------------Split Line------------------------------------------

Free in http://linux.linuxidc.com/

user name and password are www.linuxidc.com

specific download directory in /2015 profile/8 months/20th/android achieve cool SVG animation effect/

Download method See http://www.linuxidc.com/Linux/2013-07/87684.htm

Another GitHub https://github.com/latemic/svg-android

Android for cool SVG animation effects