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

2023-04-13 03:04:02JavaScript024

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

SVG制作素描线动画举例

1）.首先画一条素描线，如图

version="1.1"

xmlns="http://www.w3.org/2000/svg"

viewBox = "0 0 200 100">

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"/>

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

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

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

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

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

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

}

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)来生成动画。

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

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

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

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

2.SVG简介

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

3.SVG的特点

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

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

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

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

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

34浏览器支持

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

4 SVG标签

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

看到网页上炫酷的图形轮廓线路径动画你是否会动心,想要自己来制作一个呢?其实这个特效实现起来并不难,使用轻量级HTML5插件jquery-drawsvg就可以实现了,jquery-drawsvg是一款轻量级的使用jQuery来绘制SVG图形轮廓线路径动画的插件。该插件使用jQuery内置的动画引擎来使SVG元素中path元素产生动画,其底层实现使用的是stroke-dasharray和stroke-dashoffset属性。

该SVG路径动画插件的特点有:

轻量级,压缩后小于2kb

使用简单

支持Easing过渡动画效果

演示地址:http://www.htmleaf.com/Demo/201509112558.html

插件下载地址:http://down.htmleaf.com/1509/201509111546.zip

使用方法:

使用该SVG图形轮廓线路径动画插件需要引入jQuery和jquery.drawsvg.js文件。

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来使SVG图形生成轮廓线动画效果。

首先将初始化的对象实例保存为一个变量:

var mySVG = $('#my_svg_element').drawsvg()

然后就可以执行动画效果了:

mySVG.drawsvg('animate')

配置参数

下面是该SVG路径动画创建的可用配置参数:

参数类型默认值描述durationInteger1000完成每一个路径动画的持续时间staggerInteger200每一个路径动画开始前的延迟时间easingStringswing使用jQuery

Easing插件的过渡动画效果reverseBooleanfalse是否反向绘制callbackFunctionfunction()

{}路径动画完成之后的回调函数

</svg>

<p class="el-loading-text">Loading…</p>

</div>

/* ******************* 加载动画 **************************** */

.el-loading-mask.is-fullscreen { position: fixed}

.el-loading-mask { background-color: hsla(0,0%,100%,.4)!important}

.el-loading-mask { position: absolutez-index: 10000background-color: hsla(0,0%,100%,.9)margin: 0top: 0right: 0bottom: 0left: 0transition: opacity .3s}

.el-loading-mask.is-fullscreen .el-loading-spinner { margin-top: -25px}

.el-loading-spinner { top: 50%margin-top: -21pxwidth: 100%text-align: centerposition: absolute}

.el-loading-mask.is-fullscreen .el-loading-spinner .circular { width: 50pxheight: 50px}

.el-loading-spinner .circular { width: 42pxheight: 42pxanimation: loading-rotate 2s linear infinite}

svg:not(:root) { overflow: hidden}

.el-loading-spinner .el-loading-text { color: #ff495e !important}

.el-loading-spinner .el-loading-text { color: #20a0ffmargin: 3px 0font-size: 14px}

.el-loading-spinner .path { stroke: #ff495e !important}

.el-loading-spinner .path {

animation: loading-dash 1.5s ease-in-out infinite

stroke-dasharray: 90,150

stroke-dashoffset: 0