澳门新葡萄京娱乐场 53

澳门新葡萄京娱乐场矢量图动画VectorDrawable

新春假日刚到,就尽快抽取点时间写点本事文章,那篇作品已经酝酿了很短日子了。我们常常可以瞥见超多兼有炫酷动漫的App,况兼给人认为有所高逼格的气息,自从谷歌(GoogleState of Qatar更新Android 5.0来讲,Android世界变的相当美妙绝伦,本篇重要教学Android5.0/6.0
未来完结炫酷动漫的新技能。有矢量图动漫VectorDrawable,静态VectorDrawable,动态VectorDrawable,轨迹动漫,路径转换动漫,并建议了现阶段大面积的后生可畏都部队分宽容性难点。干货满满。

转载:
郭朝的博客地址:
http://blog.csdn.net/smartbetter

源码
SVG和Vector的差异

学学矢量图动漫以前,大家要求先想起一下性质动画的知识点,动态矢量图动漫是急需整合属性动漫来落到实处的。

小编们平日能够望见比非常多具备绚烂动漫的App,而且给人感到有所高逼格的气息,自从谷歌更新Android
5.0的话,Android世界变的不行各种各样,本篇主要教师 Android5.0/6.0
将来落成绚烂动漫的新本领。

  • SVG——前端中动用,是豆蔻梢头套语准绳范
  • Vector——在Android中使用
  • Vector只兑现了SVG语法的Path标签

1.属性动漫框架

动用动态的VectorDrawable需求整合 属性动画来完成,所以下边先想起一下品质动漫。
Android 3.0
中参加的新的习性动漫系统。那个新的动漫系统使得其余对象做其余项指标属性的卡通片都变得轻便,富含这些在
Android 3.0 中加入 View 中的新属性。在 Android 3.1中,又参加了部分工具类使得 View 对象做属性动漫尤其轻易。

观念木偶剧(Animation卡塔尔国是系统相连调用onDraw方法重绘分界面以落到实处动漫效果,不合乎做交互作用动漫效果,只适用于做展示动漫;而属性动漫(Animator卡塔尔国则是操作叁性子质的get、set方法去真实的退换叁特性子。这里只针对属性动漫(Animator卡塔尔(قطر‎进行求证。

介意:属性动漫在Google提供的API德姆o中早本来就有相当的多的案例达成,提出多加揣摩学习。

有矢量图动漫VectorDrawable,静态VectorDrawable,动态VectorDrawable,轨迹动漫,路线转变动漫,并提议了方今左近的有些宽容性难点。干货满满。

Vector常用语法

1.ObjectAnimator的使用

天性动漫中最简便易行最常用的就是ObjectAnimator:

1)效率单个属性的卡通达成:

/**
  * 参数1: 操纵的控件
  * 参数2: 操纵的属性, 常见的有偏移translationX、translationY, 绝对值x、y, 3D旋转rotation、
  *     水平竖直方向旋转rotationXrotationY, 水平竖直方向缩放scaleXscaleX,透明度alpha
  * 参数3,4: 变化范围
  * setDuration: 设置显示时长
  */
ObjectAnimator.ofFloat(imageView, "translationX", 0F, 200F).setDuration(1000).start();

澳门新葡萄京娱乐场 1

如出风华正茂辙属性动画也得以在res/animator文件夹下实行创办anim.xml并布署(多少个objectAnimator能够用set举行包装):

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:androd="http://schemas.android.com/apk/res/android"
    androd:duration="1000"
    androd:propertyName="translationX"
    androd:valueFrom="0F"
    androd:valueTo="200F"
    androd:valueType="floatType">
</objectAnimator>

这段XML实现的效应和大家刚刚通过代码来落实的三结合卡通的效果与利益是大同小异的,种种参数的意义都十二分了然,相信大家都是意气风发看就懂,我就不再生机勃勃大器晚成解释了。

XML文件是编写好了,那么大家如何在代码中把公文加载进来并将动漫运行呢?只需调用如下代码就能够:

Animator animator = AnimatorInflater.loadAnimator(context, R.animator.anim);
animator.setTarget(view);
animator.start();

调用AnimatorInflater的loadAnimator来将XML动漫文件加载进来,然后再调用setTarget(State of Qatar方法将那几个动画设置到某三个对象方面,最后再调用start(State of Qatar方法运营动漫就足以了,正是如此轻易。

2)同有的时候间功能三个性情的动漫完成:

装有动漫同期播放:

ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageView, "translationX", 0F, 200F);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(imageView, "translationY", 0F, 200F);
AnimatorSet set = new AnimatorSet();
set.playTogether(animator1, animator2);
set.setDuration(1000).start();

澳门新葡萄京娱乐场 2

不无动漫按顺序播放:

ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageView, "translationX", 0F, 200F);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(imageView, "translationY", 0F, 200F);
AnimatorSet set = new AnimatorSet();
set.playSequentially(animator1, animator2);
set.setDuration(1000).start();

澳门新葡萄京娱乐场 3

某些还要播报有的按梯次:

ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageView, "translationX", 0F, 200F);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(imageView, "translationY", 0F, 200F);
ObjectAnimator animator3 = ObjectAnimator.ofFloat(imageView, "rotation", 0F, 360F);
AnimatorSet set = new AnimatorSet();
set.play(animator1).with(animator2);//同时
set.play(animator3).after(animator1);//之后, 另外还有before之前
set.setDuration(1000).start();

澳门新葡萄京娱乐场 4

3)属性动漫的了断监听事件

animator.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
    }
});

