简要教程

这是一款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="//www.w3.org/2000/svg" xmlns:xlink="//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;
 
}

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！