Android implements cool SVG animation effects

Svg is a very popular image file format at present. Strictly speaking, svg should be an open standard vector graphics language. Using the svg format, we can directly use the code to describe the image. You can use any word processing tool to open the svg image. Part of the code to make the image interactive and ready to be inserted into HTML to view through a browser such as Firefox. Using the svg format allows you to design exciting, high-resolution web graphics pages.

The svg format has the advantages that the popular jpg and png formats on the Internet cannot have: the graphic display can be arbitrarily enlarged, but never at the expense of the image quality; the editable and searchable state can be retained in the svg image; the average In other words, svg files are much smaller than image files in other formats, and thus download quickly.

Let's first look at a few renderings of using SVG on Android :

As you can see from the above picture, it is very troublesome if we implement such special effects by ourselves, but next, we will introduce an open source control, which can be used with SVG to achieve these effects.

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

The above codes are very complicated, if they are codes, but we can notice that this way of writing, somewhat similar to html, uses tags

The most used label is path, which is the path

Some people also think that to achieve dynamic effects on photos, we can use the drawing classes and functions that come with Android, and complex curve paths, we can use the path class to formulate

Will it be the path in the SVG? In fact, it is the same, then we can map the path in the SVG to android, and then draw it.

There are also various tags in the SVG:

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

These can be converted into java code as long as we have another SVG file

作为一个程序员，我们当然不能手动去做这个工作，那就涉及两个问题，一个是SVG的解析，一个是解析后的绘制

幸运的是，已经有人完成了这个工作，并且在Github上开源 https://github.com/geftimov/android-pathview

这篇文章将作为一个简单的例子，来使用上面的开源控件

为了解析SVG,我们需要将一个androidsvg.jar包含进我们的lib

下面我们来看这个控件的简单使用，作为一个自定义控件，我们只需要在布局文件里面添加

<?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>

其实app:svg指定了一个SVG文件，我们可以把这个文章放在raw目录下面

然后来看Activity里面：

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

}

看到注释的部分，调用了makeConvexArraw()方法，如果我们没有在xml文件里面指定svg文件，我们也可以在代码中手动指定绘制的路径

让代码跑起来，点击屏幕，于是就实现了以下效果：

就是这么简单，至于这么制作SVG文件，大家可以找美工帮忙，使用ps和ai,可以将图片转换成SVG

源码下载地址：

百度网盘下载： http://pan.baidu.com/s/1pJ9pmnL

------------------------------------------分割线------------------------------------------

免费下载地址在 http://linux.linuxidc.com/

用户名与密码都是www.linuxidc.com

具体下载目录在 /2015年资料/8月/20日/Android实现炫酷SVG动画效果/

下载方法见 http://www.linuxidc.com/Linux/2013-07/87684.htm

另一个github https://github.com/latemic/svg-android

Android implements cool SVG animation effects

Guess you like