Nasıl 'yürüyen karıncalar' gibi pürüzsüz kesik sınır devirli bir animasyon yapmak için; | Netgez.com
SORU
24 ŞUBAT 2015, Salı


Nasıl 'yürüyen karıncalar' gibi pürüzsüz kesik sınır devirli bir animasyon yapmak için;

'Çarklar ve zincirler', ama bir oluşturulamadı am 'yumuşak' sınır döndürme sırası. css kullanan bir animasyon üzerinde çalışıyorum

(Şu anda) sözde öğesi bir 'rotasyon' etkisi. üretmek için kullanıyorum fiddle bu Nasıl görebilirsiniz Bu işi gereğidir '' kesik kesik beyaz ve altın renkli sınır arasında, bu gibi görünüyor yapım border dönen 'geçiyorum.

Bende ne var

#one{
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4  */
  -moz-animation:    rotateClockwiseAnimation 5s linear infinite; /* Fx 5  */
  -o-animation:      rotateClockwiseAnimation 5s linear infinite; /* Opera 12  */
  animation:         rotateClockwiseAnimation 5s linear infinite; /* IE 10 , Fx 29  */

}
#two{
  -webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite; /* Safari 4  */
  -moz-animation:    rotateAntiClockwiseAnimation 5s linear infinite; /* Fx 5  */
  -o-animation:      rotateAntiClockwiseAnimation 5s linear infinite; /* Opera 12  */
  animation:         rotateAntiClockwiseAnimation 5s linear infinite; /* IE 10 , Fx 29  */

 position:absolute;
    top:30px;
    left:42px;
    width:80px;
}

@-webkit-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-moz-keyframes rotateClockwiseAnimation{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-moz-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-o-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/******************************************************************************/

.chain{
    height:70px;
    width:80%;
    border:5px dashed gold;
    border-radius:30px;
    position:absolute;
    top:30px;
    left:40px;
          -webkit-animation: switchGoldBlackBorder 0.8s infinite; /* Safari 4  */
  -moz-animation:    switchGoldBlackBorder 0.8s infinite; /* Fx 5  */
  -o-animation:      switchGoldBlackBorder 0.8s infinite; /* Opera 12  */
  animation:         switchGoldBlackBorder 0.8s infinite; /* IE 10 , Fx 29  */
}


@-webkit-keyframes switchBlackGoldBorder {
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}
@-moz-keyframes switchBlackGoldBorder{
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}
@-o-keyframes switchBlackGoldBorder {
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}
@keyframes switchBlackGoldBorder {  
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}



.chain:after{
    content:"";
    position:absolute;
    height:70px;
    border-radius:30px;
    width:100%;
    top:-5px;
    left:-5px;
    border:5px solid gold;
    z-index:-1;
          -webkit-animation: switchBlackGoldBorder 0.8s infinite; /* Safari 4  */
  -moz-animation:    switchBlackGoldBorder 0.8s infinite; /* Fx 5  */
  -o-animation:      switchBlackGoldBorder 0.8s infinite; /* Opera 12  */
  animation:         switchBlackGoldBorder 0.8s infinite; /* IE 10 , Fx 29  */
}

@-webkit-keyframes switchGoldBlackBorder {
  0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}
@-moz-keyframes switchGoldBlackBorder{
  0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}
@-o-keyframes switchGoldBlackBorder {
  0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}
@keyframes switchGoldBlackBorder {  
    0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}
<svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
    <defs>
        <circle id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25"/>
        <path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85"/>
    </defs>    
    <use xlink:href="#c"/>
    <use xlink:href="#d"/>
    <use xlink:href="#d" transform="rotate(45, 50, 50)"/>
</svg>

<svg id="two" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
    <use xlink:href="#one"/>    
</svg>
<div class="chain"></div>

Yani, 'zincir etkisi' kareleri kullanarak. dönen ürettim nasıl görebilirsiniz Pasajı alt bölüm,


Ä°stiyorum

Benim genel dilek gibi bir şey oluşturmak için olabilir:

Taşıyıcı bandın kesiti, ve nasıl düşünmek 'sonunda dişli kayışlı tahrik'. Bu yeniden oluşturmaya çalışıyorum. (yani çizgili kenarlık altın bit vites tekneleri ve 'çekti'). içinde olmalıdır

#one{
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4  */
  -moz-animation:    rotateClockwiseAnimation 5s linear infinite; /* Fx 5  */
  -o-animation:      rotateClockwiseAnimation 5s linear infinite; /* Opera 12  */
  animation:         rotateClockwiseAnimation 5s linear infinite; /* IE 10 , Fx 29  */
border:5px dashed gold;
  border-radius:50%;
}

