SVG Folding Envelope

Ich spiele mit SVGs und wie es funktioniert. Ich versuche dieses SVG zu animieren, wo sich der Umschlag schließt und nach rechts abfliegt, dann erscheint ein Häkchen.SVG Folding Envelope

Bisher habe ich den Umschlag SVG gemacht, ich habe es geschafft, das Top zu kippen, aber es ist über dem Umschlag, ich brauche es, um den Umschlag zu schließen. Es kippt auch in die falsche Richtung.

Wie behebe ich das?

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve"> 
 
<style type="text/css"> 
 
\t .st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st3{ 
 
\t \t transform-origin:55% 50%; 
 
\t \t -moz-transform-origin:55% 50%; 
 
\t \t animation: flipX 1.6s forwards; 
 
\t } 
 

 
\t @-webkit-keyframes flipX { 
 
    0% { 
 
    opacity:0; 
 
    -webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1); 
 
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 
 
    } 
 
    100% { 
 
    opacity:1; 
 
    -webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1); 
 
    transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1); 
 
    } 
 
} 
 
@keyframes flipX { 
 
    0% { 
 
    opacity:0; 
 
    -webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1); 
 
    transform: perspective(400px) translateZ(0) rotateX(0) scale(1); 
 
    } 
 
    100% { 
 
    opacity:1; 
 
    -webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1); 
 
    transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1); 
 
    } 
 
} 
 
.flipX{ 
 
    opacity:0; 
 
    -webkit-animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards; 
 
\t animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards; 
 
} 
 
</style> 
 
<g id="Layer_1"> 
 
\t <rect id="XMLID_42_" class="st0" width="805" height="314"/> 
 
</g> 
 
<g id="Layer_2"> 
 
\t <rect id="XMLID_1_" x="55" y="129" class="st1" width="192" height="98"/> 
 
\t <g id="Layer_3"> 
 
\t \t <polyline id="XMLID_43_" class="st2" points="55,129 151,178 247,129 \t \t "/> 
 
\t \t <polyline id="XMLID_3_" class="st3" points="55,129 151,64 247,129 \t \t "/> 
 
\t </g> 
 
</g> 
 
</svg>

Quelle

2017-06-29 Chris Marsland

Wenn Sie etwas wollen nicht am Ursprung bei einer Drehung bewegen, setzen Sie es.

Eine schnelle Lösung in diesem Fall besteht darin, die Koordinaten des Laschenelements so zu ändern, dass die lange Kante eine y-Koordinate von Null hat, dann das Element in ein <g> Element mit einem Transformationsattribut einbetten, um es dort zu platzieren gehen.

Befreien Sie sich von der transform-origin Art auch.

Dies funktioniert, aber könnte eine Menge gereinigt werden:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve"> 
 
<style type="text/css"> 
 
\t .st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st3{ 
 
\t \t animation: flipX 1.6s forwards; 
 
\t } 
 

 
\t @-webkit-keyframes flipX { 
 
    0% { 
 
    opacity:0; 
 
    -webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1); 
 
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 
 
    } 
 
    100% { 
 
    opacity:1; 
 
    -webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1); 
 
    transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1); 
 
    } 
 
} 
 
@keyframes flipX { 
 
    0% { 
 
    opacity:0; 
 
    -webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1); 
 
    transform: perspective(400px) translateZ(0) rotateX(0) scale(1); 
 
    } 
 
    100% { 
 
    opacity:1; 
 
    -webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1); 
 
    transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1); 
 
    } 
 
} 
 
.flipX{ 
 
    opacity:0; 
 
    -webkit-animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards; 
 
\t animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards; 
 
} 
 
</style> 
 
<g> 
 
\t <rect class="st0" width="805" height="314"/> 
 
</g> 
 
<g> 
 
\t <rect x="55" y="129" class="st1" width="192" height="98"/> 
 
\t <g> 
 
\t \t <polyline class="st2" points="55,129 151,178 247,129 "/> 
 
\t \t <g transform="translate(0 129)"> 
 
\t \t \t <polyline class="st3" points="55,0 151,-65 247,0 "/> 
 
\t \t </g> 
 
\t </g> 
 
</g> 
 
</svg>

Quelle

2017-06-29 23:12:07

Das ist perfekt, genau das, was ich wollte. Vielen Dank :) –

Wenn Sie translateY(-65px) zum 100% Keyframe hinzufügen, es bewegt sich der Umschlagklappe nach unten, wie es sie spiegeln wird. 65px ist eine Augapfelfigur.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve"> 
 
<style type="text/css"> 
 
\t .st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;} 
 
\t .st3{ 
 
\t \t transform-origin:55% 50%; 
 
\t \t -moz-transform-origin:55% 50%; 
 
\t \t animation: flipX 1.6s forwards; 
 
\t } 
 

 
\t @-webkit-keyframes flipX { 
 
    0% { 
 
    opacity:0; 
 
    -webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1); 
 
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 
 
    } 
 
    100% { 
 
    opacity:1; 
 
    -webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1); 
 
    transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1) translateY(-65px); 
 
    } 
 
} 
 
@keyframes flipX { 
 
    0% { 
 
    opacity:0; 
 
    -webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1); 
 
    transform: perspective(400px) translateZ(0) rotateX(0) scale(1); 
 
    } 
 
    100% { 
 
    opacity:1; 
 
    -webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1); 
 
    transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1) translateY(-65px); 
 
    } 
 
} 
 
.flipX{ 
 
    opacity:0; 
 
    -webkit-animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards; 
 
\t animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards; 
 
} 
 
</style> 
 
<g id="Layer_1"> 
 
\t <rect id="XMLID_42_" class="st0" width="805" height="314"/> 
 
</g> 
 
<g id="Layer_2"> 
 
\t <rect id="XMLID_1_" x="55" y="129" class="st1" width="192" height="98"/> 
 

 
\t <g id="Layer_3"> 
 
\t \t <polyline id="XMLID_43_" class="st2" points="55,129 151,178 247,129 \t \t "/> 
 
\t \t <polyline id="XMLID_3_" class="st3" points="55,129 151,64 247,129 \t \t "/> 
 
\t </g> 
 

 
</svg>

Quelle

2017-06-29 22:32:24 amphetamachine

Oh du Superstar .. Dies wurde für Stunden nervt mich .. –

Gibt es trotzdem den Boden zu halten von Dieses Dreieck, das an der Hülle befestigt ist, während es sich im Übergang befindet? –

SVG Folding Envelope

Antwort

Verwandte Themen