让文字沿着路径动起来 (SVG)

Posted on 2016-12-25 in SVG by yucongchen

路径动画的效果还是挺有意思的，而 Web 中常用的方法就是 SVG。先上一个效果图：

让文字沿着路径动起来 (SVG)

SVG

要在 SVG 里面实现文字路径动画还是比较简单的，SVG 里面就有天然的支持。

我们先搞个 SVG 路径

        <svg id="textPathDemo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="960" viewBox="0 0 581 120">
            <path stroke="#FF4444" 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 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1" fill="none" stroke-width="1" stroke-dasharray="5 5" id="text-path1"></path>
            <text>
                <textPath  xlink:href="#text-path1" class="text-content" textLength="160" startOffset="160">
                    SVG 文字路径动画 
                </textPath>
            </text>
        </svg>

这里的 path 就是用来定义路径的，这个路径我是网上找的，一般做的话可以用 AI 等 SVG 制作工具，几个关键属性介绍一下。

stroke-dasharray 表示用虚线描边。可选值为none, , inherit。
- none 表示不用虚线描边
- inherit 表示继承
这个属性很有用，基本上 SVG 动画都需要用到，这是一个逗号或者空格分隔的数值列表，第一个值表示线段的长度，第二个值表示线段间空白的长度，例子中 stroke-dasharray="5 5"中，第一个 5 表示虚线中的线段的长度，而第二个 5 表示两个线段间的长度是 5px。所以出来的效果是每段虚线的间隔都是一样的。其实这个dasharray可以不只两个值，可以有很多个，会循环依次用到线段和空白之间。
stroke,stroke-width 分别表示描边长度和描边宽度，这里就是改颜色用的。

这里比较关键的是 textPath 这个节点，这里就是定义文字按照什么路径排列的。

其中主要的属性： - xlink:href ：这里表示要用哪条路径，注意我们在 path 那设置的 id 属性。 - textLength ：表示文字的长度，这里 160 是我瞎猜的。 - startOffset ：表示文字开始的偏移量，也就是文字开始点在路径中的位置。

现在出来的效果是这样的：

让文字沿着路径动起来 (SVG)

现在还没动，要让它动起来很简单，上面我们介绍了 startOffset 属性表示文字起始点，只要改变这个起始点就可以动了。

于是我们来加点 javascript：

    var txtEle = $(".text-content");
    var rafId = null;
    var isEnd = false;

    var animateFunc = function(start, step, end){
        var startOffset = start + step;
        if (startOffset >= end){
            startOffset = end
            isEnd = true;
        }
        // txtEle.attr("startOffset", startOffset); // not work
        txtEle[0].setAttribute("startOffset", startOffset);

        if(isEnd){
            cancelAnimationFrame(rafId);
            return;
        }

        requestAnimationFrame(function(){
            animateFunc(startOffset,step,end);
        })
    }

    var steps = Math.round( 5000/16.7 );  // 5000 means 5s
    var len = 830;

    var step = len / steps;

    animateFunc(-160, step, len);

代码比较简单，但是有几个地方我要说明一下。首先是我把 jQuery 里面设置的 attr 的方法 txtEle.attr("startOffset", startOffset); 注释了，因为 jq 会把属性用小写写到元素里面，而这里的 startOffset 偏偏是大小写敏感的，所以要改用 dom 的 setAttribute 方法。然后，这段代码里面有几个地方写的是 hard code，比如 var len = 830;，中的 830，animateFunc(-160, step, len); 中的 -160。

这里 830 表示的是文字要走的路径的长度，这 830 是我大概算出来的，因为我们想文字停在最后那里，而不是跑出去，计算方法是路径的长度减去文字长度，当然这个值不是很准确。

文字停在最后

animateFunc(-160, step, len); 中的 -160 表示的是文字起始点，因为我们想有个进场效果，而不是所有文字一开始就排在起始点，所以要负出去，而 160 是我大概算的文字长度，这里也不准确。

文字进场效果

