Material Design(三)动画实现下

写在前面的几句话

<p>
上面一篇对Touch Feedback (触摸反馈)，Reveal Effect (揭露效果)，Curved Motion (曲线运动)，View State Changes (视图状态改变)动画效果在5.0及5.0以下的实现效果进行了分析，这篇主要对于Animate View Drawables (可绘矢量动画)，Activity Transitions ( Activity 切换效果 )进行分析

一.Animate View Drawables (可绘矢量动画)

可绘制矢量图在拉伸时不会失真。AnimatedVectorDrawable类可以在可绘制矢量图上面作用动画。

通常需要在三个xml文件中定义可动的矢量图：

一个矢量图使用<vector>元素,放在res/drawable/下。

一个可动的矢量图使用<animated-vector>元素，放在res/drawable/下。

一个或更多个动画对象使用<objectAnimator>元素，放在res/anim/下。

可动矢量图可以使用<group>和<path>元素。<group>元素定义一系列路径或者子组，<path>元素定义可绘图的路径。

当你定义了一个想要作用动画的矢量可绘制图，使用android:name属性给每个group和path指定一个唯一的名字，这样你可以从动画的定义中找到他们。

vector_smile.xml

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="200dp"
    android:width="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100" >
    <path
        android:fillColor="#ff0"
        android:pathData=" M 50,50
    m -48,0
    a 48,48 0 1,0 96,0
    a 48,48 0 1,0 -96,0"/>
    <path
        android:fillColor="@android:color/black"
        android:pathData="M 35,40
    m -7,0
    a 7,7 0 1,0 14,0
    a 7,7 0 1,0 -14,0"/>
    <path
        android:fillColor="@android:color/black"
        android:pathData="M 65,40
    m -7,0
    a 7,7 0 1,0 14,0
    a 7,7 0 1,0 -14,0"/>
    <path
        android:name="mouth"
        android:strokeColor="@android:color/black"
        android:strokeWidth="4"
        android:strokeLineCap="round"
        android:pathData=" M 30,75
    Q 50,55 70,75"/>
</vector>

animatedvector_smile.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_smile">

    <target
        android:animation="@anim/anim_smile"
        android:name="mouth"/>

</animated-vector>

anim_smile.xml

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:propertyName="pathData"
    android:valueFrom="M 30,75
    Q 50,55 70,75"
    android:valueTo=" M 30,65
    Q 50,85 70,65"
    android:valueType="pathType"
    android:interpolator="@android:anim/accelerate_interpolator"/>

大家应该对pathData中的数字很感兴趣把，

这里的其实是 SVG 标准指令，规则如下：

• 代码中的 M 表示 MoveTo; l 表示 LineTo;z` 表示收尾闭合

• 矢量图path从一个图形到另一个，from 和 to 的路径必须一致：相同数量的命令和相同数量的每个命令的参数

全部的指令使用一个字母表示，如 M，l

• 指令中的逗号、空格符可以被省略，如 M 100 100 L 200 20 → M100 100L200 200

• 连续使用的相同指令可以被省略，如M 100 200 L 200 100 L -100 -200 → M 100 200 L 200 100 -100 -200

• 大写指令代码绝对坐标，小写指令代码相对坐标

• Unicode U+0046 FULL STOP (“.”) 是唯一被允许的小数点。如数字 13,000.56 是不合法的

更多有关pathData语法的信息，请参阅SVG Path 的文档参考。学好了PathData的语法，什么都能绘制的出来~！

图1 5.0可绘矢量动画效果

那么怎么在5.0版本以下实现相同的效果呢

其实SVG还是对Path的绘制，所以在5.0以下相同效果其实可以通过Canvas绘制出来

mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.YELLOW);
canvas.drawCircle(centerX, centerY, radius, mPaint);

mPaint.setColor(Color.BLACK);
canvas.drawCircle(centerX - radius / 3, centerY - radius / 3, eyesradius, mPaint);
canvas.drawCircle(centerX + radius / 3, centerY - radius / 3, eyesradius, mPaint);

mPaint.setStrokeWidth(20);
mPaint.setStyle(Paint.Style.STROKE);
mPath.reset();
mPath.moveTo(centerX - radius / 2, centerY + radius / 2);
mPath.quadTo(centerX, controlY, centerX + radius / 2, centerY + radius / 2);
canvas.drawPath(mPath, mPaint);

if (isAnim){
    if (controlY < centerY + radius){
        controlY = controlY + 2;
        invalidate();
    }
}

图2 5.0以下可绘矢量动画效果

虽然和上面的效果不是一模一样，但是完成的功能是一致的

二.Activity Transitions ( Activity 切换效果 )