上学矢量图动漫此前,大家须要先想起一下性质动漫的知识点,动态矢量图动漫是内需整合属性动漫来完成的。

  • M = moveto(M X,Y卡塔尔:将画笔移动到制订的坐标地点
  • L = lineto(L X,Y卡塔尔国:画直线到钦点的坐标地方
  • Z = closepath(State of Qatar:关闭路径
  • H = horizontal lineto(H X卡塔尔(قطر‎:画水平线到钦定的X坐标地方
  • V = vertical lineto(V Y卡塔尔:画垂直线到钦赐的Y坐标地点

2.ValueAnimator的使用

ValueAnimator不会作用于任何壹本本性,简单的话,它正是“数值爆发器”,实际上在质量动漫中,发生每一步的具体动漫完成效果与利益都以通过ValueAnimator总括出来的。ObjectAnimator是世袭自ValueAnimator的,ValueAnimator并未ObjectAnimator使用的广阔。
ValueAnimator通过动漫已经接轨的小运和总时间的比率发生多个0~1点时间因子,有了这么的岁月因子,经过相应的调换,就能够依照startValue和endValue来生成中等相应的值。

1)展现ValueAnimator生成出来的数值(这里未有一点名插值器,暗中同意线性增进):

ValueAnimator animator = ValueAnimator.ofInt(0, 100);
animator.setDuration(5000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        Integer value = (Integer) valueAnimator.getAnimatedValue();
        textView.setText(""+value);
    }
});
animator.start();

澳门新葡萄京娱乐场 5

2)自定义数值生成器

ValueAnimator animator = ValueAnimator.ofObject(new TypeEvaluator() {
    /**
     * 通过重写evaluate方法返回各种各样的值
     * @param fraction 时间因子 0到1之间变化到数值
     * @param startValue
     * @param endValue
     * @return
     */
    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {
        return null;
    }
});

1

相关网址

SVG编辑器
SVG转VectorDrawable(需翻墙)
iconfont

3.属性动漫常用方法类总结

ValueAnimatorObjectAnimator
AnimatorUpdateListenerAnimatorListenerAdapter   做监听器的
PropertyValuesHolderAnimatorSet    控制动态集合的显示效果、顺序、流程的
TypeEvaluators          值计算器
Interpolators           插值器

Interpolator图示:

澳门新葡萄京娱乐场 6

这么些常用 方法类官方API 都有详尽表明,提出多读书
官方API文书档案。

上面正式启幕 矢量图动漫 的付出:

属性动漫框架

使用VectorDrawable的好处

二种格式的体积比较
从下图能够阅览从.png到.svg到再到Android能够动用的VectorDrawable容积成倍数减小。况兼动用VectorDrawable能够毫无考虑缩放,让图像完全保真。

澳门新葡萄京娱乐场 7

image.png

2.矢量图动漫片(VectorDrawable)

Vector(矢量图) 对比 Bitmap(位图)
绘制效率 Vector依赖于CUP计算,适合图像简单的情况。Bitmap可借助于GPU加速,适合图像复杂的情况。
适用情况 Vector适用于ICON、Button、ImageView的小图片,或者需要动画效果时。Bitmap由于在GPU中有缓存功能,所以Bitmap不能做频繁的重绘。
加载速度 SVG快于PNG,但PNG有硬件加速,平均下来加载速度的提升弥补了绘制的速度缺陷。

VectorDrawable,矢量图动漫。使用必要丰盛包容库,在app的build.gradle文件有关节点下增添:

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}
dependencies {
    compile 'com.android.support:appcompat-v7:25.1.0'//23.2及以上
}

利用动态的VectorDrawable要求组合 属性动画来促成,所以上面先想起一下性质动漫。

生成VectorDrawable

静态的VectorDrawable使用
1.项目中drawable文件夹右键new>Vector Asset
生成的xml文件中android:viewportHeight="1024.0"(定义图像被分开的百分比大小卡塔尔国那个天性代表,把稳固大小的矢量图均匀的分为1024等份。前面写
android:pathData的时候,就以1024为基线坐标,并不是以切实的大小数值去做Logo。那样做的益处是,要是说VectorDrawable大小有变动,大家只需求通过viewportHeight去做映射就足以了,而无需改良pathData

澳门新葡萄京娱乐场,3.SVG和Vector

SVG是生机勃勃套语准则范,在前端中利用。Vector只兑现了SVG语法的帕特h标签(为了增加解析功用),在Android中运用。

Vector的语法通过字母和数字的结缘来说述一个路线,不一样字母则意味着分裂含义,举例:

M = moveto(M X,Y): 将画笔移动到指定的坐标位置
L = lineto(L X,Y): 画直线到指定的坐标位置
Z = closepath(): 关闭路径

Vector还提供了有的封装好的措施:

H = horizontal lineto(H X): 画水平线到指定的X坐标位置
V = vertical lineto(V Y): 画垂直线到指定的Y坐标位置

举例说上面这一个 Vector Asset 代表二个青绿的圆锥形:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:name="square"
        android:fillColor="#FF000000"
        android:pathData="M10,10 L20,10 L20,20 L10,20 z"/>
</vector>

解释:

1)如上是各类以 M10,10 -> L20,10 -> L20,20 -> L10,20 -> z
进行绘图;
2)width/height 代表vector的尺寸;viewportWidth/viewportHeight
则意味把vector均匀分为24整份,pathData就根据那边的行业内部来绘制。

