SVG Wasser füllen Animation

Ich bin eine Wipe-Animation zu sehen, wie Wasser füllt sich in einem Tropfen. Es ist derzeit ein Quadrat mit einer Wellenanimation über dem Drop-Logo. Es macht die Wellenanimation richtig, aber ich kann nicht erreichen, dass es innerhalb des Tropfens bleibt und sich füllt.SVG Wasser füllen Animation

Ich komme näher, aber ich brauche immer noch das eigentliche Logo, um zumindest innerhalb des Kreises zu sein.

Mein Fortschritt:

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 

 
    <meta charset="UTF-8" /> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
    <title>SVG Line Animation Demo</title> 
 

 
</head> 
 
<body> 
 
<style> 
 

 
    .st0{fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:5;} 
 
    .st1{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:5;} 
 

 
    #logo2 { 
 
     width: 150px !important; 
 
     height: 150px !important; 
 
     position: relative; 
 
     margin-top: -100px; 
 
    } 
 

 
    #banner { 
 
     border-radius: 50%; 
 
     width: 150px; 
 
     height: 150px; 
 
     background: #fff; 
 
     overflow: hidden; 
 
     backface-visibility: hidden; 
 
     transform: translate3d(0, 0, 0); 
 
     z-index: -1; 
 
     margin-bottom: -50px; 
 
    } 
 

 
    #banner .fill { 
 
     animation-name: fillAction; 
 
     animation-iteration-count: 1; 
 
     animation-timing-function: cubic-bezier(.2, .6, .8, .4); 
 
     animation-duration: 4s; 
 
     animation-fill-mode: forwards; 
 
    } 
 

 
    #banner #waveShape { 
 
     animation-name: waveAction; 
 
     animation-iteration-count: infinite; 
 
     animation-timing-function: linear; 
 
     animation-duration: 0.5s; 
 
     width:300px; 
 
     height: 150px; 
 
     fill: #04ACFF; 
 
    } 
 

 
    @keyframes fillAction { 
 
     0% { 
 
      transform: translate(0, 150px); 
 
     } 
 
     100% { 
 
      transform: translate(0, -5px); 
 
     } 
 
    } 
 

 
    @keyframes waveAction { 
 
     0% { 
 
      transform: translate(-150px, 0); 
 
     } 
 
     100% { 
 
      transform: translate(0, 0); 
 
     } 
 
    } 
 

 
</style> 
 

 
<div> 
 
    <div id="banner"> 
 
     <div class="fill"> 
 

 
      <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    viewBox="0 0 136 195" style="enable-background:new 0 0 136 195;" xml:space="preserve"> 
 

 
       <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4 
 
    c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9 
 
    c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/> 
 
      </svg> 
 
     </div> 
 
    </div>   
 

 
    <svg version="1.1" id="logo2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    viewBox="0 0 136 195" style="enable-background:new 0 0 136 195;" xml:space="preserve"> 
 

 
     <path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4 
 
    C130.7,77.6,68.3,6.7,68.2,6.7z"/> 
 
     <g><path class="st1" d="M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.7c12.2,0,19.4,6.9,19.4,18.7v37.2 
 
     c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5 
 
     H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z"/></g> 
 
    </svg> 
 
</div> 
 
</body> 
 
</html>

Quelle

2017-02-02 user3029128

Die Welle vollständig oberhalb der Tropfen ist, wenn ich die Tropfen dann auf den Rückgang der Welle Clip wird einfach voll die ganze Zeit zu sein scheinen, wie es steigt. Bitte erläutern Sie genauer, was Sie hier sehen möchten. –

Grundsätzlich möchte ich die Animation den gesamten Tropfen füllen. Wie in dem Abschnitt "SVG Deliciousness" in diesem Thread http://stackoverflow.com/questions/29738787/filling-water-animation/29740828#_=_ – user3029128

Sie wollen nur einen blauen Tropfen, der dann ohne Welleneffekt nach oben bewegt ? –

Nachfolgend ändert Ihren Code:

