Android动画 - Vector Animation

原创 2016年06月01日 11:34:40

http://download.csdn.net/detail/cjh_android/9538068###本章内容
对于SVG,只能说熟悉,能画一些简单的图,但是复杂的就真的不行了,比如Android的小机器人,望尘莫及,只记得看到那一段段的path,真的是震惊了。本章会带一点对于SVG的一些简单的命令的知识,而这也只是为了方便对代码的理解,主要的还是对于在网上看到的许多SearchBar的Path动画,但是却没有一个简单详细具体的Demo。

SVG简介

总之,先从对SVG的介绍开始:
svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们可以直接用代码来描绘图像。

简而言之:你可以把SVG看成是Android里面Path、Cavans、Paint的XML形式,有填充,有描边(Stroke),包括颜色,尺寸这些元素都是在XML中定义的,所有的这些组成了一种图像格式,SVG可以被ImageView等各种控件作为背景、资源。

优点:可以任意放大图形显示,但绝不会以牺牲图像质量为代价;可在svg图像中保留可编辑和可搜寻的状态;平均来讲,svg文件比其它格式的图像文件要小很多,因而下载也很快。

缺点:这里的缺点也是对于Android开发而言的,那就是适配。其实这应该是Android的一致问题,SVG也是无可奈何,就拿本章的例子而言,一个搜索的SVG本意应该是 width=match_parent ,但是问题来了,对于在画SVG的时候宽高都必须是一个明确的值,那么问题就来了,不同的Android手机屏宽都是不同的。

解决办法:
适配主流机型,画出不同的SVG,这个工作量相当大,但是不失为一个办法
另一个办法比如使用hongyang大神的Android AutoLayout全新的适配方式 堪称适配终结者,使用一些百分比布局之类的。

Search bar by SVG

这里写图片描述

先看下SVG的指令
M: move to 移动绘制点
L:line to 直线
Z:close 闭合
C:cubic bezier 三次贝塞尔曲线
Q:quatratic bezier 二次贝塞尔曲线
A:ellipse 圆弧

关于这些指令我会另外开一篇博客专门用于讲述这些SVG的指令,先有个印象,这样看下面的XML方便一点。

上图SVG的XML的显示效果,详细解释下:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="150dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="150">

    <path
        android:name="search"
        android:pathData="M139.5,17.5 A7,7 0 1,1 140,17 L145,24"
        android:strokeColor="#ffffff"
        android:strokeLineCap="round"
        android:strokeWidth="1" />

    <path
        android:pathData="M145,24 L0,24z"
        android:strokeWidth="2"
        android:strokeColor="#ffffff"
        />
</vector>

width和height

这两个值规定了这个Vector的资源文件的大小,如果你使用ImageView引入这个资源,并且宽高都是 wrap_content,那么这个控件显示出来的宽高就是 Vector 自身的宽高。

viewportWidth和viewportHeight

在Demo的XML中我定义成了 150,24,首先,这个不是固定的,需要知道的,两个值其实与 width 和 height 是没有任何关系的,这两个值相当于规定了X轴和Y轴的坐标范围,哪怕我定义成了 300,48 都是一样的,就是 pathData需要 翻一倍而已。
以我拙劣的文学功底做个总结:viewportWidth和viewportHeight其实就是将Vector的起始点作为原点,画出了一个 XY的坐标轴,而你能操作的值就是 viewportWidth和viewportHeight的参数的范围。

这里写图片描述

pathData 就是路径

XML中我想要的效果是,从 139.5,17.5 这个点 横轴竖轴都以7为半径画一个圆,结束在140,17这个点,再以出发点为直线一点,另一点过145,24,画一个直线,这样就画出了一个 搜索的图。
第二个Path,就是一条直线了,这个很简单,只要从 145 ,24 到 0,24,可以作为输入框 EditText的背景看。

Demo

这里写图片描述

其实这个效果还是有些瑕疵的,比如两个path的转换动画的时间并有配合好,这里只是做个示范,那么要实现这个动画我们一步一步来:

第一步:
从图中就可以看到这个效果非常非常的Cool,恨不得把所有的动画东改过来,但是,其实可以发现国内的APP里面这种动画也非常少,甚至几乎是没有,当然如果有也坑定不是 SVG 的path动画,因为这个动画至少需要 5.0 才能支持的,而国内的手机版本比如最畅销的米四,华为荣耀系列,现在都还是4.4的Android系统。

第二部:
画出Vector资源

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="150dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="150">

    <path
        android:name="search_bar"
        android:pathData="M140,17 A7,7 0 1,1 140.5,16.5 L145,24z"
        android:strokeColor="#ffffff"
        android:strokeLineCap="round"
        android:strokeWidth="1" />

    <path
        android:name="search_line"
        android:pathData="M145,24 L0,24z"
        android:strokeColor="#ffffff"
        android:strokeLineCap="round"
        android:strokeWidth="2" />
</vector>

这里写图片描述

还有一个仅仅是搜索的vector

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="900dp"
    android:height="144dp"
    android:viewportHeight="24"
    android:viewportWidth="150">

    <path
        android:name="search"
        android:pathData="M139.5,17.5 A7,7 0 1,1 140,17 L145,24"
        android:strokeColor="#ffffff"
        android:strokeLineCap="round"
        android:strokeWidth="1" />
</vector>

这里写图片描述

第三步:
定义一个 search_bar to search_line 的动画xml
res/drawable/animator_path:

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

    <target
        android:name="search_bar"
        android:animation="@animator/anim_empty" />

    <target
        android:name="search_line"
        android:animation="@animator/anim_fill" />
</animated-vector>