Android 3.0
中投入的新的个性动漫系统。这么些新的动漫片系统使得其余对象做任何项目标属性的动漫都变得轻便,满含那些在
Android 3.0 中投入 View 中的新属性。在 Android 3.1中,又参预了有个别工具类使得 View 对象做属性动漫特别便于。

连串中使用VectorDrawable

gradle中添加vectorDrawables.useSupportLibrary = true

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_home"
        />

对于Button这种富含状态的控件,不能够一向运用VectorDrawable,但是能够通过运用<selector>,来让button控件调用。要留神的是急需在布局文件对应的Activity中增添如下代码:

static {
        AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
    }

动态的VectorDrawable使用
布置动漫黏合剂——animated-vector:让属性动漫效果到VectorDrawable中

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/arrow">
    <target
        android:animation="@animator/anim_left"    //对应的动画
        android:name="left"/>       //VectorDrawable中group的名字
    <target
        android:animation="@animator/anim_right"
        android:name="right"/>
</animated-vector>

VectorDrawable的xml文件中path要用group标签套上,不然效果会出不来

<group android:name="left">
        <path
            android:fillColor="#FF000000"
            android:pathData="M9.01,14L2,14v2h7.01v3L13,15l-3.99,-4v3z"/>
    </group>

    <group android:name="right">
        <path
            android:fillColor="#FF000000"
            android:pathData="M14.99,13v-3L22,10L22,8h-7.01L14.99,5L11,9l3.99,4z"/>
    </group>

4.使用静态的VectorDrawable

在像ImageView、ImageButton那样的控件中央银行使是极度轻便的:

<!-- 注意:这里用的是srcCompat -->
app:srcCompat="@drawable/vector_image"

假若要在Button这种带点击效果的控件中应用,则须要通过selector来进展安装,并在对应Activity中展开下边包车型客车安装:

static {
    AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}

