网络科技

    今日:28| 主题:301130
收藏本版
互联网、科技极客的综合动态。

[其他] [译]动画矢量图(简单几步就能动起来)

[复制链接]
再续一段情 发表于 2016-12-1 03:53:28
420 12

[译]动画矢量图(简单几步就能动起来)

[译]动画矢量图(简单几步就能动起来)

   尽管 AnimatedVectorDrawableCompat (自从2016年二月份–Support Library 23.2.0)已经出来有一段时间了,Google官方却一直没有提供一份使用教程。你很难搜到相关可靠的文章,也没有什么能把这个东西完完整整的呈现出来。
  所以接下来我尝试将所有必要知识精简成你所能理解的东西。
  你需要做的事:

  1.在你的build.gradle文件中添加AppCompat依赖

        
  1. compile 'com.android.support:appcompat-v7:25.0.0'
复制代码
      
       
  • 我使用了(此时)最新版本 25.0.0 ,但是只要从 23.2.0 开始任何版本可以正常工作  
  2.创建vector drawable(矢量图)文件

  
       
  • 它能被赋予动画效果   
  • vector drawable文件必须被放在你项目的res/drawable文件夹   
  • 更多的相关内容点 这里 (译注:官方文档需科学上网)              
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <vector
    3. xmlns:android="http://schemas.android.com/apk/res/android"
    4. android:width="24dp"
    5. android:height="24dp"
    6. android:viewportHeight="24"
    7. android:viewportWidth="24">
    8. <group
    9. android:name="menu"
    10. android:pivotX="12"
    11. android:pivotY="12">
    12. <group
    13. android:name="bottom_container"
    14. android:pivotX="20"
    15. android:pivotY="17">
    16. <path
    17. android:name="bottom"
    18. android:pathData="M4,17,L20,17"
    19. android:strokeColor="#000"
    20. android:strokeLineCap="square"
    21. android:strokeLineJoin="miter"
    22. android:strokeMiterLimit="10"
    23. android:strokeWidth="2"/>
    24. </group>
    25. <group
    26. android:name="stem_container"
    27. android:pivotX="12"
    28. android:pivotY="12">
    29. <path
    30. android:name="stem"
    31. android:pathData="M4,12,L20,12"
    32. android:strokeColor="#000"
    33. android:strokeLineCap="square"
    34. android:strokeLineJoin="miter"
    35. android:strokeMiterLimit="10"
    36. android:strokeWidth="2"/>
    37. </group>
    38. <group
    39. android:name="top_container"
    40. android:pivotX="20"
    41. android:pivotY="7">
    42. <path
    43. android:name="top"
    44. android:pathData="M4,7,L20,7"
    45. android:strokeColor="#000"
    46. android:strokeLineCap="square"
    47. android:strokeLineJoin="miter"
    48. android:strokeMiterLimit="10"
    49. android:strokeWidth="2"/>
    50. </group>
    51. </group>
    52. </vector>
    复制代码

  上面的代码描绘的是一个基础的黑色菜单(汉堡包)图标:
  

[译]动画矢量图(简单几步就能动起来)

[译]动画矢量图(简单几步就能动起来)

  3.创建动画文件

  
       
  • 它们指定了 vector 的动画部分   
  • 可以将多个动画分别指定给一个 vector drawable的不同的部分   
  • vector 不同的部分用 name 标签指定(例如 menu , bottom_container , bottom , stem_container , stem , top_container , top )   
  • 动画文件根元素既可以是 set 也可以是 objectAnimator   
  • 这些文件需要放在res/anim目录下  
   接下来的代码展现了 top_container 动画,它定义了四个属性, translateX , translateY , scaleX 以及 rotation :
        
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <objectAnimator
  4. android:name="top_container"
  5. android:duration="700"
  6. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  7. android:propertyName="translateX"
  8. android:startOffset="500"
  9. android:valueFrom="0"
  10. android:valueTo="-1.41421356"
  11. android:valueType="floatType"/>
  12. <objectAnimator
  13. android:name="top_container"
  14. android:duration="700"
  15. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  16. android:propertyName="translateY"
  17. android:startOffset="500"
  18. android:valueFrom="0"
  19. android:valueTo="5"
  20. android:valueType="floatType"/>
  21. <objectAnimator
  22. android:name="top_container"
  23. android:duration="700"
  24. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  25. android:propertyName="scaleX"
  26. android:startOffset="500"
  27. android:valueFrom="1"
  28. android:valueTo="0.5"
  29. android:valueType="floatType"/>
  30. <objectAnimator
  31. android:name="top_container"
  32. android:duration="700"
  33. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  34. android:propertyName="rotation"
  35. android:startOffset="500"
  36. android:valueFrom="0"
  37. android:valueTo="45"
  38. android:valueType="floatType"/>
  39. </set>
复制代码
      

[译]动画矢量图(简单几步就能动起来)

[译]动画矢量图(简单几步就能动起来)

  4.创建animate-vector drawable文件

  
       
  • animated-vector 将所有的内容都联系在一起( vector drawable文件和所有的 animation 文件)   
  • 需要将它放在你项目的res/anim目录下  
        
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <animated-vector
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:drawable="@drawable/vector_menu_back"
  6. tools:ignore="NewApi">
  7. <target
  8. android:name="top_container"
  9. android:animation="@anim/anim_top_container"/>
  10. <target
  11. android:name="stem_container"
  12. android:animation="@anim/anim_stem_container"/>
  13. <target
  14. android:name="bottom_container"
  15. android:animation="@anim/anim_bottom_container"/>
  16. <target
  17. android:name="menu"
  18. android:animation="@anim/anim_menu"/>
  19. </animated-vector>
