html: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBeeline/demo1.html
准备属性值：
本文使用js画直线，运用到css中的一些属性。
绘制的步骤：
在本例中，绘制直接使用鼠标。点击获得起始点，拖动到终点获得结束点，鼠标松开就绘制图形。
获得起始点：
获得结束点：
绘制直线：
使用了jquery中的animate()方法。
js: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBall/demo2.js
html: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBall/demo2.html
小球的属性：
创建小球：
使小球运动：
将之前的画直线的方法封装成一个固定起点和终点的类。
js: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawTrajectory/js/createLine.js
html: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawTrajectory/demo1.html
Three中绘制线，是采用instance方式来绘制的，每个线段作为一个instance进行绘制，每个instance通过着色器来生成虚线效果。绘制LineGeometry时,LineMaterial中可以通过指定dashed来将线样式渲染为虚线。直接打开LineMaterial.js文件可以看到，fragmentshader中通过对vLineDistance + dashOffset取余来划分虚线段,即超过dashsize的像素直接丢弃不进行渲染。
if ( mod( vLineDistance + dashOffset, dashSize + gapSize ) >dashSize ) discard// todo - FIX
1
1
通过修改vLineDistance + dashOffset部分，即对这一部分累加距离，同时累加的距离同时间相关即可实现dash部分的移动。
这里我简化直接将丢弃的部分设置为绿色，同时将vLineDistance + dashOffset修改为:
if ( mod( vLineDistance + dashOffset + elasptime, dashSize + gapSize ) >dashSize ) {lxs_color.r=0.lxs_color.g=1.lxs_color.b=0.} //discard// todo - FIX
其中elasptime为渲染时间，类型为float，lxs_color线段颜色，类型为vec3
同时将修改后的颜色赋值给gl_FragColor，gl_FragColor = vec4( lxs_color, diffuseColor.a )
到此，着色器部分修改完成.
将LineMaterial.js中的UniformsLib.Line中补充属性elasptime。同时在LineMaterial原型上添加属性elasptime，即可，完成对LineMateial的修改。
UniformsLib.line = {
linewidth: { value: 1 },
resolution: { value: new Vector2( 1, 1 ) },
dashScale: { value: 1 },
dashSize: { value: 1 },
dashOffset: { value: 0 },
gapSize: { value: 1 }, // todo FIX - maybe change to totalSize
opacity: { value: 1 },
elasptime: { value: 0 },
}
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
elasptime:{
enumerable:true,
get:function(){
return this.uniforms.elasptime.value
},
set:function(value){
this.uniforms.elasptime.value=value
}
}
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
使用修改后的Material
这里直接使用项目中自带的webgl_lines_fat.html，来进行测试。将animate方法中添加itimes作为渲染时间，用来对应material中的elasptime，使用如下代码传入matLine.elasptime=itimes/1000.,打开页面，勾选dashed选项时，即可看到流动效果。
看到网页上炫酷的图形轮廓线路径动画你是否会动心,想要自己来制作一个呢?其实这个特效实现起来并不难,使用轻量级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文件。
<script src="js/jquery.min.js"></script>
<script src="js/jquery.drawsvg.js"></script>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来使SVG图形生成轮廓线动画效果。
首先将初始化的对象实例保存为一个变量:
var mySVG = $('#my_svg_element').drawsvg()
然后就可以执行动画效果了:
mySVG.drawsvg('animate')
配置参数
下面是该SVG路径动画创建的可用配置参数:
参数类型默认值描述durationInteger1000完成每一个路径动画的持续时间staggerInteger200每一个路径动画开始前的延迟时间easingStringswing使用jQuery
Easing插件的过渡动画效果reverseBooleanfalse是否反向绘制callbackFunctionfunction()
{}路径动画完成之后的回调函数