观念木偶剧(Animation卡塔尔是系统不断调用onDraw方法重绘分界面以得以完结动漫效果,不合乎做人机联作动漫效果,只适用于做呈现动漫;而属性动漫(AnimatorState of Qatar则是操作叁性格质的get、set方法去真正的转移一个本性。这里只针对属性动漫(Animator卡塔尔国举办求证。

兑现搜索框与轨道动漫

澳门新葡萄京娱乐场 8

卡通分为横线bar和突镜search俩部分
亟需修改androd:propertyName="trimPathStart"属性
androd:valueFrom="0" androd:valueTo="1"
情趣是截取的路子从0%到百分百

然后选取动漫片粘附剂animated-vector就能够

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    androd:duration="1000"
    android:propertyName="trimPathStart"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:valueFrom="0"
    android:valueTo="1"
    android:valueType="floatType">
</objectAnimator>

5.采用动态的VectorDrawable

这里要求 结合 属性动漫 来兑现动态的VectorDrawable效果:

1)创建VectorDrawable文件 arrow.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <group android:name="left">
        <path
            android:fillColor="#FF000000"
            android:pathData="M6,10c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2z"/>
    </group>
    <group android:name="right">
        <path
            android:fillColor="#FF000000"
            android:pathData="M18,10c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2z"/>
    </group>
</vector>

Android Studio 的 Preview窗口突显效果如下:

澳门新葡萄京娱乐场 9

2)为VectorDrawable创造属性动漫:

侧边小球的属性动画 anim_left.xml 如下:

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:androd="http://schemas.android.com/apk/res/android"
    androd:duration="1000"
    androd:interpolator="@android:interpolator/overshoot"
    androd:propertyName="translateX"
    androd:repeatCount="infinite"
    androd:repeatMode="reverse"
    androd:valueFrom="0"
    androd:valueTo="10"
    androd:valueType="floatType">
</objectAnimator>
<!--
    duration="1000"          持续时间/毫秒
    interpolator             修饰动画效果,定义动画的变化率(加速,减速,重复,弹跳)
    propertyName="translateX"属性名(还有前面回顾属性动画提到的属性,另外还有颜色渐变fillColor/轨迹绘制trimPathStart)
    repeatCount="infinite"   无限次
    repeatMode="reverse"     重复模式:循环使用
    valueFrom="0"            起始值
    valueTo="10"             结束值
    valueType="floatType"    变化值的类型:浮点型变化
 -->

右边手小球的性质动漫 anim_right.xml 如下:

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:androd="http://schemas.android.com/apk/res/android"
    androd:duration="1000"
    androd:interpolator="@android:interpolator/overshoot"
    androd:propertyName="translateX"
    androd:repeatCount="infinite"
    androd:repeatMode="reverse"
    androd:valueFrom="0"
    androd:valueTo="-10"
    androd:valueType="floatType">
</objectAnimator>

3)下来我们供给布置动画粘连剂
animated-vector(arrow_anim.xml),让属性动漫效果于VectorDrawable:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/arrow">
    <target
        android:animation="@animator/anim_left"
        android:name="left"/>
    <target
        android:animation="@animator/anim_right"
        android:name="right"/>
</animated-vector>

4)粘附到后生可畏道从今未来,我们就可以在Activity的Layout文件中援用了:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="45dp"
        app:srcCompat="@drawable/arrow_anim"
        android:onClick="anim"/>
</RelativeLayout>

5)在Activity中增添点击事件anim:

public void anim(View view) {
    ImageView imageView = (ImageView) view;
    Drawable drawable = imageView.getDrawable();
    if (drawable instanceof Animatable) {
        ((Animatable) drawable).start();
    }
}

到此,动态的VectorDrawable就编写实现了,大家运路程序,点击ImageView,现身了如下的效应:

澳门新葡萄京娱乐场 10

有木有超赞。

只顾:属性动漫在Google提供的API德姆o中早原来就有相当多的案例完结,建议多加揣摩学习。

动态VectorDrawable的宽容性

向下宽容难点
Path Morphing——路线转变动漫,在Android pre-L版本下是力不能支利用的
Path Interpolation——路线插值器,在Android
pre-L版本只可以使用系统的插值器,无法自定义
开辟进取宽容难题
Path Morphing——路径转换动漫,在Android L版本以上亟待动用代码配置
抽出string包容难题
不支持从Strings.xml中读取<PahtData>

