Material Design(三)动画实现下

写在前面的几句话

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

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

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

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

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

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

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

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

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

vector_smile.xml

animatedvector_smile.xml

anim_smile.xml

大家应该对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 切换效果 )