网络科技

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

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

[复制链接]
再续一段情 发表于 前天 03:53
58 5

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

[译]动画矢量图(简单几步就能动起来)-1 (android,version,Google,矢量图,文件夹)

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

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

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

  
       
  • 它能被赋予动画效果   
  • vector drawable文件必须被放在你项目的res/drawable文件夹   
  • 更多的相关内容点 这里 (译注:官方文档需科学上网)               [code]
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">
    android:name="menu"
    android:pivotX="12"
    android:pivotY="12">
    android:name="bottom_container"
    android:pivotX="20"
    android:pivotY="17">
    android:name="bottom"
    android:pathData="M4,17,L20,17"
    android:strokeColor="#000"
    android:strokeLineCap="square"
    android:strokeLineJoin="miter"
    android:strokeMiterLimit="10"
    android:strokeWidth="2"/>

    android:name="stem_container"
    android:pivotX="12"
    android:pivotY="12">
    android:name="stem"
    android:pathData="M4,12,L20,12"
    android:strokeColor="#000"
    android:strokeLineCap="square"
    android:strokeLineJoin="miter"
    android:strokeMiterLimit="10"
    android:strokeWidth="2"/>

    android:name="top_container"
    android:pivotX="20"
    android:pivotY="7">
    android:name="top"
    android:pathData="M4,7,L20,7"
    android:strokeColor="#000"
    android:strokeLineCap="square"
    android:strokeLineJoin="miter"
    android:strokeMiterLimit="10"
    android:strokeWidth="2"/>



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


[译]动画矢量图(简单几步就能动起来)-2 (android,version,Google,矢量图,文件夹)

  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 :
         [code]

android:name="top_container"
android:duration="700"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:propertyName="translateX"
android:startOffset="500"
android:valueFrom="0"
android:valueTo="-1.41421356"
android:valueType="floatType"/>
android:name="top_container"
android:duration="700"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:propertyName="translateY"
android:startOffset="500"
android:valueFrom="0"
android:valueTo="5"
android:valueType="floatType"/>
android:name="top_container"
android:duration="700"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:propertyName="scaleX"
android:startOffset="500"
android:valueFrom="1"
android:valueTo="0.5"
android:valueType="floatType"/>
android:name="top_container"
android:duration="700"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:propertyName="rotation"
android:startOffset="500"
android:valueFrom="0"
android:valueTo="45"
android:valueType="floatType"/>

[/code]      

123下一页
友荐云推荐




上一篇:深度学习的五个能力级别
下一篇:Amazon Aurora Update – PostgreSQL Compatibility
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

豆丁 发表于 前天 05:19
我对楼主的敬仰如滔滔江水,绵延不绝!
回复 支持 反对

使用道具 举报

z848176965 发表于 前天 05:29
有料,任性
回复 支持 反对

使用道具 举报

lrtjk 发表于 前天 05:53
愿得一学霸, 教我数理化
回复 支持 反对

使用道具 举报

看美媚 发表于 前天 06:02
我也来顶一下..
回复 支持 反对

使用道具 举报

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

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表