先放点motivation
(GIF图点开,看动画)
要实现这个布局很简单,用FrameLayout加一个ImageView并设置一个图片,再在FrameLayout上放一个RelativeLayout,背景用
这个矢量图。布局文件如下:
<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"> <FrameLayout android:id="@+id/card_view" android:layout_centerInParent="true" android:layout_width="260dp" android:layout_height="430dp" > <ImageView android:id="@+id/img" android:src="@drawable/p1" android:scaleType="centerCrop" android:layout_width="match_parent" android:layout_height="match_parent" /> <RelativeLayout android:id="@+id/card_content" android:background="@drawable/animate_rect" android:layout_width="match_parent" android:layout_height="320dp" android:padding="15dp"> <TextView android: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"/> <TextView android: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.
<?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"> <path android:name="sharp_rect" android:fillColor="#000000" android:pathData="M 180,230 L 0,320 0,0 180,0 z" /> </vector>
下面做animate-vector drawable:
<?xml version="1.0" encoding="utf-8"?> <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/sharp_rect"> <target android:animation="@animator/to_rect" android:name="sharp_rect"/> </animated-vector>
在animated-vector里填入android:drawable=”@drawable/sharp_rect”,这是指定要产生动画的SVG。target里是需要动画的对象,这里我们的对象就是前面那个叫sharp_rect的梯形,所以name里填上它,然后animation填的是对应的动画文件。
动画用的是ObjectAnimator做的,内容如下:
<?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就行了,并设置触发函数就行了
final ImageView play = (ImageView)findViewById(R.id.icon_play); play.setOnClickListener(new View.OnClickListener() { @Override public 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的动画来源于这个博客)
赞!!!
FrameLayout点击后如何还原到原来的位置?
重新写一个,ObjectAnimator和原来的变化顺序相反:
原来的:
< ?xml version="1.0" encoding="utf-8"?>
把valueFrom和valueTo调换一下就行啦.
讲的非常好!