Android 5.0新特性，共享元素及RevealAnimator实现华丽的详情页面

背景

本博是学习大神代码的学习笔记。

在github上看到，大神做出了一个华丽的转场效果，使用了Silde,依次将子控件滑出界面（在上一篇里面，已经学习了怎么使用），然后将列表上item的某一个元素共享，使之成为下个页面的焦点，再执行一RevealAnimator。

本博将试图从用户体验和交互效果上来说明，良好的过渡动画和交互的重要性。

知识点

1.元素共享。没有接触的，可以查看我的一片博客，或者是官方文档。

2.属性动画。 view的animate()方法，执行属性动画

3.揭露动画RevealAnimator。

4.Transtion之ChangeBound 以及arcMotion制定运动的曲线

5.矢量图Vector初识

代码

1.在前面的博客中，学习了如何制定一个共享元，在这里我们可以看到还有另外一种方式，指定共享元素；

ActivityOptionsCompat  aop=ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this,
view.findViewById(R.id.imageView),**"123"**);
//指定imageView为共享元素，注意“123”,必须和SecondActivity**中共享的元素名称一致**，此处共享的元素可以是多个，多个元素，查看makeSceneTransitionAnimation的重载方法
Intent   intent=new Intent(getApplicationContext(),SecondActivity.class);
//启动          ActivityCompat.startActivity(MainActivity.this,intent,aop.toBundle());

我们看到，将共享的View添加到ActivityOptionsCompat 中，同时指定一个name,”123”,这个name必须和跳转到的页面共享元素的name相同，这就是一般的共享元素的方式，今天在大神的代码中，又看到了另外一种共享的方式：

同样的还是指定一个共享元素，只是这个name是通过控件的 android:transitionName=”123” 属性指定

Intent i = new Intent(MainActivity.this, target);
ActivityOptionsCompat transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(this,pairs);

startActivity(i, transitionActivityOptions.toBundle());

<ImageView
android:layout_margin="10dp"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="@android:color/holo_purple"
android:transitionName="123"
android:id="@+id/imageView2" />

2.View Animate()方法，实现漂亮的动画效果

我们直接上代码里面的方法：

<item name="android:alpha">0</item>
<item name="android:scaleX">0.5</item>
<item name="android:scaleY">0.5</item>

private void setUpButton() {
LinearLayout  ll= (LinearLayout) findViewById(R.id.content_view);
for(int i=0;i<ll.getChildCount();i++){
ll.getChildAt(i).
animate().
setStartDelay(100+i*100).//设置显示的延迟，这个是依次显示的关键
alpha(1).
scaleX(1).
translationY(10).
scaleY(1).start();
}
}

上面这段，xml指定了，子控件的初始动画值

这个方法，实现的功能是：依次，放大并淡入淡出，显示一组控件；

3.RevealAnimator

private void animateRevealShow(View viewRoot) {
int cx = (viewRoot.getLeft() + viewRoot.getRight()) / 2;
int cy = (viewRoot.getTop() + viewRoot.getBottom()) / 2;
int finalRadius = Math.max(viewRoot.getWidth(), viewRoot.getHeight());
/*
viewRoot 构造一个揭露动画，第一个参数为使用该动画的布局
cx  动画的中心点，x坐标
cy,y坐标
startRadius 开始半径
finalRadius 结束半径
，*/
Animator anim = ViewAnimationUtils.createCircularReveal(viewRoot, cx, cy, 0, finalRadius);
viewRoot.setVisibility(View.VISIBLE);
anim.setDuration(500);
anim.setInterpolator(new AccelerateInterpolator());
anim.start();
}

4.我们在指定了一个转场动画,changeBound

final ChangeBounds  ts=new ChangeBounds();
ts.setPathMotion(new ArcMotion());
//这是ArcMotion给我们起始点和终点，之间，一个曲线效果，如果不指定为直线
getWindow().setSharedElementEnterTransition(ts);

5矢量图svg

使用矢量图，对于Android来说，无疑是有很多好处，首先它不占空间资源，只需要一个svg资源文件，就可以适配所有机型。这个是不是很吊，但是，svg文件的编辑比较复杂，在Android中也只是轻量级的支持。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="1000dp"
android:height="4000dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
/**
vector 标签下有android:width和android:height属性，这两个属性是必填的，定义矢量图形的绝对大小，虽然说是矢量图形随意缩放，但是不能说这里不定义宽高直接到要设置到的目标控件上定义控件的宽高，这样是不允许的，一定要设置这个绝对宽高，要不然会报错。
然后还有个android:viewportHeight和android:viewportWidth属性，这个是画布宽高，也是必填的，定义Path路径的时候就必须在这个画布大小里去绘制，超出画布就显示不出来了,就像下面的path标签里，绘制路径，取值一定是要在[0,24.0]里。
**/
<path
android:fillColor="#FF000000"
android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
//path 里面指定了图形的形状颜色等。在延伸中，我们为来研究这个svg，path中 的pathData是如何编写的.
</vector>

延伸

1.svg矢量图编辑语法

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置

L = lineto(L X,Y) ：画直线到指定的坐标位置

H = horizontal lineto(H X)：画水平线到指定的X坐标位置

V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置

C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线

S = smooth curveto(S X2,Y2,ENDX,ENDY)

Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线

T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射

A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线

Z = closepath()：关闭路径

上面 rector中的path

<path
android:fillColor="#FF000000"
android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>

要画的图形是这样的：

1.将画笔移动到，绝对的坐标12,12

2.将画笔再相对12，12点移动到-10，0点

3开启画圆弧命令：圆弧，水平半径10，竖直半径10，水平方向夹角0，大弧度，顺时针，终点（相对画布起点）20,0；后面也是一个圆弧，注意，终点坐标是相对于是前面那个半圆的终点

总共有7个参数，如下：

A RX,RY,XROTATION,FLAG1,FLAG2,X,Y

RX,RY指所在椭圆的半轴大小

XROTATION指椭圆的X轴与水平方向顺时针方向夹角，可以想像成一个水 平的椭圆绕中心点顺时针旋转XROTATION的角度。

FLAG1只有两个值，1表示大角度弧线，0为小角度弧线。

FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针

X,Y为终点坐标

结果图像是这样的：



svg相关文档

demo下载

要源码戳这里