CSS 팁: CSS의 난수

최근 우연히 흥미로운 문제에 직면했습니다. 애니메이션 지속 시간 값을 무작위로 설정하고 싶습니다. 이것은 무작위가 아닌 예입니다:

이것은 제가 CSS로 작성한 애니메이션입니다:

@keyframes flicker {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#red {
  animation: flicker 2s ease alternate infinite;
}

현재는 잘 작동하고 있지만 여기서는 무작위화가 없고 애니메이션 실행 시간이 고정되어 있습니다. 2초에.

내가 원하는 애니메이션은 실행 시간이 2초 이내인 임의의 숫자입니다. 제가 원하는 효과는 다음과 같습니다:

.element {
  animation: flicker $randomNumber alternate infinite;
}

여기서 $randomNumber는 특정 함수에 의해 생성된 난수입니다.

Sass와 같은 CSS 전처리기는 다음과 같은 기능을 제공합니다.

$randomNumber: random(5);

.thing {
  animation-duration: $randomNumber + s;
}

이것은 원하는 것일 수도 있지만 제가 원하는 것은 아닙니다. 전처리기는 난수를 생성합니다.

Sass中，随机数生成过程就像是从一个故事中选择名字的过程，它仅仅在写完之后随机取出，然后它就不再变化了。
— jake albaugh (@jake_albaugh) 2016年12月29日

즉, CSS 전처리기가 실행되면 무작위화 프로세스가 종료되고 생성된 난수는 영원히(즉 CSS 전처리기가 재생성될 때까지) 값으로 고정됩니다. )

JavaScript의 Random 함수(예: Math.random())처럼 JavaScript가 실행되는 경우 난수를 생성하지 않습니다.

정말 죄송하면서도 CSS 변수(CSS 고유의 속성)를 활용해볼 수 있는 절호의 기회였다는 걸 깨달았어요! 이를 사용하여 난수를 생성하는 것은 쉬운 작업이 아니지만 여전히 도움이 될 수 있습니다.

낯설더라도 걱정하지 마세요. 실제로 CSS 변수는 내장되어 있으며 SASS 및 LESS와 같은 CSS 전처리기에서 이미 익숙한 변수와는 다릅니다. Chris가 나열한 다양한 이점을 여기에서 확인하세요.

●전처리를 사용하지 않고도 사용할 수 있습니다.

●계단식으로 연결되어 있습니다. 이 변수의 값을 설정하거나 모든 선택기에서 현재 변수 참조를 재정의할 수 있습니다.

●값이 변경되면(예: 미디어 쿼리 또는 기타 상태 변경) 브라우저가 다시 렌더링됩니다.

●JavaScript를 사용하여 해당 값에 액세스하고 조작할 수 있습니다.

마지막 점이 우리에게 중요합니다. JavaScript에서 난수를 생성하고 생성된 값을 CSS 변수로 설정합니다.

CSS 사용자 정의 속성을 설정하고 기본값을 지정합니다(값을 작성할 때 어떤 이유로 JavaScript가 실패하는 경우에 유용합니다).

/* 设置默认的动画执行时间 */
:root {
  --animation-time: 2s; 
  }

이제 다음에서 이 변수를 사용할 수 있습니다. CSS는 다음과 같습니다.

#red {
  animation: flicker var(--animation-time) ease alternate infinite;
  }

더 이상 고민하지 말고 바로 시작하겠습니다. 이 애니메이션은 이전 SVG 애니메이션 중 하나처럼 보이지만 CSS 변수를 사용하여 작성되었으며 변수 값을 변경하여 어떻게 작동하는지 테스트할 수 있습니다. 실시간으로 효과를 미리 볼 수 있습니다.

이제 JavaScript를 사용하여 이 변수에 액세스하고 조작합니다.

var time = Math.random();

여기서 SVG를 사용하여 생성된 빨간색 원을 찾고 setProperty를 사용하여 --animation-time 값을 변경할 수 있습니다.

var red = document.querySelector('#red');
red.style.setProperty('--animation-time', time +'s');

여기를 보세요! SVG 애니메이션 요소에 임의의 숫자가 설정되었습니다.

CodePen에서 Robin Rendle(@robinrendle)이 작성한 CSS 난수 #3의 예를 살펴보세요.

값이 JavaScript 실행 시 생성되는 난수이고, 매번 변경되기 때문에 이전보다 크게 개선되었습니다. 이렇게 하면 우리가 원하는 효과를 성공적으로 얻을 수 있지만 여전히 약간의 문제가 있습니다. 런타임에 임의의 숫자가 주기적으로 애니메이션되는 기간입니다.

다행히도 이제 JavaScript를 사용할 수 있습니다. 사용자 정의 변수의 값 우리가 원하는 대로 업데이트될 수 있습니다. 다음은 animation-duration 값을 매초마다 업데이트하는 예입니다.

var red = document.querySelector('#red');

function setProperty(duration) {
  red.style.setProperty('--animation-time', duration +'s');
}

function changeAnimationTime() {
  var animationDuration = Math.random();
  setProperty(animationDuration);
}

setInterval(changeAnimationTime, 1000);

이것이 바로 제가 원하는 것입니다. CodePen에서 Robin Rendle(@robinrendle)이 작성한 CSS 난수 #4의 예를 확인하세요.

그러나 CSS 변수(맞춤 속성)에 대한 지원은 아직 썩 좋지 않으니 사용 시 주의하시기 바랍니다. 다음과 같이 점진적인 향상 애니메이션을 구현할 수 있습니다.

#red {
  animation: flicker .5s ease alternate infinite;
  animation: flicker var(--animation-time) ease alternate infinite;}

CSS 변수가 지원되지 않으면 애니메이션의 일부도 볼 수 있습니다. 비록 제 생각에는 완벽하지는 않지만요.

---

다행히 CSS 변수가 임의의 애니메이션 기간 값을 생성할 수 있는 유일한 방법은 아닙니다. JavaScript를 사용하여 DOM을 조작하고 스타일에 직접 값을 설정할 수 있습니다.

var red = document.querySelector('#red');
red.style.animationDuration = Math.floor(Math.random() * 5 + 1) + "s";

이러한 효과를 원한다면 새 시간을 설정하기 전에 애니메이션이 완료될 때까지 기다릴 수도 있습니다.

var red = document.querySelector('#red');

function setRandomAnimationDuration() {
  red.style.animationDuration = Math.floor(Math.random() * 10 + 1) + "s";
}

red.addEventListener("animationiteration", setRandomAnimationDuration);

---

이것은 이를 달성할 수 있는 가능한 방법의 목록일 뿐입니다. EQCSS를 사용하여 이 효과를 얻을 수도 있습니다.

@element '#animation' {
  .element {
    animation-duration: eval('rand')s;
  }}

var rand = Math.random();EQCSS.apply();

---

CSS 자체가 올바른 무작위를 생성할 수 있도록 하시겠습니까? 지금까지 관련 정보를 본 적이 없습니다. 있더라도 실제로 사용하려면 시간이 좀 걸릴 수 있습니다.