Home IT Linux Windows Database Network Programming Server Mobile  
           
  Home \ Programming \ Cool Android realization SVG animation     - Embedded Linux to solve the problem in the time zone (Linux)

- How to Debian Linux the default Python version switch to alternative version (Linux)

- Python kills corresponding process according to pid (Programming)

- Using IPFilter bridge filter in the FreeBSD system (Linux)

- Ubuntu 15.04 / 14.04 install Ubuntu After Install 2.6 (Linux)

- PostgreSQL using the system cache to improve operational efficiency (Database)

- Redis is installed and set up Ubuntu 14.04 from the environment under the main ssdb (Server)

- How to install Kernel 4.0.2 on CentOS 7 (Linux)

- Linux System Getting Started Tutorial: How to change the default Java version in Linux (Linux)

- CentOS6 installed Tomcat (Server)

- JavaScript function definition mode (Programming)

- To get Java class / jar package path (Programming)

- Examples 14 grep command (Linux)

- Windows 7 hard disk installation notes Debian (Linux)

- To compile and install MySQL 5.7.7 RC under CentOS 7.1 (Database)

- Docker Basic Concepts (Linux)

- MySQL various log summary (Database)

- Talking about the implementation and the JVM garbage collection mechanism (Programming)

- Install the latest Eclipse IDE in Ubuntu (Linux)

- Linux in order to make NMAP hide and seek with the firewall (Linux)

 
         
  Cool Android realization SVG animation
     
  Add Date : 2017-08-31      
         
       
         
  Svg is currently very popular image file formats of, svg strictly speaking it should be an open-standard vector graphics language, use svg format we can use the code to describe the image, you can open svg images using any word processing tool, by changing part of the code to make an image with interactive features, and can always be inserted into the HTML browser (such as Firefox) to watch. Use svg format allows you to design an exciting, high-resolution graphic Web pages.

svg format with the current network of popular formats such as jpg and png can not have the advantage: can be enlarged graphical display, but never at the expense of image quality at the cost; retain editable and searchable state svg images; averaging speak, svg file formats other than the image file is much smaller, so download quickly.

If we own to achieve such effects, very troublesome, but then to introduce an open source control, you can achieve these effects with SVG.

First we have to understand format 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 = "10" 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.27 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 = "10" 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.18310546875 px, 1645.18310546875px; stroke-dashoffset: 0px; "> < / path>

        < Path fill = "# fff" stroke = "# C8D2DC" stroke-width = "2px" stroke-miterlimit = "10" 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 1.322 2.273 5.51-.04 3.716-2.064 5.105-4.098 2.313-4.748 1.61-2.35 2.273-4.63-.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 = "10" 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 = "10" 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 complicated, if they are code words, but we may note that this way of writing, somewhat similar to html, are using labels

The label is the most used path, the path is

Some people also think that to achieve a dynamic effect on the picture, we can use the Android built-in drawing classes and functions, complex curved path, we can use this path to develop class

It would not be inside the SVG path, in fact, is the case, then we can be in SVG path, corresponds to the android, and then draw out just fine.

SVG There is also a variety of labels:

Including straight line, circle round, rect rectangle, eliipse ellipse, polygon polygon, etc.

These long as we have an SVG file, you can convert it into a java code

As a programmer, we certainly can not do this work manually, it involves two issues, one is parsing SVG, a draw is parsed

Fortunately, this work has already been completed, and open source on Github https://github.com/geftimov/android-pathview

This article will serve as a simple example, to use the above open-source controls

To parse SVG, we need to be included into a androidsvg.jar our lib

Let's look at this simple to use control as a custom control, we only need to add a layout file inside

< ? 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 specify a SVG file, we can put this article on the raw directory

Activity then look 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 some comments, call makeConvexArraw () method, if we do not specify svg file xml file inside, we can also specify the path drawn manually in code

Is so simple, so as to make SVG file, we can help find artists using ps and ai, pictures can be converted to SVG

The whole process has two classes, one SVG analytic tools:

/ **
 * Util class to init and get paths from svg.
 * /
public class SvgUtils {
    / **
    * It is for logging purposes.
    * /
    private static final String LOG_TAG = "SVGUtils";
    / **
    * All the paths with their attributes from the svg.
    * /
    private final List mPaths = new ArrayList ();
    / **
    * The paint provided from the view.
    * /
    private final Paint mSourcePaint;
    / **
    * The init svg.
    * /
    private SVG mSvg;

    / **
    * Init the SVGUtils with a paint for coloring.
    *
    * @param SourcePaint - the paint for the coloring.
    * /
    public SvgUtils (final Paint sourcePaint) {
        mSourcePaint = sourcePaint;
    }

    / **
    * Loading the svg from the resources.
    *
    * @param Context Context object to get the resources.
    * @param SvgResource int resource id of the svg.
    * /
    public void load (Context context, int svgResource) {
        if (mSvg = null!) return;
        try {
            mSvg = SVG.getFromResource (context, svgResource);
            mSvg.setDocumentPreserveAspectRatio (PreserveAspectRatio.UNSCALED);
        } Catch (SVGParseException e) {
            Log.e (LOG_TAG, "Could not load specified SVG resource", e);
        }
    }

