如何使用SVG生成超酷的页面预加载素描动画效果

发布时间:2020-06-18 11:38:32 作者:猎狐姥爷
来源:网络 阅读:562

1 SVG简介

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。

 

2 SVG的特点

与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:

SVG 图像可通过文本编辑器来创建和修改

SVG 图像可被搜索、索引、脚本化或压缩

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

 

3 浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。Internet Explorer 8或更早版本,可通过安装Adobe SVG Viewer以支持SVG。

 

4 SVG 标签

SVG 代码以 <svg> 元素开始,包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。

5  SVG 制作素描线动画举例

   1)首先画一条素描线 如图

如何使用SVG生成超酷的页面预加载素描动画效果

 

    <svg version="1.1"    xmlns="http://www.w3.org/2000/svg"    viewBox = "0 0 200 100">    <!--    fill属性是否填充    stroke为绘制,颜色#AAAAAA    stroke-width为绘制线的粗细    d是具体数据,这里看到的数据代表了坐标,以及折线等等,可以使用工具生成    -->    <path fill="none"    stroke = "#AAA"    stroke-width = "2"    d = "M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215"    />    </svg>

 

素描线的参数可以使用工具生成,

相关课程 基础SVG标签介绍

 

2)SVG实现素描的动画及原理

stroke-dasharray = "100 10"  stroke-dashoffset = "0"

 stroke-dasharray定义了生成线段长度,及其线段和线段之间的缝隙 ,这里包含两个参数

 stroke-dashoffset定义了从那个位置开始渲染生成线段

 相关课程 SVG实现的素描动画模拟效果及其原理

 

3)使用CSS3来实现素描动画效果

    /*定义keyframe动画*/    /* 添加动画到path元素 */    .path{    stroke-dasharray: 265.07;    stroke-dashoffset: 265.07;    animation: dash 3s linear infinite;    /* 支持chrome */    -webkit-animation: dash 3s linear infinite;    }    @keyframes dash{    from{    stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度,可以使用js获取 */    }    to{    stroke-dashoffset: 0;    }    }    /* 支持chrome浏览器 */    @-webkit-keyframes dash{    from{    stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度,可以使用js获取 */    }    to{    stroke-dashoffset: 0;    }    }

 

 

 相关课程 使用CSS3实现素描动画效果

4)使用Javascript来调节动画效果的参数

    /*定义相关Javascript*/    var current_frame, //定义当前帧    total_frames, //定义全部帧数    path, //定义svg中的唯一path元素    length, //定义path所生成的素描长度    handle; //定义javascript动画句柄    path = document.getElementById('path'),    length = path.getTotalLength();    //定义初始化方法    var init = function(){    current_frame = 0;    total_frames = 160;    path.style.strokeDasharray = length + ' ' + length; //定义dasharray    path.style.strokeDashoffset = length; //定义dashoffset    handle = 0;    }    //定义实际的动画绘制方法    var draw = function(){    var progress = current_frame/total_frames;    if(progress>1){ //这里定义完成动画    window.cancelAnimationFrame(handle);    }else{//否则使用reqeuestAnimationFrame来生成动画    current_frame++;    path.style.strokeDashoffset = Math.floor(length*(1 - progress));    handle = window.requestAnimationFrame(draw);    }    }    //定义一个重新运行方法    var rerun = function(){    init();    draw();    }    //页面加载即运行    rerun();

 

 

这里主要定义初始化方法和动画绘制的方法,window.requestAnimationFrame(draw);

来生成动画。

相关课程 使用Javascript来实现素描动画效果

 

5)我们选用极客标签的logo,作为原始图片,坐标参数用 Inkscape 工具生成。

 

如何使用SVG生成超酷的页面预加载素描动画效果

 

当运行动画绘制程序的时候,各条线安装设定的方式进行绘制,我们就看到非常酷的预加载动画了。

观看完整效果,请访问轻视频课程: 使用javascript生成极客标签Logo的素描动画效果


推荐阅读:
  1. 为什么要使用SVG
  2. 如何使用svg

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

gbtags 极客标签

上一篇:Fiddler基础

下一篇:怎么解决java向mysql数据库插入数据时出现乱码

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》