时间戳

首页 > 解决方案 > 你能动态地为 SVG 制作动画吗？

javascript - 你能动态地为 SVG 制作动画吗？

问题描述

我正在对我的网站进行编码，我有一个很棒的想法来为保存在 SVG 容器中的导航栏设置动画。由于自然波浪形设计，我打算采用类似于 Discord 介绍的东西，其中波浪在挥手时扫过屏幕。所以我想知道是否有一种方法可以做到这一点，对任何想法都持开放态度。JQuery、Java、CSS，任何可以提供帮助的东西。

我稍微使用过 CSS，但不知道从 Java 或 JQuery 开始。我正在寻找一种方法来使用汉堡菜单让这个 onClick 工作。

body {
  font-family: 'Raleway', Arial, Verdana, sans-serif;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: white;
}

.main_hd_cont {
  position: absolute;
  top: -1.25vw;
  left: 1.5vw;
  z-index: 2;
  color: white;
}

.main_hd_txt {
  font-size: 3.5vw;
  font-family: 'ballet_harmonyballet_harmony';
}

svg {
  filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6));
}

.navigation_svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  max-width: 100vw;
  width: 100vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Code Cafe | Home </title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css">
  <!--Fonts from Google Fonts API Directory, all rights reserved to original typographers and the Google Corperation -->
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <!--Styling for Font Awesome Icon library, for high quality icons visit Font Awesome online -->
  <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
  <!--Script link for JQuery Libraries and Scroll Magic API(s) -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
  <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
  <!-- paste locally stored JavaScript file link here -->
  <style>
    @font-face {
      font-family: 'ballet_harmonyballet_harmony';
      src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
    }
  </style>
</head>

<body>
  <section class="main_hd_cont">
    <header class="main_hd">
      <h1 class="main_hd_txt">Company Name</h1>
    </header>
  </section>
  <!--SVG Graphic as Navigation holder w/ Hamburger Menu Activation -->
  <section class="navigation_svg">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 575" style="enable-background:new 0 0 1920 575;" xml:space="preserve">
         <style type="text/css">
               .st0{fill:url(#SVGID_1_);}
          </style>
         <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="287.2289" x2="1920" y2="287.2289">
          <stop  offset="0" style="stop-color:#8C572B"/>
           <stop  offset="0.9974" style="stop-color:#593118"/>
         </linearGradient>
          <path class="st0" d="M57.5,139c52.6,0,272.7-21,509.6,0s515.9,0,556.8,0c19.4,0,37.8,8.3,50.7,22.7 c35.5,39.7,120.6,119.2,245.4,136.3c96.7,13.2,176.4,61.6,226.8,100.2c28.6,22,53.6,48.3,74.5,77.7c28.7,40.3,94.9,112.1,194.9,97.7 c2.2-0.3,3.8-2.2,3.8-4.4V-1H0v82.5C0,113.3,25.7,139,57.5,139z"/>
    </svg>
  </section>
  </section>
</body>

</html>
我唯一能做的就是淡入淡出，但这只是@keyframes对 SVG 动画能力的测试。

标签： javascriptjqueryhtmlcsssvg

解决方案

您可以像这样使用 css 转换路径的 d 属性：

path {
  transition: d 1s;
  d: path('M547 93.0001C496 38.0001 457 29 372 15C276.086 -0.79759 -57 -52 9.99988 240C33.2036 341.127 87.9999 397 157 366C226 335 285 227 325 341C365 455 407 425 598 412C789 399 841 322 839 233C837 144 688 162 642 169C596 176 598 148 547 93.0001Z'); 
}

path:hover {
  d: path('M547 92C471.994 92 482.5 -39.5 372 14C284.509 56.3601 -57 -53 9.99984 239C33.2035 340.127 82.5699 351.503 157 365C253.5 382.5 248.741 246.296 325 340C401.5 434 445.063 526.153 598 411C768 283 874.5 310 839 232C802.123 150.975 671.067 131.667 642 168C616 200.5 613 92 547 92Z'); 
}
<svg viewBox="0 0 900 500">
  <path d=""/>
</svg>

使用关键帧

path {
  animation: 10s infinite alternate wave ease-in-out;
}

@keyframes wave {
  from {
    d: path("M2,5 S2,-2 4,5 S7,8 8,4")
  }
  to {
    d: path("M2,5 S2,14 4,5 S7,8 8,4")
  }
}



body {display: flex;}
svg {width: 100%;}
path {fill: none;stroke: #000;}
<svg viewBox="0 0 10 10">
  <path d="M2,5 S2,-2 4,5 S7,8 8,4" />
</svg>

推荐阅读