@-webkit-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-moz-keyframes rotateClockwiseAnimation{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
    <defs>
        <circle id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25"/>
        <path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85"/>
    </defs>    
    <use xlink:href="#c"/>
    <use xlink:href="#d"/>
    <use xlink:href="#d" transform="rotate(45, 50, 50)"/>
</svg>

ama altın tire ile malı tekneler içinde uygun olarak € ekran geniÅŸliÄŸi eÄŸer bu mantıklı ise).

Sonunda, bu resim yapar gibi bir ÅŸey oluÅŸturmak istiyorum:

enter image description here

Zincir istiyorum nasıl görmek''? Döndür


Benim Åžimdiki Sorunlar

  • Animasyon olduÄŸu için 'hack' sözde bir öğe kullanarak, oldukça zor aslında bu dönüşünü senkronize buldum 'zincir'.
  • Hala ana kare animasyon öğreniyorum, bunun için en iyi yöntem olmadığına eminim
  • Yine, svg benim için yeni bir kavram olduÄŸunu, bunu kullanmak için benim bir tereddüt alabilmeleri için css kullanıyorum dolayısıyla ('zincir')
  • Sonunda, 'gibi' diÅŸli zincir dönüyor, ama ÅŸu anda tamamen (ve hatalı) ayrı unsur animasyonlar gibi görünüyorlar . göstermek istiyorum

CEVAP
24 ŞUBAT 2015, Salı


DiÅŸli ve zincir animasyonu :

Ä° toplam kod refactored (CSSveHTML), ÅŸimdi :

  • kısa (özellikle css)
  • daha basit
  • daha gerçekçi: senkronizasyon sorunu ve zincir çarkları bteween ve zincir havada yüzer gibi görünüyordu, çünkü saÄŸda: eksik diÅŸli eklendi düzeltildi

DEMO

Bu yaklaşım aynı, ve dash-offset zincir çarkları yolu için dönme açısı canlandırıyor. Hem animasyonlar arasındaki zamanlama eğer çarkları zincir çekerek gibi görünmesi için biraz oynadım.

Tarayıcı desteği :

IE doesn't support svg animasyon öğesi olarak ben de 9 ve üzeri destekleyen snap.svg kütüphane ile animasyon bu sürümü (crossbrowsertesting ile 9 Test) yaptı.

DEMOIE desteÄŸi ile

var cont   = new Snap('#svg'),
    chain  = cont.select('#chain'),
    cogAcw = cont.select('#cog_acw'),
    cogCw  = cont.select('#cog_cw'),
    speed  = 500;  // Lower this number to make the animation faster

function infChain(el) {
    var len = el.getTotalLength();
    el.attr({"stroke-dasharray": len/62,"stroke-dashoffset": 0});
    el.animate({"stroke-dashoffset": -len/31}, speed, mina.linear, infChain.bind(null, el));
}
function rotateAcw(el) {
    el.transform('r22.5,20,20');
    el.animate({ transform: 'r-22.5,20,20' }, speed, mina.linear, rotateAcw.bind( null, el));
}
function rotateCw(el) {
    el.transform('r0,20,20');
    el.animate({ transform: 'r45,20,20' }, speed, mina.linear, rotateCw.bind( null, el));
}
infChain(chain);
rotateAcw(cogAcw);
rotateCw(cogCw);
svg {
    width:100%;
}
<script src="http://thisisa.simple-url.com/js/snapsvg.js"></script>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 30">
    <defs>
        <circle id="c" cx="20" cy="20" r="4" stroke="#808080" fill="none" stroke-width="4" />
        <path id="d" stroke="#808080" stroke-width="2" d="M20 13 V16 M27 20 H24 M20 27 V24 M13 20 H16" />
        <g id="cog_acw">
            <use xlink:href="#c" /><use xlink:href="#d" />
            <use xlink:href="#d" transform="rotate(45 20 20)" />
        </g>  
        <g id="cog_cw">
            <use xlink:href="#c" /><use xlink:href="#d" />
            <use xlink:href="#d" transform="rotate(45 20 20)" />
        </g>  
    </defs>
    <path id="chain" stroke-width="1" stroke="#000" fill="transparent" 
    d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89.4 26.5 89.4 13.5 80.8 13.5z" />
    <use  xlink:href="#cog_acw" />
    <use  transform="translate(60.5 0), rotate(19,20,20)" xlink:href="#cog_acw" />
    <use  transform="translate(-4.5 -4.5),scale(.8), rotate(0,20,20)" xlink:href="#cog_cw" />    
</svg>


