JavaScript 및 CSS의 즐거움 - 랜덤 포인트

알겠습니다. 저는 방금 자바스크립트와 CSS에서 랜덤으로 애니메이션을 찍는 코드펜을 놓고 즐겁게 놀았습니다.
다음은 이 점을 어떻게 하는 기교들입니다.
먼저 HTML 및 CSS를 사용하여 화면에 점을 쉽게 만들 수 있습니다.

<div></div>

DIV는 의미가 없기 때문에 사용하기에 매우 의미가 있다.그러나 <div>이 필요할 때 <button>을 사용하는 것은 무의미하다.

div {
  position: absolute;
  top: 50px;
  left: 50px; 
  width: 100px;
  height: 100px;
  background: rgba(30,50,80,1);
  border-radius: 50% 50%;
}

이것은 화면 왼쪽 상단의 맨 위와 왼쪽에 100x100 픽셀의 점을 그립니다. 화면 왼쪽 상단에서 50 픽셀입니다.그것은 직사각형이 될 것이지만, 우리가 50% 50% 를 경계 반경으로 사용할 때, 그것은 점으로 변할 것이다.
이제 다른 측정 값으로 분홍색 점을 그리려면 숫자를 조정할 수 있습니다.

div {
  position: absolute;
  top: 200px;
  left: 500px; 
  width: 60px;
  height: 60px;
  background: rgba(230,50,80,1);
  border-radius: 50% 50%;
}

rgba 색 공간은 색을 빨간색, 녹색, 파란색, 알파로 정의합니다. 이것이 바로 색의 투명도입니다.따라서 rgba(00255,0.5)는 반투명한 파란색이 될 것이다.
이 예를 보시면, "other"라는 클래스를 추가하고 삭제할 수 있습니다. (이것이 바로 이 예에서 자바스크립트가 한 것) 점의 두 가지 상태를 전환할 수 있습니다.
깔끔하지만 매끄럽지 않아요.한 상태에서 다른 상태로 매끄러운 전환을 실현하기 위해 CSS에는 전환이라는 아주 좋은 것이 있다.우리가 해야 할 일은 단지 CSS 엔진이 한 상태에서 다른 상태로 이행하는 데 얼마나 걸려야 원점의 크기, 위치, 색깔이 매끄럽게 변화할 수 있는지 알려주는 것이다.이 경우 500ms(반초)를 사용하겠습니다.

/* blue dot */
div {
  position: absolute;
  top: 50px;
  left: 50px; 
  width: 100px;
  height: 100px;
  background: rgba(30,50,80,1);
  border-radius: 50% 50%;
  transition: 500ms;
}
/* pink dot */
div.other {
  position: absolute;
  top: 200px;
  left: 500px; 
  width: 60px;
  height: 60px;
  background: rgba(230,50,80,1);
  border-radius: 50% 50%;
  transition: 500ms;
}

이제 버튼을 클릭하여 한 상태와 다른 상태 사이를 원활하게 전환합니다.
지금까지는 괜찮았나요?이제 JavaScript를 사용하여 모든 CSS 값을 동적으로 설정할 수도 있습니다.Google은 Google의 어떤 코드보다도 CSS에 대한 전환을 남겨 놓았습니다.
다음은 프레젠테이션의 모든 코드입니다.

// grab all DIV elements in the document
let divs = document.querySelectorAll('div');

// helper method to get a multitude of a
// random number as an integer 
const rand = (multi) => {
  return parseInt(multi * Math.random() ,10);
}

// get width and height of the window
let ww = window.innerWidth;
let wh = window.innerHeight;

// define biggest possible value as constraint
let constraint = Math.min(ww, wh);

// move the dots by changing the CSS values
function move(){

  // loop over all DIV elements
  divs.forEach((div) => {

    // Balls can be the width of the constraint 
    // or less
    let w = rand(constraint);

    // x and y position limited to screen space
    let x = rand((ww - w));
    let y = rand((wh - w));

    // apply styles
    div.style.width = w + 'px'; 
    div.style.height = w + 'px'; 
    div.style.top = y + 'px'; 
    div.style.left = x + 'px';

    // 'move' dot with 900ms or more
    div.style.transition = (rand(100) + 900) +'ms';

    // apply random colour
    div.style.background = `rgba(
      ${rand(255)},
      ${rand(255)},
      ${rand(255)},
      ${Math.random() + 0.5}
    )`;
  });
}

