Nasıl daha akıcı öğesi içindeki bir arka plan gradyan bir dönüşünü animasyon için?

oy
0

Bir düğme var ve bunu çevirerek arka planı canlandırmak istiyoruz:

.gradient-button {
  animation: rotate-gradient 1s infinite;
  background-image: linear-gradient(0deg, red, yellow, green);
}

@keyframes rotate-gradient {
  0% {
    background-image: linear-gradient(0deg, red, yellow, green);
  }
  /* Adding a step in the middle */
  20% {
    background-image: linear-gradient(60deg, red, yellow, green);
  }
  40% {
    background-image: linear-gradient(120deg, red, yellow, green);
  }
  60% {
    background-image: linear-gradient(180deg, red, yellow, green);
  }
  80% {
    background-image: linear-gradient(240deg, red, yellow, green);
  }
  100% {
    background-image: linear-gradient(300deg, red, yellow, green);
  }
}
<button id=fill class=gradient-button>Fill Form</button>

Ancak sadece 6 adımlar vardır ve animasyon elle 24 kare ekleyerek, akıcı olmayan ters olduğunu.

Alternatif JS çalıştı:

$(document).ready(function () {
    AnimateRotate(360);
});


function AnimateRotate(d){
    var elem = $(#mybutton);

    $({deg: 0}).animate({deg: d}, {
        duration: 2000,
        step: function(now){
            elem.css({
                 background-image:linear-gradient(+now+deg, red, yellow, green);
            });
        }
    });
}

ama bu bir şey yapmaz. Soru: Bu nasıl animasyon akıcı hale getirmek için? Koşu kodu: https://codepen.io/anon/pen/OaojNP

Oluştur 27/11/2018 saat 18:13
kaynak kullanıcı
Diğer dillerde...                            


3 cevaplar

oy
3

background-imagedeğil canlandırılabilir . Sen mutlak konumlandırılmış (sözde) öğesi ekleyin olabilir ve döndürmeye dönüşümü kullanmak, sürece taşması gizlemek olarak ve limitler görünür asla emin olun.

Eğer Ama eğer gerçekten (o serin çünkü ve mümkün) dönen bir arka plan istiyorum, bir kullanabiliriz <svg>degrade yönünü döndürmek için arka plan ve SMIL animasyonlar gibi:

<svg width="240" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient" x1="0" x2="0" y1="0" y2="1">
        <animate attributeName="x1" values="0;0;1;1;0" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
        <animate attributeName="y1" values="0;1;1;0;0" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
        <animate attributeName="x2" values="1;1;0;0;1" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
        <animate attributeName="y2" values="1;0;0;1;1" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="yellow"/>
        <stop offset="100%" stop-color="green"/>
      </linearGradient>
  </defs>
  <rect x="0" y="-90" width="240" height="240" fill="url(#Gradient)"/>
  
</svg>

Açıklama : Bu eleman kendisi dönen olmadan degrade arka yönünü döndürmek aslında tek yolu (bildiğim) olduğu için ben bu cevabı yayınlanmıştır. Bu bir eleman başka bir şey dönüşümü veya ne değişir istemiyorum ihtiyacı bazı kenar durumlarda yararlı olduğu ortaya dönüşebilir.
Olası kullanım kılıfı: kompleks kap şekilleri (düşünce yolları) veya taşma için gereken unsurları.

Yorumlarında ChrisW işaret ettiği gibi, IE ve Kenar hala SMIL animasyonlar için destek eklememiş. Ancak, orada polyfill bunun için.

Yani, mutlaka tercih edilmelidir anlamına gelmez teknik olarak mümkün sırf söyledi transform. İçimdeki his SMIL biraz daha pahalı (bildiğim kadarıyla hesaplama gider) 'dir, ama bu yedeklemek için herhangi bir test gerçekleştirilmiştir değil.
Ayrıca transform, daha az ayrıntılı dolayısıyla daha pratiktir.

Cevap 27/11/2018 saat 19:01
kaynak kullanıcı

oy
3

benim olsaydı doğrusal gradyan her bir özellik değişikliği aracılığıyla basmadan pürüzsüz kare animasyon yapmak için zor olacak çünkü ben muhtemelen yanılsama farklı bir yol alırdım. Bunun yerine alternatif bir yaklaşım olarak, belki de aynı arzu edilen bir sonuç verebilecek bir sözde elemanına dönüşümü?

Haddi zatında;

.gradient-button {
  position: relative;
  overflow: hidden;
  background-color: transparent;
}

.gradient-button:after {
  content: '';
  display: block;
  z-index: -1;
  position: absolute;
  top: -2rem; right: 0; bottom: -2rem; left: 0;
  background-image: linear-gradient(red, yellow, green);
  animation: rotate-gradient linear 1s infinite;
}

@keyframes rotate-gradient {
  to { transform: rotate(360deg) }
}
<button id="fill" class="gradient-button">Fill Form</button>

Cevap 27/11/2018 saat 18:35
kaynak kullanıcı

oy
2

Eğer hiç İşaretlemenizi değiştirebilir miyim? Eğer öyleyse, ayrı bir eleman üzerinde rotasyon animasyon olabilir.

.gradient-button {
  position: relative;
  overflow: hidden;
  width: auto;
  display: inline-block;
}

.gradient-button>.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-image: linear-gradient(90deg, red 45%, yellow 50%, green 55%);
  animation: spin 1s linear infinite;
}

.gradient-button>.label {
  position: relative;
}

@keyframes spin {
  from {
    transform: rotate(0deg) scale(5);
  }
  to {
    transform: rotate(360deg) scale(5);
  }
}
<a id="fill" class="gradient-button">
  <span class="bg"></span>
  <span class="label">Fill Form</span>
</a>

Codepen

Cevap 27/11/2018 saat 18:42
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more