先放点motivation
（GIF图点开，看动画）
要实现这个布局很简单，用FrameLayout加一个ImageView并设置一个图片，再在FrameLayout上放一个RelativeLayout，背景用
这个矢量图。布局文件如下:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152< RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android"xmlns:tools = "http://schemas.android.com/tools"android:layout_width = "match_parent"android:layout_height = "match_parent"android:padding = "20dp"tools:context = ".MainActivity" >< FrameLayoutandroid:id = "@+id/card_view"android:layout_centerInParent = "true"android:layout_width = "260dp"android:layout_height = "430dp">< ImageViewandroid:id = "@+id/img"android:src = "@drawable/p1"android:scaleType = "centerCrop"android:layout_width = "match_parent"android:layout_height = "match_parent" />< RelativeLayoutandroid:id = "@+id/card_content"android:background = "@drawable/animate_rect"android:layout_width = "match_parent"android:layout_height = "320dp"android:padding = "15dp" >< TextViewandroid:id = "@+id/title"android:textColor = "#03A9F4"android:textSize = "25sp"android:layout_marginTop = "6dp"android:layout_width = "wrap_content"android:layout_height = "wrap_content"android:text = "Vector card"android:layout_alignParentTop = "true"android:layout_centerHorizontal = "true" />< TextViewandroid:id = "@+id/tv_content"android:gravity = "center"android:layout_marginTop = "18dp"android:layout_below = "@id/title"android:text = "Lorem ipsum dolor sit amet, Duis aute irure dolor in reprehenderit sunt in culpa quilaborum. in voluptate velit esse cillum dolore eu fugiat nulla ."android:layout_width = "wrap_content"android:layout_height = "wrap_content"/></ RelativeLayout ></ FrameLayout ></ RelativeLayout >
怎么让它动起来呢?其实很简单,只要修改SVG图中的pathData就行,也就是从梯形变成一个长方形。原来的pathData的坐标和要变化的新坐标如图所示，
SVG文件内容：sharp_rect.xml
注意,我们把path加了一个name=”sharp_rect”,这是做动画效果是要指定这部分,所以需要给个独一无二的name作为id.
123456789101112<?xml version="1.0" encoding="utf-8"?>< vector xmlns:android = "http://schemas.android.com/apk/res/android"android:width = "180dp"android:height = "320dp"android:viewportWidth = "180"android:viewportHeight = "400" >< pathandroid:name = "sharp_rect"android:fillColor = "#000000"android:pathData = "M 180,230 L 0,320 0,0 180,0 z" /></ vector >
下面做animate-vector drawable:
1234567<?xml version="1.0" encoding="utf-8"?>< animated-vector xmlns:android = "http://schemas.android.com/apk/res/android"android:drawable = "@drawable/sharp_rect" >< targetandroid:animation = "@animator/to_rect"android:name = "sharp_rect" /></ animated-vector >
在animated-vector里填入android:drawable=”@drawable/sharp_rect”,这是指定要产生动画的SVG。target里是需要动画的对象，这里我们的对象就是前面那个叫sharp_rect的梯形,所以name里填上它,然后animation填的是对应的动画文件。
动画用的是ObjectAnimator做的，内容如下：
12345678<?xml version="1.0" encoding="utf-8"?>< objectAnimator xmlns:android = "http://schemas.android.com/apk/res/android"android:duration = "330"android:interpolator = "@android:interpolator/decelerate_cubic"android:propertyName = "pathData"android:valueType = "pathType"android:valueFrom = "M 180,230 L 0,320 0,0 180,0 z"android:valueTo = "M 180,75 L 0,75 0,0 180,0 z" />
值得注意的是,我们要从梯形变成矩形,就是对pathData进行修改,也就是propertyName要填入pathData,valueType是pathType,valueFrom是原来的路径(也就是梯形的路径),最终变成的效果是valueTo(矩形的路径)。这里有个要注意的地方，如果要进行path的变换，里面的点数必须要一样！
Ok了大功告成，最后只要把ImageView的src改成animate_rect就行了,并设置触发函数就行了
12345678910final ImageView play = ( ImageView) findViewById( R. id. icon_play);play. setOnClickListener( new View. OnClickListener() {@ Overridepublic void onClick( View view) {Drawable drawable = play. getDrawable();if ( drawable instanceof Animatable){(( Animatable) drawable). start();}}});
注意,上面我这种方法不是Android SVG推荐的用法,SVG动画尺寸应该尽可能的小,和简单,因为每次动画都会先把这些path先计算绘成Bitmap,然后上传texture到GPU,如果SVG太大意味着生成更大的Bitmap,占更多内存,消耗更多时间.Google的推荐是把SVG用于图标(icon)和按钮(Button),只有需要的时候才修改Vector的属性(比如alpha,width,height),因为如果SVG不用于动画,android会把这个图生成一个Cache来节省时间,如果SVG动画这个Cache就没有用了。如果要用SVG动画，请确保它“短小精悍”（Short and sweet）。
下面还有一些SVG动画的例子：
（GIF图，点开看）
Demo源代码： https://github.com/qianlvable/VectorCard
参考:
DevBytes: Android Vector Graphics (youtube视频,需翻墙)
VectorDrawables – Styling Android 系列
Transitioning to Infinity (一个很厉害的法国人,不过他的程序都是用C#写的,本文的BlueTooth的动画来源于这个博客)
861
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