定义一个 search_lineto search_bar 的动画xml
res/drawable/animator_back

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

    <target
        android:name="search_bar"
        android:animation="@animator/anim_fill" />

    <target
        android:name="search_line"
        android:animation="@animator/anim_empty" />

</animated-vector>

定义消失的动画 res/animator/anim_empty

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    android:interpolator="@android:interpolator/fast_out_slow_in"
    android:propertyName="trimPathStart"
    android:valueFrom="0"
    android:valueTo="1"
    android:valueType="floatType" />

定义显示的动画 res/animator/anim_fill

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="800"
    android:interpolator="@android:interpolator/fast_out_slow_in"
    android:propertyName="trimPathStart"
    android:valueFrom="1"
    android:valueTo="0"
    android:valueType="floatType" />

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:gravity="center"
    tools:context="cjh.vector.MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="150dp"
        android:layout_height="24dp"
        android:src="@drawable/search_bar" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="150dp"
        android:layout_height="24dp"
        android:src="@drawable/search_drawable"
        android:visibility="gone" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="150dp"
        android:layout_height="23dp"
        android:background="@null"
        android:hint=""
        android:paddingLeft="5dp"
        android:paddingTop="1dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/editText"
        android:layout_marginTop="12dp"
        android:onClick="animation"
        android:text="animation" />

</RelativeLayout>

第一个ImageView 是为了显示刚刚创建的默认情况,第二个才是真正的动画的控件。

MainActivity

public class MainActivity extends AppCompatActivity {

    private AnimatedVectorDrawable searchToLine, searchToBar;
    private ImageView imageView, imageView2;

    private boolean is_input = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        searchToLine = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.animator_path);
        searchToBar = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.animator_back);
        imageView = (ImageView) findViewById(R.id.imageView);
        imageView2 = (ImageView) findViewById(R.id.imageView2);
    }

    public void animation(View view) {
        imageView.setVisibility(View.GONE);
        imageView2.setVisibility(View.VISIBLE);
        if (!is_input) {
            imageView2.setImageDrawable(searchToLine);
            searchToLine.start();
            is_input = true;
        } else {
            imageView2.setImageDrawable(searchToBar);
            searchToBar.start();
            is_input = false;
        }
    }
}

至此,对于 Vector Animation 的基本使用就到这里了,事实上对于复杂图像的SVG还是要下很多功夫的。

源码下载

版权声明:本文为博主原创文章,未经博主允许不得转载。

矢量图VectorDrawable轻松实现箭头左右移动动画

最近在学习利用矢量图VectorDrawable实现动画,发现矢量图也很强大,很多动画效果都可以简单实现,下面就是其中一个简单箭头左右移动的动画。 下面开始实现这个动画效果1. 在res文件夹下...
  • hunterliy
  • hunterliy
  • 2016年12月12日 23:10
  • 1437

android 中vector的用法 ,坑 ,怎么替代,关于这几方面的一些看法

在安卓的发展历程中,由于设备碎片化的原故,谷歌在app中图标的适配上做出一步又一步的改进, 跟我一起走一遍,怎么用一个图片,解决大小, 颜色的问题。...
  • qq_15545283
  • qq_15545283
  • 2016年05月21日 21:30
  • 20494

Android中vector用法详解

在安卓的发展历程中,由于设备碎片化的原故,谷歌在app中图标的适配上做出一步又一步的改进,大体有这么几个阶段: 首先有了drawable-(m|h|xh|xxh|xxxh)dpi 自android s...
  • tiankongcheng6
  • tiankongcheng6
  • 2017年03月09日 19:48
  • 1568

android 基础 res文件 动画anim

http://www.cnblogs.com/yc-755909659/p/4290114.html 1.Animation 动画类型 Android的animation由四种类型组成: XML中 ...
  • l331258747
  • l331258747
  • 2016年10月18日 15:43
  • 2284

Android中常用的两种动画写法

在Android中常用的两种动画,一种是补间动画(Tween Animation),另一种是帧动画(Frame Animation)。用一张图片实现的是补间动画;定义给出两个关键帧,通过一些算法将给定...
  • you__are_my_sunshine
  • you__are_my_sunshine
  • 2016年08月03日 23:04
  • 279

安卓动画系列之一,妙用Interpolator 快速实现弹球效果

一直很想写个动画系列,把自己学过的东西好好总结一下,无奈最近都在看源码忙的焦头烂额.现在先写个开篇,以后继续补充动画相关的文章.作为引起兴趣, 这里弹球效果作为一个小例子,顺便讲讲Animation动...
  • stzy00
  • stzy00
  • 2015年01月27日 20:58
  • 2718

Android Animation各种动画详解

1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今天来一发Android应用的各种Animation大集合。英文厉害的请直接移步参考A...
  • wangbaochu
  • wangbaochu
  • 2015年10月28日 00:22
  • 4332

android vector矢量图画图详解

SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写。在xml文件中的标签是,画出的图形可以像一般的图片资源使用,例子如下: vector xmlns:a...
  • z1765887945
  • z1765887945
  • 2016年05月08日 15:09
  • 3205

Android Animation动画的淡入淡出、旋转、缩放和移动

Android Animation Contents: Animations Tween Animations AnimationSet Interpolator Frame-By-...
  • yule12345
  • yule12345
  • 2014年12月15日 10:53
  • 2667

android 动画卡顿分析工具

Android应用性能优化之分析工具[二]   Android应用性能优化之分析工具   上一次记录了解决过度绘制的过程,这一次,想先弄清个概念性的东西,就是如何判断顺不顺畅?   这东西其实最...
  • tyh123456789
  • tyh123456789
  • 2014年09月02日 09:40
  • 3781
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android动画 - Vector Animation
举报原因:
原因补充:

(最多只允许输入30个字)