轻量级HTML5插件使用jQuery绘制SVG图形轮廓线路径动画教程_IT百科

看到网页上炫酷的图形轮廓线路径动画你是否会动心,想要自己来制作一个呢?其实这个特效实现起来并不难,使用轻量级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()

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

<!DOCTYPE HTML>

<html>

<head>

<title>recursion</title>

</style>

$ (function ()

{

var svg = $ ("<svg xmlns='http://www.w3.org/2000/svg' version='1.1'></svg>")

svg.css (

{

"width" : "200px",

"height" : "200px"

})

var s = $ ("<path d='M10,10 L10,20 L20,20 z' style='fill:rgb(235,252,121) fill-opacity:1 stroke:black stroke-width:1' />")

svg.append (s)

$ ("[name='frame']").append (svg)

})

</script>

</head>

<body>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/bake/11625618.html

轻量级HTML5插件使用jQuery绘制SVG图形轮廓线路径动画教程

发表评论

评论列表（0条）