6.VectorDrawable兑现轨道动漫

轨道动漫关键的布局正是 objectAnimator 中
androd:propertyName=”trimPathStart” 属性。

1)创建VectorDrawable文件 path.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="500"
    android:viewportWidth="500">
    <group
        android:scaleX="5.0"
        android:scaleY="5.0">
        <path
            android:name="start"
            android:pathData="M 50.0,90.0 L 82.9193546357,27.2774101308 L 12.5993502926,35.8158045183 L 59.5726265715,88.837672697 L 76.5249063296,20.0595700732 L 10.2916450361,45.1785327898 L 68.5889268818,85.4182410261 L 68.5889268818,14.5817589739 L 10.2916450361,54.8214672102 L 76.5249063296,79.9404299268 L 59.5726265715,11.162327303 L 12.5993502926,64.1841954817 L 82.9193546357,72.7225898692 L 50.0,10.0 L 17.0806453643,72.7225898692 L 87.4006497074,64.1841954817 L 40.4273734285,11.162327303 L 23.4750936704,79.9404299268 L 89.7083549639,54.8214672102 L 31.4110731182,14.5817589739 L 31.4110731182,85.4182410261 L 89.7083549639,45.1785327898 L 23.4750936704,20.0595700732 L 40.4273734285,88.837672697 L 87.4006497074,35.8158045183 L 17.0806453643,27.2774101308 L 50.0,90.0Z"
            android:strokeColor="#000000"
            android:strokeWidth="2"/>
    </group>
</vector>

Android Studio 的 Preview窗口呈现效果如下:

澳门新葡萄京娱乐场 11

2)为VectorDrawable创立属性动漫:

天性动漫 anim_path.xml 如下:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:androd="http://schemas.android.com/apk/res/android">
    <objectAnimator
        androd:duration="10000"
        androd:propertyName="trimPathStart"
        androd:repeatCount="infinite"
        androd:repeatMode="reverse"
        androd:valueFrom="1"
        androd:valueTo="0"
        androd:valueType="floatType">
    </objectAnimator>
    <objectAnimator
        androd:duration="10000"
        androd:propertyName="strokeColor"
        androd:repeatCount="infinite"
        androd:repeatMode="reverse"
        androd:valueFrom="@android:color/holo_red_dark"
        androd:valueTo="@android:color/holo_blue_dark"
        androd:valueType="colorType">
    </objectAnimator>
</set>

3)下来我们供给计划动漫粘附剂
animated-vector(path_anim.xml),让属性动漫效果于VectorDrawable:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/path">
    <target
        android:animation="@animator/anim_path"
        android:name="start"/>
</animated-vector>

4)粘连到多头今后,大家就可以在Activity的Layout文件中引用了:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:srcCompat="@drawable/path_anim"
        android:onClick="anim"/>
</RelativeLayout>

5)在Activity中增添点击事件anim:

public void anim(View view) {
    ImageView imageView = (ImageView) view;
    Drawable drawable = imageView.getDrawable();
    if (drawable instanceof Animatable) {
        ((Animatable) drawable).start();
    }
}

到此,动态的VectorDrawable就编写完结了,大家运路程序,点击ImageView,现身了如下的职能:

澳门新葡萄京娱乐场 12

(1)ObjectAnimator的使用

渠道动漫转变效果

澳门新葡萄京娱乐场 13

修改androd:propertyName="pathData"属性,把四个形状的pathData值,放到android:valueFromandroid:valueTo内部,然后利用动漫片黏合剂就可以。
Android5.0以下的设备,不可能选拔这么些动漫。

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:propertyName="pathData"
    android:valueFrom="M 48,54 L 31,42 15,54 21,35 6,23 25,23 32,4 40,23 58,23 42,35 z"
    android:valueTo="M 48,54 L 31,54 15,54 10,35 6,23 25,10 32,4 40,10 58,23 54,35 z"
    android:valueType="pathType">
</objectAnimator>

7.VectorDrawable兑现路径转换动漫

轨道动漫关键的结构正是 objectAnimator 中 androd:propertyName=”pathData”

androd:valueType=”pathType”属性。这里大家落到实处五角星向五边形的转移动漫。