    / **
    * Draw the svg to the canvas.
    *
    * @param Canvas The canvas to be drawn.
    * @param Width The width of the canvas.
    * @param Height The height of the canvas.
    * /
    public void drawSvgAfter (final Canvas canvas, final int width, final int height) {
        final float strokeWidth = mSourcePaint.getStrokeWidth ();
        rescaleCanvas (width, height, strokeWidth, canvas);
    }

    / **
    * Render the svg to canvas and catch all the paths while rendering.
    *
    * @param Width - the width to scale down the view to,
    * @param Height - the height to scale down the view to,
    * @return All the paths from the svg.
    * /
    public List getPathsForViewport (final int width, final int height) {
        final float strokeWidth = mSourcePaint.getStrokeWidth ();
        Canvas canvas = new Canvas () {
            private final Matrix mMatrix = new Matrix ();

            @Override
            public int getWidth () {
                return width;
            }

            @Override
            public int getHeight () {
                return height;
            }

            @Override
            public void drawPath (Path path, Paint paint) {
                Path dst = new Path ();

                // Noinspection deprecation
                getMatrix (mMatrix);
                path.transform (mMatrix, dst);
                paint.setAntiAlias (true);
                paint.setStyle (Paint.Style.STROKE);
                paint.setStrokeWidth (strokeWidth);
                mPaths.add (new SvgPath (dst, paint));
            }
        };

        rescaleCanvas (width, height, strokeWidth, canvas);

        return mPaths;
    }

    / **
    * Rescale the canvas with specific width and height.
    *
    * @param Width The width of the canvas.
    * @param Height The height of the canvas.
    * @param StrokeWidth Width of the path to add to scaling.
    * @param Canvas The canvas to be drawn.
    * /
    private void rescaleCanvas (int width, int height, float strokeWidth, Canvas canvas) {
        final RectF viewBox = mSvg.getDocumentViewBox ();

        final float scale = Math.min (width
                        / (ViewBox.width () + strokeWidth),
                height / (viewBox.height () + strokeWidth));

        canvas.translate ((width - viewBox.width () * scale) / 2.0f,
                (Height - viewBox.height () * scale) / 2.0f);
        canvas.scale (scale, scale);

        mSvg.renderToCanvas (canvas);
    }

    / **
    * Path with bounds for scalling, length and paint.
    * /
    public static class SvgPath {
        / **
        * Region of the path.
        * /
        private static final Region REGION = new Region ();
        / **
        * This is done for clipping the bounds of the path.
        * /
        private static final Region MAX_CLIP =
                new Region (Integer.MIN_VALUE, Integer.MIN_VALUE,
                        Integer.MAX_VALUE, Integer.MAX_VALUE);
        / **
        * The path itself.
        * /
        final Path path;
        / **
        * The paint to be drawn later.
        * /
        final Paint paint;
        / **
        * The length of the path.
        * /
        final float length;
        / **
        * The bounds of the path.
        * /
        final Rect bounds;
        / **
        * The measure of the path, we can use it later to get segment of it.
        * /
        final PathMeasure measure;

        / **
        * Constructor to add the path and the paint.
        *
        * @param Path The path that comes from the rendered svg.
        * @param Paint The result paint.
        * /
        SvgPath (Path path, Paint paint) {
            this.path = path;
            this.paint = paint;

            measure = new PathMeasure (path, false);
            this.length = measure.getLength ();

            REGION.setPath (path, MAX_CLIP);
            bounds = REGION.getBounds ();
        }
    }
}
     
         
       
         
  More:      
 
- Ubuntu method for single-card dual-IP (Linux)
- libnet list of functions (Programming)
- CentOS 6.5 install Maven and Nexus warehouse agent (Server)
- Hibernate + JUnit test entity class generate database table (Programming)
- Ubuntu install Vendetta Online 14.04 (Linux)
- Sublime Text 3 practical functions and shortcut keys used to collect (Linux)
- Upgrading Oracle 11.2.0.1 to 11.2.0.3 (Database)
- In Debian 4.3 compiler under Linux-2.6.28 kernel Summary (Programming)
- Teach you self-built Linux firewall free (Linux)
- installation of Piwik under Ubuntu (Programming)
- SolrCloud-5.2.1 cluster deployment and testing (Server)
- Linux C source code (Ascii HexToBinary: Converts hexadecimal string format ASCII codes) (Programming)
- Talk about Java in the collection (Programming)
- Database Blob data type conversion String (Programming)
- shell-like program (Programming)
- Machine Learning: Classification of the curse of dimensionality (Programming)
- How wifi-linux AP signal strength detection (Linux)
- Java memory area Explanation (Programming)
- Thinking in Java study notes - Generics (Programming)
- Linux prohibit non-WHEEL user su command Detail (Linux)
     
           
     
  CopyRight 2002-2016 newfreesoft.com, All Rights Reserved.