美文网首页
简单的SVG线条动画

简单的SVG线条动画

作者: 冰川孤辰js | 来源:发表于2016-04-25 17:34 被阅读3325次

    [TOC]

    Demo项目下载

    看到网页中那种有如写字般的动画,觉得挺好玩的,就找了下制作方法,也比较简单,在此记录一下;
    先上几张图看看:

    简单的线条动画 ps4

    用到的属性

    stroke 定义边框颜色值;
    stroke-width 定义描边宽度;
    stroke-dashoarray 前一个数值表示dash,后一个数字表示gap长度(只写单个值表示dash/gap尺寸一致),往复循环;
    stroke-dashoffset 虚线开始时的偏移长度,正数则从路径起始点向前偏移,负数则向后偏移;

    原理

    1. 定义 stroke-dashoarray 属性,使svg图案的 dash 和 gap 长度大于等于最终图案长度值(记为len);
    2. 将其往前偏移len,使dash部分初始隐藏,只显示 gap , gap 又是空白的,所以初始时页面无任何东西;
    3. 定义动画,不断改变 stroke-dashoffset 的值直至为0,就出现了动画;

    绘制svg图案

    主要使用到 path 标签,具体可以看 这里 ;
    复杂点的图案就不建议手动书写,可采用第三方软件,导出成svg文件,删除无用代码即可,如:
    Inkscape
    在线编辑

    动画实现

    可通过css或js来控制动画的实现,css比较简单,但图案的长度等参数不易掌控;

    CSS实现

    <style>
        path {
            stroke-dasharray: 610;//实线-间隔长度都是610(大于所画长度)
            stroke-dashoffset: 610;//往前偏移610(超过图形长度),则初始显示为空白
            animation: dash 5s linear;//添加动画,使偏移逐渐变为0,以显示完整图案
            animation-fill-mode: forwards;//动画完成后保持不变
        }
    
        // 定义css动画,@keyframes yourName
        @keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>
    

    js控制动画

    初始化相关属性

    //代码获取长度并设置动画相关属性
    var path = document.querySelector('path');
    var len = path.getTotalLength();
    console.log("总长度 : " + len);
    
    //定义实线和空白区域长度
    path.style.strokeDasharray = len + 10;
    //定义初始dash部分相对起始点的偏移量,正数表示往前便宜
    path.style.strokeDashoffset = len + 10;
    

    方式1:使用transition

    // 方式1:参考文章: https://jakearchibald.com/2013/animated-line-drawing-svg/
    path.style.transition = path.style.WebkitTransition =
            'none';
    // Trigger a layout so styles are calculated & the browser
    // picks up the starting position before animating
    path.getBoundingClientRect();
    path.style.transition = path.style.WebkitTransition =
            'stroke-dashoffset 5s ease-in-out';
    path.style.strokeDashoffset = '0';
    

    方式2:定时刷新重绘

    var initial_ts = new Date().getTime();
    var duration = 5000;
    
    var draw = function () {
        var progress = (Date.now() - initial_ts) / duration;
        if (progress < 1) {
            path.style.strokeDashoffset = Math.floor(len * (1 - progress));
            setTimeout(draw, 50);
        }
    };
    draw();
    

    方式3:使用requestAnimationFrame

    var initial_ts = new Date().getTime();
    var duration = 5000;
    var handle = 0;
    
    var animate = function () {
        var progress = (Date.now() - initial_ts) / duration;
        if (progress >= 1) {
            window.cancelAnimationFrame(handle);
        } else {
            path.style.strokeDashoffset = Math.floor(len * (1 - progress));
            handle = window.requestAnimationFrame(animate);
        }
    };
    animate();
    

    方式3比较依赖系统刷新率,若硬件性能问题导致fps下降严重,则可能出现较严重卡顿现象

    最终效果

    参考

    W3C SVG
    MDN-SVG
    Painting: Filling, Stroking and Marker Symbols
    Animated line drawing in SVG
    用css定义svg的样式和动画
    SVG SMIL animation动画详解

    相关文章

      网友评论

          本文标题:简单的SVG线条动画

          本文链接:https://www.haomeiwen.com/subject/xjqqrttx.html