xml地图|网站地图|网站标签 [设为首页] [加入收藏]

美高梅游戏网站

当前位置:美高梅游戏网站 > 美高梅游戏网站 > 9.SVG动画

9.SVG动画

来源:http://www.gd-chuangmei.com 作者:美高梅游戏网站 时间:2019-11-26 18:29

一个例子上手 SVG 动画

2017/05/05 · HTML5 · SVG

原文出处: 凹凸实验室   

CSS3动画已足够强大,不过还是有一些它做不到的地方。配合SVG,让Web动效有更多的可能性。这次要做的效果是一个loading动画(如图):其中旋转通过CSS来完成,但是旋转之后圆弧缩短变成笑脸的嘴巴需要借助SVG来实现。

图片 1

SVG:

资料1
资料2

Step1、声明SVG视口

XHTML

<svg width="100" height=“100”></svg>

1
<svg width="100" height=“100”></svg>

指定一个宽高都为100像素的区域,width=”100”和width=”100px”是等价的,当然也可以使用其他的合法单位,例如cm、mm、em等

阅读器会设置一个默认的坐标系统,见图:左上角为原点,其中水平(x)坐标向右递增,垂直(y)坐标向下递增。

图片 2

在没有指定的情况下,所有的的数值默认单位都是像素。

用法:

  • VectorDrawable: 创建基于XML的SVG图形
  • AnimatedVectorDrawable:"胶水",实现动画
  • 语法什么的看资料。

Step2、绘制购物袋

购物袋由两个部分组成,先画下面的主体:

XHTML

<path d="M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10 10 90 0 1 20 90" style="fill: #e9e8ee;" />

1
<path d="M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10 10 90 0 1 20 90" style="fill: #e9e8ee;" />

任何形状都可以使用路径元素画出,描述轮廓的数据放在它的d属性中。
a.样式中的fill用来设置填充色。
b.路径数据由命令和坐标构成:

指令 说明
M 20 40 表示移动画笔到(20,40)
L 80 40 表示绘制一条线到(80, 40)
A 10 10 90 0 1 70 100 绘制一个椭圆弧

圆弧命令以字母A开始,后面紧跟着7个参数,这7个参数分别用来表示:

  • 椭圆的x半径和y半径
  • 椭圆的x轴旋转角度
  • 圆弧的角度小于180度,为0;大于或等于180度,则为1
  • 以负角度绘制为0,否则为1
  • 终点的x、y坐标

图片 3

接下来绘制购物袋上面的部分

XHTML

<path d="M 35 40 A 15 15 180 1 1 65 40" style="fill: none; stroke: #e9e8ee; stroke-width: 5;” />

1
<path d="M 35 40 A 15 15 180 1 1 65 40" style="fill: none; stroke: #e9e8ee; stroke-width: 5;” />

上面的部分是一个半圆弧,我同样用路径来画出,也可以使用基础形状来完成。

样式中的stokestroke-width分别用来设置描边色和描边的宽度。

图片 4

创建vector SVG文件:
  • 通过下面xml文件,根据语法画: VectorDrawable
  • 网站SVG图片源码/Studio--> new--> vector Asset/ps,AI将图片转换成SVG
//res/drawable目录
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <group>
        <!-- 如果指定属性为 pathData,
             则要添加一个属性 android:strokeLineCap="pathType",来告诉系统进行pathData变换-->

        <path
            android:name="path1"
            android:pathData="
            M 20,20
            L 50,20 80,20"
            android:strokeColor="#000"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
        <path
            android:name="path2"
            android:pathData="
            M 20,80
            L 50,80 80,80"
            android:strokeColor="#000"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
        //中间的线,自己加上去的。    
        <path
            android:name="path3"
            android:pathData="
            M 20,50
            L 45,50 M 55,50  80,50"
            android:strokeColor="#000"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
    </group>
</vector>

Step3、绘制眼睛

XHTML

<circle cx=“40" cy="60" r="2.5" style="fill: #fff;" /> <circle cx="60" cy="60" r="2.5" style="fill: #fff;" />

1
2
<circle cx=“40" cy="60" r="2.5" style="fill: #fff;" />
<circle cx="60" cy="60" r="2.5" style="fill: #fff;" />

使用基础形状,画两个个小圆点。四个属性分别是位置坐标、半径和填充颜色。
图片 5

创建animator:

// res/animtor目录
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:interpolator="@android:anim/linear_interpolator"
    android:propertyName="pathData"
    android:valueFrom="M 20,20 L 50,20 80,20"
    android:valueTo="M 20,20 L 50,50 80,20"
    android:valueType="pathType"/>

本文由美高梅游戏网站发布于美高梅游戏网站,转载请注明出处:9.SVG动画

关键词:

上一篇:10个HTML5素描及绘画设计工具

下一篇:没有了