文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在svg中制作丝带的垂直波浪动画？

问如何在svg中制作丝带的垂直波浪动画？
EN

Stack Overflow用户

提问于 2018-09-07 16:33:32

回答 1查看 768关注 0票数 0

我的问题是，我想创建一个svg文件(代码在下面提到)，就像一个垂直的丝带(这已经完成了)，现在我想给一个波浪效果，将开始从顶部到底部，并将在连续模式。但它不起作用。

@keyframes thread{
    from {
        stroke-dashoffset: 200; 
        opacity:.5;  
    }
    to{
        stroke-dashoffset: 2;
        opacity:1;
    }
}
.anime{
    stroke-dasharray: 200;
    animation: thread 2s .4s forwards infinite ease-in-out; 
}

<div class="position-absolute">
    <svg height="200" width="200" >   
        <g class="anime">
     <path id="shape-1"  d="M100 0 c-20 20 -20 25 -10 40 s20 30 -2 60   h50 m11.5 -100 c-20 20 -20 25 -10 40 s20 30 -2 60"
                fill="transparent" stroke="black" stroke-width="2"></path>
                <path id="shape-2"  d="M100 0 c-25 25 -25 30 -15 40 s25 35 -9 55 h64 m16.5 -105 c-25 25 -25 30 -15 45 s25 35 -4 60"
                fill="transparent" stroke="black" stroke-width="2">
            </path>
        </g>
    </svg>
</div>

jquery

html

css

javascript

回答 1

Stack Overflow用户

发布于 2018-09-07 16:57:15

我认为你正在寻找这样的东西(如果我错了，请纠正我)：

var svg = document.getElementById("cups");
var s = Snap(svg);

var ribbon1 = Snap.select('#ribbon1');
var ribbon2 = Snap.select('#ribbon2');

var ribbon1Points = ribbon1.node.getAttribute('d');
var ribbon2Points = ribbon2.node.getAttribute('d');


var toRibbon2 = function(){
  ribbon1.animate({ d: ribbon2Points }, 1000,  toRibbon1);  
}

var toRibbon1 = function(){
  ribbon1.animate({ d: ribbon1Points }, 1000,  toRibbon2); 
}


toRibbon1();

h1 {
  text-align: center;
}

svg {
  display: block;
  margin: 0 auto;
}

#ribbon2 {
  opacity: 0;
}

svg {
  fill: lightgrey;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <svg width="100" height="130" viewBox="0 0 75 47" xmlns="http://www.w3.org/2000/svg">
	<path id="ribbon1" class="cls-1" d="M64.5,64.5c0,15-4,19-4,31a17.23,17.23,0,0,0,10,16h28s-11-8-11-17,1-16,1-30-1-25-1-25h-26S64.5,49.5,64.5,64.5Z" transform="translate(-58.85 -39)"/>
   <path id="ribbon2" class="cls-1" d="M61,60c0,15,5.5,23.5,5.5,35.5s-6,16-6,16h28s5-4,5-13S85,76,85,62s2.5-22.5,2.5-22.5h-26S61,45,61,60Z" transform="translate(-58.85 -39)"/>
</svg>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</body>
</html>

它可能需要对路径本身进行一些调整，以获得更逼真的效果。这里，它专门应用于您的路径：

var svg = document.getElementById("cups");
var s = Snap(svg);

var ribbon1 = Snap.select('#ribbon1');
var ribbon2 = Snap.select('#ribbon2');

var ribbon1Points = ribbon1.node.getAttribute('d');
var ribbon2Points = ribbon2.node.getAttribute('d');


var toRibbon2 = function() {
  ribbon1.animate({
    d: ribbon2Points
  }, 1000, toRibbon1);
}

var toRibbon1 = function() {
  ribbon1.animate({
    d: ribbon1Points
  }, 1000, toRibbon2);
}


toRibbon1();

h1 {
  text-align: center;
}

svg {
  display: block;
  margin: 0 auto;
}

#ribbon2 {
  opacity: 0;
}

svg {
  fill: lightgrey;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <svg height="200" width="200">   
        <g class="anime">
     <path id="ribbon1"  d="M100 0 c-20 20 -20 25 -10 40 s20 30 -2 60   h50 m11.5 -100 c-20 20 -20 25 -10 40 s20 30 -2 60"
                fill="transparent" stroke="black" stroke-width="2"></path>
                <path id="ribbon2"  d="M100 0 c-25 25 -25 30 -15 40 s25 35 -9 55 h64 m16.5 -105 c-25 25 -25 30 -15 45 s25 35 -4 60"
                fill="transparent" stroke="black" stroke-width="2">
            </path>
        </g>
    </svg>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</body>

</html>

这里有一个关于如何实现这一点的广泛的guide (我的答案是基于它的)。它基本上是两个SVG路径，随着时间的推移，它们会相互转化。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52218554

复制

相似问题

问如何在svg中制作丝带的垂直波浪动画？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在svg中制作丝带的垂直波浪动画？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在svg中制作丝带的垂直波浪动画？
EN