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 切换效果 )

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 210,914评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 89,935评论 2 383
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,531评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,309评论 1 282
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,381评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,730评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,882评论 3 404
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,643评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,095评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,448评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,566评论 1 339
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,253评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,829评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,715评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,945评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,248评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,440评论 2 348

推荐阅读更多精彩内容