画线 动画效果

若转帖请注明原出处，谢谢!

动画手册： http://ecd.tencent.com/css3/guide.html

室内导航路径动态画线 ：

插件： https://github.com/camoconnell/lazy-line-painter

室内导航目前还不算成熟，但公司接到项目恰好有个很小的室内导航，为了使这个室内导航更具动态效果更显眼，要求路线是向用铅笔画线一样慢慢画出，研究了下上面的插件之后自己摘除了里面的一段code并加以改动了下实现了画线。

我是用的raphael.js 插件来做一些事情的，并且lazy-line-painter本身也是要依赖于raphael的

lazy-line-painter的部分原理（不一定很准确）：比如在一张室内图片上有2点A 和 B，lazy-line-painter首先会画出A和B点之间的线Line_AB_1但是把这条线设为透明的，在视觉上根本看不到这条线,之后呢根据你所设的时间（即你设想总共画出这条线的时间）把这条线分为若干份，之后不断的画出一小份一小份的线，最后组成一条新的路径线路并把之前的那个线Line_AB_1删掉，接下来看代码

var draw = Raphael('map_navigation_container', 964, 893);
var lineStr = "M498,467L512,452,L512,444L548,445L547,496L525,497L498,467";
var polyline = draw.path(lineStr).attr({ "stroke": "none","stroke-width": 0,"fill-opacity": 0});
 print({
        'canvas': draw, 
        'pathstr': polyline, 
        'duration': 5000,
        'attr': {
                 "fill-opacity": 0,
                 "stroke": "#000",
                 "stroke-dasharray": null,
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 "stroke-opacity": 1,
                 "stroke-width": 3
                 },
         'callback': function () { }
 	}, this);
var print = function( settings, octx ) {

        var canvas = settings.canvas, 
            duration = settings.duration, 
            attr = settings.attr;


        var guide_path = settings.pathstr;


        var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr ),
            total_length = guide_path.getTotalLength( guide_path ),
            start_time = new Date().getTime(),
            interval_length = 25;


        var interval_id = setInterval( function()
        {
            var elapsed_time = new Date().getTime() - start_time,
                this_length = elapsed_time / duration * total_length,
                subpathstr = guide_path.getSubpath( 0, this_length );


            attr.path = subpathstr;


            path.animate( attr, interval_length );
            if ( elapsed_time >= duration )
            {
                clearInterval( interval_id );
                if (settings.callback !== undefined) {
                    settings.callback();
                }
                guide_path.remove();
            }
        }, interval_length );

转载自：https://blog.csdn.net/qinglianluan/article/details/13022293