1)创立五角星VectorDrawable文件 fivestar.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="120dp"
    android:height="120dp"
    android:viewportHeight="64"
    android:viewportWidth="64">
    <group>
        <path
            android:name="star"
            android:fillColor="#22e171"
            android:pathData="M 48,54 L 31,42 15,54 21,35 6,23 25,23 32,4 40,23 58,23 42,35 z"
            android:strokeColor="#000000"
            android:strokeWidth="1"/>
    </group>
</vector>

Android Studio 的 Preview窗口突显效果如下:

澳门新葡萄京娱乐场 14

2)为VectorDrawable成立属性动漫:

五角星的质量动漫 anim_fivestar.xml 如下:

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:androd="http://schemas.android.com/apk/res/android"
    androd:duration="3000"
    androd:propertyName="pathData"
    androd:valueFrom="M 48,54 L 31,42 15,54 21,35 6,23 25,23 32,4 40,23 58,23 42,35 z"
    androd:valueTo="M 48,54 L 31,54 15,54 10,35 6,23 25,10 32,4 40,10 58,23 54,35 z"
    androd:valueType="pathType">
</objectAnimator>

3)下来大家需求配置动漫黏合剂
animated-vector(fivestar_anim.xml),让属性动漫效果于VectorDrawable:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/fivestar">
    <target
        android:animation="@animator/anim_fivestar"
        android:name="star"/>
</animated-vector>

4)黏合到联合未来,大家就能够在Activity的Layout文件中援引了:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:srcCompat="@drawable/fivestar_anim"
        android:onClick="animL"/>
</RelativeLayout>

5)在Activity中加多点击事件anim:

/**
  * 指该方法适用Android版本大于等于Android L
  * @param view
  */
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void animL(View view) {
    ImageView imageView = (ImageView) view;
    AnimatedVectorDrawable drawable = (AnimatedVectorDrawable) getDrawable(R.drawable.fivestar_anim);
    imageView.setImageDrawable(drawable);
    if (drawable != null) {
        drawable.start();
    }
}

那边的点击事件和前边介绍过的略有分化,必要思索到VectorDrawable达成路线调换动漫的宽容性难点,故路线调换动漫方今设有包容性难点。不可能在4.X本子运转,那点特别注意。可是大家同样期望谷歌能够在继续版本中优化路线转变动漫,提升宽容性。

到此,动态的VectorDrawable就编写完成了,我们运路程序,点击ImageView,现身了如下的法力:

澳门新葡萄京娱乐场 15

本性动漫中最简便最常用的正是ObjectAnimator:

8.动态VectorDrawable的宽容性难题

1)作用单个属性的动漫实现:

1.向下包容难题

1)路线调换动漫(Path Morphing)
在Android pre-L版本下是无计可施利用的,比方将圆形转换到三角形的动漫。

2)路线插值器(Path Interpolation)
在Android
pre-L版本只可以使用系统的插值器(通常景观下,系统提供的27种插值器已经丰盛我们使用了),不能自定义。

澳门新葡萄京娱乐场 16

2.向上宽容难题

1)路线转变动画(Path Morphing)
在Android L版本以上急需接纳代码配置。

澳门新葡萄京娱乐场 17

3.收取string宽容难点

不援助从String.xml中读取

<PathData>

再正是这里也指望谷歌能够在背后的版本中期维修复这个动态VectorDrawable的宽容性难题。

同风流罗曼蒂克属性动画也足以在res/animator文件夹下举办创办anim.xml并配备(三个objectAnimator能够用set实行李包裹装):

澳门新葡萄京娱乐场 18

这段XML完成的功用和我们刚刚通过代码来促成的重新整合卡通的效率是一模二样的,各个参数的含义都万分轮理货公司解,相信我们都以往生可畏看就懂,小编就不再风流潇洒朝气蓬勃解释了。

XML文件是编写制定好了,那么大家怎么样在代码中把公文加载进来并将动画运营呢?只需调用如下代码就能够:
Animator animator = AnimatorInflater .loadAnimator(context,
R.animator.anim);animator.setTarget(view);animator.start();