svg{width:100%;}
#chain_st{
  -webkit-animation: dash 1s infinite linear;
  -moz-animation: dash 1s infinite linear;
  -o-animation: dash 1s infinite linear;
  animation: dash 1s infinite linear;
}
@-webkit-keyframes dash {
  to { stroke-dashoffset: -5; }
}
@-moz-keyframes dash {
  to { stroke-dashoffset: -5; }
}
@-o-keyframes dash {
  to { stroke-dashoffset: -5; }
}
@keyframes dash {
  to { stroke-dashoffset: -5; }
}
<svg id="one" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 30">
  <defs>
    <circle id="c" cx="20" cy="20" r="4" stroke="#808080" fill="none" stroke-width="4"/>
    <path id="d" stroke="#808080" stroke-width="2" d="M20 13 V16 M27 20 H24 M20 27 V24 M13 20 H16"/>
    <g id="cog">
      <use xlink:href="#c"/>
      <use xlink:href="#d"/>
      <use xlink:href="#d" transform="rotate(45 20 20)"/>
    </g>
  </defs>
  <g transform="translate(0,-7), scale(0.8), rotate(22.5 8 8)">
    <use xlink:href="#cog">
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="-22.5 20 20" to="337.5 20 20" dur="8s" repeatCount="indefinite"/>
    </use>
  </g>
  <path id="chain_st" stroke-width="1" stroke="#000" fill="transparent" stroke-dasharray="2.6 2.45" d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89 26.5 89 13.5 80.8 13.5z" />
  <use class="rot" xlink:href="#cog">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate"from="22.5 20 20" to="-337.5 20 20" dur="8s" repeatCount="indefinite"/>
  </use>
  <g transform="translate(60.3 0)">
    <use class="" xlink:href="#cog">
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="22.5 20 20" to="-337.5 20 20" dur="8s" repeatCount="indefinite"/>
    </use>
  </g>
</svg>


Orijinal cevabı :

Diğer bir svg dash-ofset kareyi bir animasyon özelliği yol ve animasyon kesik kullanabilirsiniz.

Bu ve basitleştirilmiş olabilir ve olmalıdır/a sancısı "gerçek dünya"

  • tüm elemanları <svg> bir etiket (bu daha kolay olur ve her iki zincir çarkları birlikte yeniden boyutlandırmak olabilir) içine dahil edilebilir
  • Zincir ve diÅŸli arasındaki senkronizasyon mükemmel deÄŸil ve zincir hız/boyut çekilmesi gerekiyor.

#one {
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Safari 4  */
  -moz-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Fx 5  */
  -o-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Opera 12  */
  animation: rotateClockwiseAnimation 5s linear infinite;
  /* IE 10 , Fx 29  */
}
#two {
  -webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite;
  /* Safari 4  */
  -moz-animation: rotateAntiClockwiseAnimation 5s linear infinite;
  /* Fx 5  */
  -o-animation: rotateAntiClockwiseAnimation 5s linear infinite;
  /* Opera 12  */
  animation: rotateAntiClockwiseAnimation 5s linear infinite;
  /* IE 10 , Fx 29  */
  position: absolute;
  top: 30px;
  left: 42px;
  width: 80px;
}
@-webkit-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-moz-keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-o-keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotateAntiClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
/******************************************************************************/

#chain {
  width: 650px;
  position: absolute;
  top: 24px;
  left: 35px;
}
.chain_st {
  stroke-dasharray: 1.5;
  stroke-dashoffset: 10;
  -webkit-animation: dash 18s infinite linear;
  -moz-animation: dash 18s infinite linear;
  -o-animation: dash 18s infinite linear;
  animation: dash 18s infinite linear;
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}
@-moz-keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}
@-o-keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}
keyframes dash {
  to {
    stroke-dashoffset: 100;
  }
}
<svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
  <defs>
    <circle id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25" />
    <path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85" />
  </defs>
  <use xlink:href="#c" />
  <use xlink:href="#d" />
  <use xlink:href="#d" transform="rotate(45, 50, 50)" />
</svg>

<svg id="two" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
  <use xlink:href="#one" />
</svg>
<svg id="chain" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 70 10">
  <path class="chain_st" stroke-width="0.5" stroke="#000" fill="transparent" d="M60 1 Q65 1 65 5 Q65 9 60 9 H6 Q1 9 1 5 Q1 1 6 1z" />
</svg>

Bunu PaylaÅŸ:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VÄ°DEO

Rastgele Yazarlar

  • Angry Paintballer

    Angry Paintb

    8 Ocak 2012
  • Call Me Howard

    Call Me Howa

    18 AÄžUSTOS 2012
  • LardTardProductions's channel

    LardTardProd

    10 NÄ°SAN 2009