Android SVG 矢量动画机制

      Google 在 Android 5.X 中增加了对 SVG 矢量图形的支持。可从如下方面简单了解什么是 SVG。

      1、指可伸缩矢量图形 (Scalable Vector Graphics)
      2、 用来定义用于网络的基于矢量的图形
      3、使用 XML 格式定义图形
      4、图像在放大或改变尺寸的情况下其图形质量不会有所损失
      5、是万维网联盟的标准
      6、与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

      在 Android 5.X 之后,Android 中添加了对 SVG 的 <path> 标签的支持。从而让开发者可以使用 SVG 来创建更加丰富的动画效果。与 Bitmap 相比,SVG 最大的优点就是放大不会失真,Bitmap 需要为不同的分辨率设计多套图标,而矢量图则不会。

     下面来看看这两个效果图:




       这就是使用 SVG 做出来的效果。在这之前,先了解一下 <path> 标签。

       使用path标签时,就像用指令的方式来控制一只画笔,例如:移动画笔到某一坐标位置,画一条线,画一条曲线,结束。

     

     1、支持的指令:

      M = moveto(M X,Y) :将画笔移动到指定的坐标位置
      L = lineto(L X,Y) :画直线到指定的坐标位置
      H = horizontal lineto(H X):画水平线到指定的X坐标位置
      V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
      C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线
      S = smooth curveto(S X2,Y2,ENDX,ENDY)
      Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线
      T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射
      A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
      Z = closepath():关闭路径

     

    2、使用原则:

     ①坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下。
     ②所有指令大小写均可。大写绝对定位,参照全局坐标系;小写相对定位,参照父容器坐标系。
     ③指令和数据间的空格可以省略。
     ④同一指令出现多次可以只用一个。

     注意,'M'处理时,只是移动了画笔, 没有画任何东西。 它也可以在后面给出上同时绘制不连续线。


    3、详细指令分析


        3.1、L H V指令


       绘制直线的指令是“L”,从当前点划线到给定点。 “L”之后的参数是一个点坐标,如“L 200 400”。 如果画水平线或垂直线,可以使用“H”和“V”指令,后面的参数是x(H指令)或y坐标(V指令)。


       M 起点X,起点Y L(直线)终点X,终点Y H(水平线)终点X V(垂直线)终点Y


      如:M 10,20 L 80,50 M 10,20 V 50 M 10,20 H 90



  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值