写在前面的几句话
<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的语法,什么都能绘制的出来~!
那么怎么在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();
}
}
虽然和上面的效果不是一模一样,但是完成的功能是一致的