调用AnimatorInflater的loadAnimator来将XML动漫文件加载进来,然后再调用setTarget(卡塔尔方法将以此动漫设置到某多少个对象方面,最后再调用start(卡塔尔国方法运维动漫就足以了,正是那样轻巧。

2)同一时候成效多个属性的动漫片达成:

享有动漫同有的时候间播放:

澳门新葡萄京娱乐场 19

澳门新葡萄京娱乐场 20

负有动漫按顺序播放:

澳门新葡萄京娱乐场 21

澳门新葡萄京娱乐场 22

局地还要播报有的按梯次:

澳门新葡萄京娱乐场 23

澳门新葡萄京娱乐场 24

3)属性动画的终止监听事件

澳门新葡萄京娱乐场 25

(2)ValueAnimator的使用

ValueAnimator不会功用于此外四个属性,轻易的话,它便是“数值发生器”,实际上在品质动漫中,发生每一步的实际动漫完成效果与利益都以经过ValueAnimator总括出来的。

ObjectAnimator是持续自ValueAnimator的,ValueAnimator并从未ObjectAnimator使用的大范围。
ValueAnimator通过动漫已经三番五次的日子和总时间的比率发生二个0~1点时间因子,有了那般的光阴因子,经过相应的更改,就能够依赖startValue和endValue来生成中等相应的值。

1)呈现ValueAnimator生成出来的数值
(这里未有一点点名插值器,私下认可线性增加):

澳门新葡萄京娱乐场 26

澳门新葡萄京娱乐场 27

2)自定义数值生成器


澳门新葡萄京娱乐场 28

(3)属性动漫常用方法类总结

ValueAnimatorObjectAnimatorAnimatorUpdateListenerAnimatorListener艾达pter
做监听器的PropertyValuesHolderAnimatorSet
调节动态集合的显得效果、顺序、流程的TypeEvaluators 值计算器Interpolators
插值器

Interpolator图示:

澳门新葡萄京娱乐场 29

那么些常用 方法类官方API 都有详实表达,建议多读书 官方API文档。
https://developer.android.google.cn/reference/android/animation/package-summary.html

下边正式开班 矢量图动画 的开辟:

2

矢量图动漫(VectorDrawable)

Vector(矢量图) 对比 Bitmap(位图)

制图效用

Vector正视于CUP总计,符合图像轻易的动静。
Bitmap可依赖于GPU加快,切合图像复杂的图景。

适用情况

Vector适用于ICON、Button、ImageView的小图片,
只怕须要动漫效果时。Bitmap由于在GPU中有缓存作用,
之所以Bitmap不能够做往往的重绘。

加载速度

SVG快于PNG,但PNG有硬件加快,平
均下来加载速度的晋级弥补了绘图的快慢缺欠。

VectorDrawable,矢量图动漫。使用须求增多宽容库,在app的build.gradle文件有关节点下增加:

澳门新葡萄京娱乐场 30

3

SVG和Vector

SVG是生机勃勃套语法标准,在前边多当中运用。Vector只兑现了SVG语法的Path标签(为了抓实深入分析成效),在Android中央银行使。

Vector的语法通过字母和数字的组合来叙述贰个路径,分化字母则表示区别含义,比方:

M = moveto(M X,YState of Qatar: 将画笔移动到钦命的坐标地点L = lineto(L X,Y卡塔尔(قطر‎:
画直线到钦赐的坐标地方Z = closepath(State of Qatar: 关闭路线

Vector还提供了部分封装好的不二秘籍:

H = horizontal lineto(H X卡塔尔国: 画水平线到钦点的X坐标地方V = vertical
lineto(V YState of Qatar: 画垂直线到钦定的Y坐标地方

比如说上边那么些 Vector Asset 代表二个浅黄的长方形:

澳门新葡萄京娱乐场 31

解释:
1)如上是逐个以 M10,10 -> L20,10 -> L20,20 -> L10,20 -> z
举行绘图; 2)width/height
代表vector的大小;viewportWidth/viewportHeight
则象征把vector均匀分为24整份,pathData就依据那边的标准来绘制。

4

利用静态的VectorDrawable

在像ImageView、ImageButton那样的控件中央银行使是特别轻松的:

app:srcCompat=”@drawable/vector_image”

若是要在Button这种带点击效果的控件中应用,则须要经过selector来实行安装,并在对应Activity中开启上面包车型地铁安装:
static { AppCompatDelegate .setCompatVectorFromResourcesEnabled(true);}

5

行使动态的VectorDrawable

那边要求 结合 属性动漫 来兑现动态的VectorDrawable效果:

1)创建VectorDrawable文件 arrow.xml

澳门新葡萄京娱乐场 32

Android Studio 的 Preview窗口展现效果如下:

澳门新葡萄京娱乐场 33

2)为VectorDrawable创造属性动漫:


右手小球的质量动漫 anim_left.xml 如下:

澳门新葡萄京娱乐场 34

入手小球的习性动漫 anim_right.xml 如下:

澳门新葡萄京娱乐场 35

3)下来我们须求配置动画粘连剂
animated-vector(arrow_anim.xml),让属性动漫效果于VectorDrawable:


澳门新葡萄京娱乐场 36

4)粘结到一齐现在,咱们就足以在Activity的Layout文件中援用了:

