TIL

transform

CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.
none이 아닌 값을 지정하면 새로운 쌓임 맥락을 생성합니다. 이 경우, position이 fixed거나 absolute인 요소의 컨테이닝 블록으로서 작용합니다.

keyframes

@keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@keyframes @규칙은 CSS 오브젝트 모델 인터페이스인 CSSKeyframesRule를 통해서 접근합니다.

키프레임을 사용하려면 @keyframes 룰을 애니메이션과 키프레임 리스트를 매칭시킬 animation-name 속성에서 사용할 이름과 함께 생성합니다. 각 @keyframes 룰은 키프레임 선택자의 스타일 리스트를 포함하고 있고, 각 리스트는 각 키프레임이 생성되고 키프레임의 스타일 정보를 포함하고 있는 지점에서 사용할 %로 구성됩니다.

키프레임은 순서대로 나열 가능합니다. 지정된 %의 순서대로 처리됩니다.

requestAnimationFrame

window.requestAnimationFrame()은 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받습니다.
노트: 다음 리페인트에서 그 다음 프레임을 애니메이트하려면 콜백 루틴이 반드시 스스로 requestAnimationFrame()을 호출해야합니다.
화면에 새로운 애니메이션을 업데이트할 준비가 될때마다 이 메소드를 호출하는것이 좋습니다. 이는 브라우저가 다음 리페인트를 수행하기전에 호출된 애니메이션 함수를 요청합니다. 콜백의 수는 보통 1초에 60회지만, 일반적으로 대부분의 브라우저에서는 W3C 권장사항에 따라 그 수가 디스플레이 주사율과 일치하게됩니다. 대부분의 최신 브라우저에서는 성능과 배터리 수명 향상을 위해 requestAnimationFrame() 호출은 백그라운드 탭이나 hidden <iframe>에서 실행이 중단됩니다.

콜백 메소드에는 requestAnimationFrame()이 대기된 콜백을 실행하는 시점을 나타내는 단일 인자 DOMHighResTimeStamp가 전달됩니다. 따라서, 모든 이전 콜백의 작업 부하를 계산하는동안 시간이 지나갔음에도 불구하고 단일 프레임에서의 다중 콜백은 각각 동일한 타임스탬프를 받습니다. 이 타임스탬프는 밀리초 단위의 십진수지만, 최소 정밀도는 1ms (1000 µs) 입니다.

오늘은...

설날연휴 2일차이자 설날당일 인터넷을 켜고 구글로 들어가자마자 눈에 띈것. 설날 이펙트

그래도 배우는게 있는데 흥미가 없을수가 없었다.
물론 표현되는 저것이 내가 만들고자 하는 것처럼 구성되어 있을리는 없지만, 만들어 보자하고 생각난 주제라서 시도하기로 하였다.
처음에는 js 기반으로 구성하려고 했으나 너무 무거워지고 버벅이는것 같아 방향을 선회 움직임같은것들은 css 에서 제공하는기능으로 대체 하기로 하였다.
그렇게 찾아본 기능들 transform, trasition
그리고 상세한 이동을 정의할 keyframe
하지만 실제 적용단계에서 구상한것과는 다른 방식때문에 상세한 움직임은 적용실패 단순한 움직임으로 폭죽 모양만 모사 하는 단계로 그쳤다.
폭죽 결과물
그런것을 모각코에서 이야기하던중 동기 한분이 알려주신 키워드
requestAnimationFrame
좀더 정밀한 에니메이션 제어를 위해 사용되는 명령어 였다. 다만 정말 정밀하게 사용하기위해 시간단위의 움직임을 고안해야한다는 것 (우선 확인 해본곳에서는 그렇게 이야기하였다. 그래서 우선 그렇게 구성하였고.)
이것은 언젠가 css 구성물들을 돌아보다가 봤었던 물결처럼 흘러가는 원들이떠올라서 그것을 모사하기로 하였다.
우선은 사인곡선을 기반으로 구성하고 개개 div에 원형으로 만들고 테두리만 색을 입혀서 원을 구성 위치를 직접 수정하기위해 포지션을 absolute로 주고 시간에 따라 움직이게 설계하고 하나의 원으로 테스트 어느정도 안정되고서는 다량의 원을띄워서 구동은 성공하였으나. 영역을 벗어나는 원때문인지 메인화면 경게가 오락가락해진다. 그 부분을 수정하기 위해 이래저래 돌아다녀서 확인한건 위에서 정의한 포지션 타입의 문제. fixed로 수정하고 마무리했다.
requestAnimationFrame 결과물