HTML5 SVG线条变形动画特效

这是一款HTML5 SVG线条变形动画特效。这个特效demo是一个轮播图分页导航的例子，在每个分页圆点上都有一个SVG圆形线条，当用户点击其它圆点时，圆形线条以平滑过渡的方式运动到下一个位置。

使用方法

操作SVG需要使用gsap的TweenMax.min.js库。

<script src="path/to/TweenMax.min.js"></script>                    
                

HTML结构

实现这个效果需要2个元素，一个圆形和一条直线。分页圆点导航按钮的解绑HTML结构如下：

<div class="controls">
        <!-- 圆形线条 -->
        <div id="circle-line">
            <svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <circle id="circle-line-path" stroke-width="4" cx="19" cy="19" r="17"></circle>
                </g>
            </svg>
        </div>

        <!-- 直线 -->
        <div class="straight-line"></div>

        <div class="dot active"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</div>
                

CSS样式

为圆形线条和直线添加下面的CSS样式。

#circular-line {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transform: rotate(90deg);
}

#circular-line.flip {
    transform: rotate(90deg) scaleY(-1);
}

#circular-line-path {
    stroke-dasharray: 106;
    stroke-dashoffset: 0;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke: #F6A4EB;
}

.straight-line {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 0;
    height: 4px;
    background: #F6A4EB;
    border-radius: 3px;
    transform-origin: left;
    transform: scaleX(0);
}                 
                

JavaScript

伪类使圆形线条运动起来，需要修改circle元素的stroke-dashoffset值，使它从0变化到105。对于直线，只需要简单的修改transform scaleX属性，使它从0变为1。

// define animation timeline
var tl = new TimelineMax({});

tl.to(circularLinePath, staticAnimProps.duration, {

    css: {
        // animation css stroke-dashoffset property
        // this will yield the circular loading effect
        "stroke-dashoffset": 105
    }

})

.to(straightLine, staticAnimProps.duration/2, {

    // animates the length of the line
    scaleX: 1,

    onComplete: function(){

        // straight line animation direction changes to the opposite
        this.target.style.transformOrigin = dynamicAnimProps.direction;

        // move circular line position to the clicked dot position
        circularLine.style.left = dynamicAnimProps.circularLinePos + "px";

    }

}, 0.15)

.to(straightLine, staticAnimProps.duration, {

    // animate the straight line length to zero
    scaleX: 0

})

.to(circularLinePath, staticAnimProps.duration, {

    onStart: function(){

        // if the animation direction goes to left, flip the circular line
        (dynamicAnimProps.flipcircular) ? circularLine.className = "" : circularLine.className = "flip";

    },

    delay: -staticAnimProps.duration,
    css: {
        // animate circular line to 0
        "stroke-dashoffset": 0
    }

})                   
                

另外还需要判断点击的是当前圆点左边的圆点还是右边的圆点，因为从左向右运动和从右向左运动是不同的，需要分别处理。

// define animation direction
// if the selected dot has bigger index, then it's animation direction goes to the right
if(getIndex(this, thisArray) > getIndex(activeDot, thisArray)){

    dynamicAnimProps.direction = "right";

    // get the width between the active dot and the clicked dot
    dynamicAnimProps.straightLine.width = dynamicAnimProps.newLinePos - dynamicAnimProps.oldLinePos + 2.5;
    dynamicAnimProps.straightLine.pos = dynamicAnimProps.oldLinePos + 5;
    dynamicAnimProps.flipcircular = false;
    dynamicAnimProps.straightLine.origin = "left";
    dynamicAnimProps.translateVal = staticAnimProps.translateVal;

} else {

    dynamicAnimProps.direction = "left";

    dynamicAnimProps.straightLine.width = -(dynamicAnimProps.newLinePos - dynamicAnimProps.oldLinePos - 2.5);
    dynamicAnimProps.straightLine.pos = dynamicAnimProps.newLinePos + 5;
    dynamicAnimProps.flipcircular = true;
    dynamicAnimProps.straightLine.origin = "right";
    dynamicAnimProps.translateVal = -staticAnimProps.translateVal;

}                    
                

这款HTML5 SVG线条变形动画特效的github地址为：https://github.com/balapa/SVG-Line-Morphing-Transition