写完这段 js，发现自己兜了个大圈。之前在一个比想象中更骚气的圆-svg实现一文中介绍过 SVG 的 animate 标签，如果只是单纯的动，这里大可以用 animate 来做。

添加 animate 到 textPath 中：

        <textPath  xlink:href="#text-path1" class="text-content" textLength="160" startOffset="-160">
            SVG 文字路径动画 
             <animate attributeName="startOffset" from="-160" to ="830" begin="0s" dur="5s" repeatCount="1"/>
        </textPath>

这里 attributeName表示动画属性是 startOffset，begin 表示开始的延时，dur 表示时间整个动画的时间，frome 和 to 表示初始值和最终值，repeatCount 表示重复次数，这里是 1 次，如果用 indefinite 表示无限次。只是加这个进去，是没有停在最后的样式的，做完一次，字就不见了。这里 from 和 to 也可以用 0% 和 100% ，这样就没有进场效果。这个节点虽然好用，但是还是比较适合无限循环运动的场景。

这里要想精细的控制，还是要靠 js。

但是，作为一个要弄懂这是什么，从哪里来，到哪里去的程序员，面对代码中很多半猜半算的值，是不能视而不见的，而且路径什么的现在都是写死的，弊端略大，于是我们可以借助一个强大的库，snap.svg.js。

Snap.svg

Snap.svg 是一个强大的 SVG 操作库，提供了丰富的接口，唯一的问题是，你需要了解熟悉 SVG 的基础知识。

引入 Snap.svg 之后，我们的 html 代码可以变得比较简单：

    <svg id="textPathDemo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="960" viewBox="0 0 581 120">

    </svg>
    <script src="http://cdn.bootcss.com/snap.svg/0.4.1/snap.svg-min.js"></script>

就留一个 SVG 元素就好。

然后我们就开始利用 Snap.svg 帮我们干活。

    window.onload = function () {
        var path = "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 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1";

        var s = Snap('#textPathDemo');

        path = s.path(path).attr({ 'fill': 'none', 'stroke': '1',"stroke":"#FF4444","stroke-dasharray":"5 5"});

        var pathLength  = Snap.path.getTotalLength(path);

        console.log(pathLength);

        var txt = s.text(0,0,'SVG 文字路径动画');

        var txtLength = txt.node.clientWidth;

        var text = txt
                .attr({ 'textpath': path, 'fill':'#003399' })
                .textPath.attr({ 'startOffset': -txtLength })
                .animate({ 'startOffset': pathLength-txtLength }, 5000, mina.easeinout );
    };

代码不是很长，简单解释一下。

一开始定义了一段 path，这里就是我们要用来做路径动画用的。
然后创建一个 snap 对象：var s = Snap('#textPathDemo');。
把 path 放到我们的 snap 中，并设置了一堆之前我们在 html 里面设置的属性 path = s.path(path).attr({ 'fill': 'none', 'stroke': '1',"stroke":"#FF4444","stroke-dasharray":"5 5"});
高潮来了，var pathLength = Snap.path.getTotalLength(path); 算出路径的长度，不用猜了。
创建文字，var txt = s.text(0,0,'SVG 文字路径动画');
算出文字长度，var txtLength = txt.node.clientWidth; ，这里说一下，我在 Snap 的文档中没找到怎么算文字长度的，这个是打印上面那个 txt 对象后发现的，如果有更好的方法，麻烦告知哈。
给文字设置一堆东西 var text = txt.attr({ 'textpath': path, 'fill':'#003399' }) ，主要设置 textpath。
设置 textpath 中的属性：.textPath.attr({ 'startOffset': -txtLength }) 这里是支持链式调用的，设置起始点为 -txtLength 是为了有文字进场效果。
设置动画，给爷动一个。.animate({ 'startOffset': pathLength-txtLength }, 5000, mina.easeinout ); 这里设置了要做动画的属性为 startOffset，最后的位置为 pathLength-txtLength 即路径长度减去文字长度，动画时间 5000 毫秒，以及动画函数 main.easeinout 这个动画函数是库提供的，类比 css3 中的 easeinout 的效果，比之前我们用匀速要生动一些。