PathView实现炫酷SVG动画

解析SVG,需要将一个androidsvg.jar包含进libs

[url]https://github.com/geftimov/android-pathview[/url]



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目录下面


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
[url]http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0825/3362.html[/url]

你可能感兴趣的:(android动画&效果)