澳门新葡萄京娱乐场 37

5)在Activity中增加点击事件anim:

澳门新葡萄京娱乐场 38

到此,动态的VectorDrawable就编写完结了,大家运路程序,点击ImageView,现身了之类的职能:

澳门新葡萄京娱乐场 39

有木有相当赞。

6

VectorDrawable完成轨道动漫

轨道动漫关键的布署就是 objectAnimator 中
androd:propertyName=”trimPathStart” 属性。

1)创建VectorDrawable文件 path.xml

澳门新葡萄京娱乐场 40

Android Studio 的 Preview窗口呈现效果如下:

澳门新葡萄京娱乐场 41

2)为VectorDrawable创立属性动漫:

属性动漫 anim_path.xml 如下:

澳门新葡萄京娱乐场 42

3)下来我们需求配备动画粘连剂
animated-vector(path_anim.xml),让属性动漫效果于VectorDrawable:

澳门新葡萄京娱乐场 43

4)粘连到一块之后,我们就足以在Activity的Layout文件中引用了:

澳门新葡萄京娱乐场 44

5)在Activity中增多点击事件anim:

澳门新葡萄京娱乐场 45

到此,动态的VectorDrawable就编写完结了,我们运路程序,点击ImageView,现身了之类的作用:

澳门新葡萄京娱乐场 46

7

VectorDrawable完毕路线转换动漫

轨道动漫关键的布局就是 objectAnimator 中 androd:propertyName=”pathData”

androd:valueType=”pathType”属性。这里我们落到实处五角星向五边形的转移动漫。

1)创设五角星VectorDrawable文件 fivestar.xml

澳门新葡萄京娱乐场 47

Android Studio 的 Preview窗口突显效果如下:

澳门新葡萄京娱乐场 48

2)为VectorDrawable成立属性动漫:

五角星的属性动漫 anim_fivestar.xml 如下:

澳门新葡萄京娱乐场 49

3)下来大家须要配备动漫黏合剂
animated-vector(fivestar_anim.xml),让属性动漫效果于VectorDrawable:

澳门新葡萄京娱乐场 50

4)粘附到一块之后,大家就足以在Activity的Layout文件中引用了:

澳门新葡萄京娱乐场 51

5)在Activity中增添点击事件anim:

澳门新葡萄京娱乐场 52

此处的点击事件和前边介绍过的略有差异,须求思忖到VectorDrawable完结路线调换动漫的宽容性难点,故路线转变动漫这段日子设有包容性难题。

不能够在4.X版本运维,这点卓殊小心。然而我们雷同期待谷歌能够在持续版本中优化路线转换动漫,进步包容性。

到此,动态的VectorDrawable就编写完结了,大家运路程序,点击ImageView,现身了如下的功能:

澳门新葡萄京娱乐场 53

8

动态VectorDrawable的宽容性难题

(1)向下包容难点

1)路线转换动画(Path Morphing) 在Android
pre-L版本下是力不胜任利用的,譬如将圆形转换来三角形的动漫。
2)路线插值器(Path Interpolation) 在Android
pre-L版本只可以动用系统的插值器(平常景观下,系统提供的27种插值器已经足够大家使用了),无法自定义。

(2)向上宽容难题

1)路线转变动漫(Path Morphing) 在Android L版本以上亟待利用代码配置。

(3)收取string包容难点

不支持从String.xml中读取
<PathData>

同期这里也可望谷歌能够在后边的版本中期维修复这个动态VectorDrawable的包容性难题。

发表评论

电子邮件地址不会被公开。 必填项已用*标注