android svg动画框架,Android实现炫酷SVG动画效果

svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言，使用svg格式我们可以直接用代码来描绘图像，可以用任何文字处理工具打开svg图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器(如火狐浏览器)来观看。使用svg格式可让你设计激动人心的、高分辨率的Web图形页面。

svg格式具备目前网络流行的jpg和png等格式无法具备的优势：可以任意放大图形显示，但绝不会以牺牲图像质量为代价;可在svg图像中保留可编辑和可搜寻的状态;平均来讲，svg文件比其它格式的图像文件要小很多，因而下载也很快。

我们先来看几张Android上使用SVG的效果图：

从上面的图片看到，如果我们自己来实现这样的特效，非常的麻烦，不过接下来给大家介绍一个开源控件，就可以配合SVG实现这些效果。

首先我们来了解SVG文件的格式，举个例子：

上面的代码很复杂，如果说它们是代码的话，但是我们可以注意到，这种书写方式，有点类似于html，都是使用标签

使用最多的标签是path，也就是路径

有的人也会想到，要实现照片上的动态效果，我们可以使用Android自带的绘图类和函数，复杂的曲线路径，我们可以使用path这个类来制定

那会不会SVG里面的path，其实也是这样，那么我们就可以将SVG中的path，对应到android，然后绘制出来就好了。

SVG里面还有各种标签：

包括line直线，circle圆，rect矩形，eliipse椭圆，polygon多边形，等等

这些只要我们又一个SVG文件，都可以将其转换成java代码

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

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

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

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

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

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

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"/>

其实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

源码下载地址：

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

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