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:
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
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ÅŸ:
AYNI ETÄ°KETTEKÄ° VÄ°DEOLAR
YORUMLAR
SPONSOR VÄ°DEO
Rastgele Yazarlar
-
BuzzFeedVide
10 AÄžUSTOS 2011 -
case LianLi
28 Mayıs 2010 -
placeboing
7 Mart 2006
Nasıl Seri % Gibi SQL yapmak için?...
Nasıl Android pürüzsüz görüntü bir dön...
Nasıl vurgulama gibi açıklama yapmak, ...
Nasıl olmayan bir yazı tipi belirli bi...
Nasıl Google gibi bir ActionBar kaydır...