// change dots every second
window.setInterval(move, 1000);

너무 많은데?그래.조금씩 살펴보겠습니다.

// grab all DIV elements in the document
let divs = document.querySelectorAll('div');

이것은 문서의 모든 DIV 요소를 가져오고 인용을 divs이라는 집합에 저장합니다.우리는 단지 이렇게 한 번만 할 수 있다. 왜냐하면 그것들은 변하지 않기 때문에 계속 읽는 것은 무의미하다.

// helper method to get a multitude of a
// random number as an integer 
const rand = (multi) => {
  return parseInt(multi * Math.random() ,10);
}

JavaScript의 Math.random() 메서드는 0과 1 사이의 "무작위"값을 반환합니다.컴퓨터는 무작위 일을 잘하지 못하지만, 우리에게는 이 정도면 충분할 것이다.우리가 1보다 큰 값을 원할 때, 우리는 그것을 숫자에 곱한다.우리는 132.965324234223과 같은 숫자를 원하지 않기 때문에 기수가 10인 parseInt()을 사용하여 132로 전환한다.DIV을 왼쪽 132.96532423 픽셀의 위치에 두는 것은 큰 의미가 없고 CSS 엔진의 경우 132로 전환하는 것도 빠르다.

// get width and height of the window
let ww = window.innerWidth;
let wh = window.innerHeight;

// define biggest possible value as constraint
let constraint = Math.min(ww, wh);

우리는 창의 높이와 너비를 읽어서 점이 창의 제한 안에 있고 스크롤 바가 생기지 않도록 합니다.이 원점들은 넓고 높기 때문에, 우리는 또 가장 큰 가능성의 크기를 알고 싶다.우리는 창이 더 높은지 더 넓은지 찾아내서 이를 실현한다(Math.min(n1, n2)은 n1과 n2의 비교적 작은 숫자를 되돌려줌으로써 어리석은 if 문장을 피하는 데 도움이 된다).

// move the dots by changing the CSS values
function move(){
...
}

// change dots every second
window.setInterval(move, 1000);

나머지 기능은 move() 함수에 있다.window.setInterval을 사용하면 우리는 매초(또는 1000밀리초)에 한 번씩 이 함수를 호출합니다.
다음은 move() 함수의 기능입니다.

// move the dots by changing the CSS values
function move(){

  // loop over all DIV elements
  divs.forEach((div) => {

이 함수를 호출할 때마다 문서의 모든 DIV 요소를 누비며 현재 요소의 참조를 루프에 div 가져옵니다.그리고 우리는 원점의 크기와 위치를 계산한다.

    // Balls can be the width of the constraint 
    // or less
    let w = rand(constraint);

    // x and y position limited to screen space
    let x = rand((ww - w));
    let y = rand((wh - w));

점의 최대 값은 현재 화면의 전체 높이 또는 전체 너비여야 합니다.우리는 일찍이 이 점을 발견하여 constraint 값에 저장했다.우리는 0과 이 값 사이의 '무작위' 값을 얻어 w으로 저장했다.그런 다음 점의 위쪽과 왼쪽 위치를 0과 화면 너비 사이의 무작위 수로 계산하여 점의 너비와 화면의 높이를 각각 줄입니다.

    // apply styles
    div.style.width = w + 'px'; 
    div.style.height = w + 'px'; 
    div.style.top = y + 'px'; 
    div.style.left = x + 'px';

    // 'move' dot with 900ms or more
    div.style.transition = (rand(100) + 900) +'ms';

    // apply random colour
    div.style.background = `rgba(
      ${rand(255)},
      ${rand(255)},
      ${rand(255)},
      ${Math.random() + 0.5}
    )`;
  });
}

남은 유일한 일은 style의 div 집합을 변경하고 900ms 이상으로 무작위로 전환하고 무작위 색을 추가하는 것이다.밥이 니 삼촌이야.
놀라운 코드인가요?아니, 이렇게 하는 게 재미있어?나한텐 그래.나는 네가 여기서도 약간의 재미있는 것을 발견하길 바란다.