entfernen Sie das Ansichtsfenster (Ich finde es einfach leichter transform verwenden),
Machen Sie eine Kopie von sowohl dem Tropfen als auch dem Buchstaben "h",
die Kopien in einen einzigen Pfad zusammenführen,
Ort, den Weg innerhalb eines <clipPath> Elements innerhalb eines <defs> Elements in den <svg> verschmolzen und eine Kennung („drop“)
Stelle ein umschließende <g> Element um die <g class="fill"> Gruppe geben ,
clip dass <g> Element mit dem "drop" und
Maßstab und übersetzen, sowohl die schwarzen umrandete Drop-and-h als auch die Clip-Pfad Drop-and-h, mit den gleichen Mengen umschließenden, so dass sie sind auf der Wellenform zentriert.

Sie können über clipPath on MDN lesen.

Übrigens, dass Ihre Wave Shape Animation für immer fortfahren kann, auch wenn Sie die Wellen nicht mehr schwappen sehen können (obwohl ich das nicht genau überprüft habe), was wahrscheinlich nicht das ist, was Sie wollen.

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <meta charset="UTF-8" /> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
    <title>SVG Line Animation Demo</title> 
 

 
</head> 
 

 
<body> 
 
    <style> 
 
    .st0 { 
 
     fill: none; 
 
     stroke: #000000; 
 
     stroke-width: 4; 
 
     stroke-miterlimit: 5; 
 
    } 
 
    .st1 { 
 
     fill: none; 
 
     stroke: #000000; 
 
     stroke-width: 3; 
 
     stroke-miterlimit: 5; 
 
    } 
 
    #logo2 { 
 
     width: 150px !important; 
 
     height: 150px !important; 
 
     position: relative; 
 
     margin-top: -100px; 
 
    } 
 
    #banner { 
 
     border-radius: 50%; 
 
     width: 150px; 
 
     height: 150px; 
 
     background: #fff; 
 
     overflow: hidden; 
 
     backface-visibility: hidden; 
 
     transform: translate3d(0, 0, 0); 
 
     z-index: -1; 
 
     margin-bottom: -50px; 
 
    } 
 
    #banner .fill { 
 
     animation-name: fillAction; 
 
     animation-iteration-count: 1; 
 
     animation-timing-function: cubic-bezier(.2, .6, .8, .4); 
 
     animation-duration: 4s; 
 
     animation-fill-mode: forwards; 
 
    } 
 
    #banner #waveShape { 
 
     animation-name: waveAction; 
 
     animation-iteration-count: infinite; 
 
     animation-timing-function: linear; 
 
     animation-duration: 0.5s; 
 
     width: 300px; 
 
     height: 150px; 
 
     fill: #04ACFF; 
 
    } 
 
    @keyframes fillAction { 
 
     0% { 
 
     transform: translate(0, 150px); 
 
     } 
 
     100% { 
 
     transform: translate(0, -5px); 
 
     } 
 
    } 
 
    @keyframes waveAction { 
 
     0% { 
 
     transform: translate(-150px, 0); 
 
     } 
 
     100% { 
 
     transform: translate(0, 0); 
 
     } 
 
    } 
 
    </style> 
 

 

 
    <div> 
 
    <div id="banner"> 
 
     <div> 
 
     <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve"> 
 

 
      <defs> 
 
      <clipPath id="drop"> 
 
       <path transform="scale(0.75), translate(32,0)" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4 
 
    C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.7c12.2,0,19.4,6.9,19.4,18.7v37.2 
 
     c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5 
 
     H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" /> 
 
      </clipPath> 
 
      </defs> 
 

 
      <g clip-path="url(#drop)"> 
 
      <g class="fill"> 
 
       <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4 
 
    c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9 
 
    c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" /> 
 
      </g> 
 
      </g> 
 
      <g transform="scale(0.75), translate(32,0)"> 
 
      <path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4 
 
    C130.7,77.6,68.3,6.7,68.2,6.7z" /> 
 
      <path class="st1" d="M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.7c12.2,0,19.4,6.9,19.4,18.7v37.2 
 
     c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5 
 
     H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" /> 
 
      </g> 
 
     </svg> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-02-03 20:39:04

Ich bin für immer in deiner Schuld. Vielen Dank. – user3029128

SVG Wasser füllen Animation

Antwort

Verwandte Themen