当前位置：首页 > 网页特效 > svg

HTML5 SVG线条变形动画特效

分类：svg 日期：2024-05-14 点击(1) 评论(0)

HTML5 SVG线条变形动画特效

简介

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

```html
<script src="path/to/TweenMax.min.js"></script>    
```                
#####  HTML结构
实现这个效果需要2个元素，一个圆形和一条直线。分页圆点导航按钮的解绑HTML结构如下：

```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样式。

```html
#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。

```html
// 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
    }
 
})     
```              
另外还需要判断点击的是当前圆点左边的圆点还是右边的圆点，因为从左向右运动和从右向左运动是不同的，需要分别处理。

```html
// 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;
 
}       
```

web299.com

HTML5 SVG线条变形动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果