复制代码
      需要注意的是:

   如果你的 minSdkVersion 小于21(如果大于的话,那我真的不知道你为什么会考虑用 AnimatedVectorDrawableCompat …正常用 AnimatedVectorDrawable 就行了),Android Studio可能会在你的 animated-vector 文件中弹出一个静态检查警告:
  

[译]动画矢量图(简单几步就能动起来)

[译]动画矢量图(简单几步就能动起来)

   不要担心这个警告!如果你的代码没有错误,你的 AnimatedVectorDrawableCompat 会忽略掉它并且能够正常工作。当然如果你不想再看到警告,可以添加 tools:ignore="NewApi" :
  

[译]动画矢量图(简单几步就能动起来)

[译]动画矢量图(简单几步就能动起来)

  5.编辑你的build.gradle文件

  
       
  • 在你的 build.gradle 文件中,将 vectorDrawables.useSupportLibrary = true 添加进 android 部分的 defaultConfig 内   
  • 你需要这行代码,这样你的 animated-vector 才能兼容API小于 Lollipop版本的系统  
        
  1. android {
  2. compileSdkVersion 24
  3. buildToolsVersion "24.0.3"
  4. defaultConfig {
  5. applicationId "com.junyuan.wukongnew"
  6. minSdkVersion 21
  7. targetSdkVersion 24
  8. versionCode 1
  9. versionName "1.0"
  10. vectorDrawables.useSupportLibrary = true
  11. }
  12. ...
  13. }
复制代码
      6.将你的AnimatedVectorDrawableCompat设置到ImageView或者ImageButton

  
       
  • 你可以用 app:srcCompat 把它添加进xml文件  
        
  1. <ImageView
  2. android:id="@+id/iv_animated"
  3. android:layout_width="48dp"
  4. android:layout_height="48dp"
  5. app:srcCompat="@drawable/animated_vector_menu_back"/>
复制代码
      
       
  • 或者通过java代码:  
        
  1. final AnimatedVectorDrawableCompat avd = AnimatedVectorDrawableCompat.create(this, R.drawable.animated_vector_menu_back);
  2. animatedIv.setImageDrawable(avd);
复制代码
      7.在你需要的时候开启动画

  
       
  • 获得 AnimatedVectorDrawableCompat 的引用(或者是它的一个实现类– Animatable ),如果你的 AnimatedVectorDrawableCompat 是通过java代码添加的,可以直接使用这个对象的引用(你可以跳过这步):  
        
  1. final Animatable animatable = (Animatable) animatedIv.getDrawable();
复制代码
      
       
  • 开启动画  
        
  1. animatable.start()
复制代码
      

[译]动画矢量图(简单几步就能动起来)

[译]动画矢量图(简单几步就能动起来)

  好消息和坏消息

   让我们先来听听好消息:
   你可以很轻松通过 Roman Nurik 的AndroidIconAnimator这个工具(尽管当前它是预览版,但是也足够有用了)实现步骤1-3。它可以将svg文件和你所指定的动画元素转换成 animated-vector drawable文件
   有一件很有意思的事情是导出来的来的 animated-vector 文件使用了 aapt 工具的一些非常厉害的功能,导出来的drawable文件包含了全部动画所需的代码(包括 vector drawable和 animation 文件)。就是将步骤1-3的所有文件都包含在一个文件里。
   坏消息来了:
   AnimatedVectorDrawableCompat 在API小于21时有一些限制:
   Chris Banes 的 文章 中指出:
  animate vectors 在API小于21的平台上工作时同样有一些限制,当前在这些平台上有一下这几点限制:
  路径绘制(PathType evaluator),这被用来从一个路径绘制到另一个路径
  路径插值器,这被用来定义一个灵活的插值器(展现成一个路径)以代替系统自动生成的,比如说线性插值器(LinearInterpolator)
  按路径移动,这很少能用到,几何图形能在限制路径上来回运动
   大致意思就是你可以忘了 pathData 元素的动画 pathData ,我们只能期望谷歌的天才们能研究一个方法将这个功能兼容到低版本的系统上去。
豆丁 发表于 2016-12-1 05:19:45
我对楼主的敬仰如滔滔江水,绵延不绝!
回复 支持 反对

使用道具 举报

z848176965 发表于 2016-12-1 05:29:29
有料,任性
回复 支持 反对

使用道具 举报

lrtjk 发表于 2016-12-1 05:53:35
愿得一学霸, 教我数理化
回复 支持 反对

使用道具 举报

看美媚 发表于 2016-12-1 06:02:44
我也来顶一下..
回复 支持 反对

使用道具 举报

六年31 发表于 2016-12-1 06:02:50
不要为那些不愿在你身上花费时间的人而浪费你的时间.
回复 支持 反对

使用道具 举报

刘新月 发表于 2016-12-4 04:46:11
打酱油的人拉,回复下赚取积分
回复 支持 反对

使用道具 举报

长江水123千瓦 发表于 2016-12-4 04:56:37
发发呆,回回帖,工作结束~
回复 支持 反对

使用道具 举报

萍代 发表于 2016-12-10 00:46:15
现在问题来了,“挖掘机技术哪家强?中国山东找蓝翔”
回复 支持 反对

使用道具 举报

跟我你会脏 发表于 2016-12-15 17:13:19
为何要放弃治疗?
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表