% CSS: 애니메이션 SVG에 포함된 서버 생성 데이터 비트를 가져오고 추출합니다.

이것은 CSS에서 32비트 API 응답 데이터 가져오기에 대한 직접적인 후속 조치입니다

CSS에서는 16비트의 응답 데이터가 고유 너비와 고유 높이에 모두 배치되어 (JavaScript 없이) API 응답 데이터를 전혀 얻을 수 없었던 점에서 큰 개선이 되었습니다...

그러나 그것을 깨닫고 며칠이 지나자 내 마음은 한 방향으로 기울었습니다.
2번이 아니라 16비트32번이면 훨씬 더 재미있을 것입니다.

유출을 위해 512비트를 SVG로 압축

잠들기 전 명상을 하다가 또 다른 영감이 떠올랐어요 -

"이미지 문서 자체가 자체 고유 크기에 애니메이션을 적용할 수 있다면 어떨까요?"

영감을 받은 생각 이후에 깨달음의 일반적인 연쇄는 그것이 어떻게 성취될 수 있는지에 대한 이해와 함께 번쩍였습니다... 저는 단지 그러한 이미지 유형이 존재하는지 알아내야 했습니다.

저는 휴대폰을 들고 제가 알고 있는 모든 애니메이션 이미지 형식을 검색하여 그중에 지원되는 것이 있는지 확인했습니다. svg, webp, apng, gif, 어쩌면 이상한 동영상 형식이신가요? 찾을 수 없었습니다.

아침에 SVG를 계속 찾아보세요.

라는 마음의 무언가가 들었습니다.

내장된 CSS, 미디어 쿼리, 사용된 정의, 더 많은 사용된 정의를 시도하고 수많은 SVG 애니메이션 문서를 살펴보고 속이려고 노력했으며 다른 아이디어와 애니메이션 관련 속성을 읽었습니다. 아무것도 할 수 없었습니다. 높이 또는 너비를 설정하세요.

그런데 마지막 링크를 보고 생각이 나더군요...

...viewBox는 어떻습니까? 해결해야 할 또 다른 장애물이 있겠지만... 그것 애니메이션이 가능할까요?

vvv
그렇습니다!!
^^^

솔루션 공간 정리

이제 문제는 루트 svg 요소에 너비 및 높이 속성을 설정하지 않은 다음 svg를 의사의 콘텐츠로 사용하려고 하면 0px x 0px로 렌더링된다는 것입니다. 왜냐하면 벡터 문서이고 더 이상 고유한 크기입니다.

그래서 PreserveAspectRatio를 검색하고 추가했습니다... 여전히 0x0입니다... 하지만 CSS에서 너비를 10px로 고정하고 viewBox의 보존된 가로세로 비율에 따라 높이가 결정되도록 했습니다. SVG에 포함된 애니메이션) aaand... 이를 포함하는 html 요소가 예상 높이까지 커졌습니다.

:3

프레임이 하나만 있는 경우 원본 32비트를 가져와서 반으로 줄였습니다. 한 차원만 추출할 수 있고 다른 차원은 정적이기 때문입니다.

하지만! 이제 제 2차원은 시간이었고 첫 번째 차원은 시간에 좌우되기 때문에 보유할 수 있는 데이터가 충분합니다.

정말 신난다!

SVG에서 애니메이션을 제어하는 ​​방법에 대해 배울 수 있는 모든 것을 배웠고 서버 측 스크립트를 작성하여 첫 번째 애니메이션 SVG를 생성했습니다.

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

(왜 PHP를 사용하나요?! - 이미 몇 년 동안 비용을 지불해 온 서버가 있었기 때문에 PHP를 즉시 실행할 수 있도록 설정했습니다.... 그리고 JavaScript와 노드를 알고 멋진 생활을 벌었음에도 불구하고 정말 그렇습니다. 때로는 구체적인 내용을 알지 못해도 할 수 알고 있는 작업을 진행하기 위해 모든 단일 함수, 연산자 및 구문을 찾아보는 것이 재밌습니다. ㅋㅋ)

이제 이전 기사에서 첫 번째 % CSS: 애니메이션 SVG에 포함된 서버 생성 데이터 비트를 가져오고 추출합니다.을 포크하여 CSS가 SVG의 틱에 따라 size --vars에 응답하고 변경되는 것을 살펴보겠습니다.

확인! 크기 변화를 읽을 수 있습니다. 이전 글과 마찬가지로 결국에는 tan(atan2()) 기법 대신 뷰-타임라인 측정 기법을 사용하게 됩니다.

내 CPU를 요리하므로 추출이 완료되면 콘텐츠에서 CPU를 제거해야 합니다.

개념적으로 1차원 시간을 절차적으로 추출하는 방법

위의 데모는 그 자체로는 그다지 유용하지 않습니다. 높이가 있을 때마다 사본을 보고하지만 저장해야 합니다... 순서를 모르고 신뢰할 수 없다면 16비트 값이 무슨 소용이 있을까요?

CPU Hack을 사용하여 CSS에 값을 축적할 수 있고 어떤 --var가 이전 값을 유지하는 대신 업데이트되는 수신 값을 수학적으로 결정할 수 있다는 것을 알고 있으므로 CSS에 대해서는 특별히 걱정하지 않겠습니다. 일반적으로 시간이 지남에 따라 어떻게 1D를 추출할 수 있나요?

센티넬의 가치가 구출됩니다!

데이터 패킷 자체를 16비트로 제한하고 싶어도 우리가 사용하는 측정 영역의 크기를 16비트로 제한할 필요는 없습니다. 그래서 우리도 거기에 파수꾼 몇 명을 넣을 수 있습니다. css-api-fetch는 65535(16비트 상한선)보다 훨씬 높은 최대 99999까지의 값을 처리할 수 있는 기능을 제공합니다.

그럼 우리가 알아야 할 것은 무엇인가요?

어떤 문제에 직면할 수 있나요?

데이터의 두 값이 연속적으로 동일한 경우, 두 개의 서로 다른 패킷임을 알기 위해 중단이 필요합니다. 저는 이미 512비트를 목표로 하기로 결정했습니다. 따라서 SVG 애니메이션에는 최대 32개의 16비트 데이터 프레임과 그 사이에 센티넬 프레임이 있어야 합니다...

CPU가 무겁게 느껴지면 SVG 애니메이션이 개별 단계를 완전히 건너뛰는 것처럼 보일 수 있습니다. 이는 우리가 현재 진행 중인 단계를 항상 알 수 있는 방법이 필요하다는 것을 의미합니다. 따라서 단일 "데이터 프레임 간" 센티널 대신 데이터 인덱스(CSS nth-* 선택기와 같은 1 기반)를 센티넬 값으로 사용하여 해당 인덱스에 대한 데이터를 표시하는 개별 단계 전에 자체 개별 단계를 만들어 보겠습니다.

센티넬 지수 -> 데이터 -> 센티넬 인덱스 -> 데이터...

이를 통해 루프가 언제 반복되는지, 잠재적으로 센티넬 1에 도달할 때 알 수 있습니다.

하지만 다른 데이터 프레임으로 건너뛰지 않았고 실수로 잘못된 슬롯에 기록하게 되었는지는 어떻게 알 수 있습니까?

반복해서 올바를 때까지 계속해야 하며, 데이터가 올바른지 확인하는 가장 좋은 방법은 체크섬입니다! 따라서 또 다른 데이터 프레임과 해당 값에 대한 센티널이 필요합니다.

체크섬 알고리즘 생성

css-bin-bits를 사용하여 모든 데이터를 XOR할 수 있지만 꽤 무거워서 다른 곳에서는 필요하지 않습니다. CSS에서 간단하게 수행할 수 있는 대안을 선택하겠습니다.

수학적으로 16비트 값을 256(하한에서 정수)으로 나누고 다시 16비트 값을 256으로 모듈로 취하면 상위 바이트와 하위 바이트를 얻습니다. 8비트 값을 합치면 9비트가 됩니다. 이는 합리적인 체크섬 접근 방식처럼 느껴지지만 다시 이 문제로 돌아가 보겠습니다.

최종 체크섬이 16비트라면 체크섬을 계산하기 위해 16비트 범위에 머물 필요는 없으므로 모든 것을 합산해 보겠습니다(최대). 32개의 값.

하지만 건너뛴 프레임으로 인해 잘못된 저장소 쓰기에 주의해야 하므로 짝수 인덱스 값을 두 번 추가하여 일부 순서가 되도록 하겠습니다.

16비트 값을 32번 더하고 16번을 더하면 약 22비트가 됩니다. 이전 생각으로 돌아가서 양쪽에 11비트를 나누어 모듈화한 다음 이를 함께 추가하여 체크섬 응답으로 12비트를 제공합니다.

합리적으로 보입니다... 완전히 오류가 방지되는 것은 아니지만 SVG는 지금 동일한 체크섬을 생성할 수 있는 방식으로 여러 단계를 건너뛰어야 합니다... 어쨌든 데이터도 다시 보내도록 하겠습니다. 길이를 체크섬의 마지막 단계에 추가하면 체크섬에도 포함됩니다. 최대 데이터 길이(우리가 처리하려는 16비트 값의 수)는 32에 불과하므로 12비트에 길이 값을 추가해도 16비트를 넘지 않습니다. 이야!

_{스포일러: 제가 한 작업은 이렇습니다 CSS는 약 21비트 정도에서 손실이 발생하여 이를 분할하고 동일한 알고리즘을 한 번에 더 작은 단위로 효과적으로 수행했습니다. 서버 측은 설명된 대로 정확하게 alg를 사용합니다.}

기술적으로 우리가 설명한 설정을 사용하면 각 센티널이 애니메이션에서 다음 프레임이 어떤 인덱스에 있어야 하는지 알려주는 한 애니메이션의 순서는 중요하지 않습니다. >데이터

.

한 가지 더, 응답에 데이터 길이 값을 먼저 배치하고 이에 대한 센티널도 추가해 보겠습니다(SVG 애니메이션의 센티널은 나머지 데이터와 마찬가지로 값 앞에 위치함).

34명의 파수꾼입니다. SVG viewBox 높이는 0이 될 수 없으며 CSS는 0이 내부적으로 데이터를 나타내지 않도록 허용함으로써 이점을 얻을 수 있으므로 35개의 센티널이 있고 0은 의도적으로 사용되지 않는다고 가정해 보겠습니다.

이제 모든 데이터 프레임은 35개의 값이 추가되어 SVG에 포함됩니다. 길이 및 체크섬 데이터 값도 viewbox 값에 35를 추가합니다. 센티넬을 나타내는 SVG 애니메이션의 viewBox 높이는 0 ~ 34(0 건너뛰기) 값을 가지며 각각은 SVG 애니메이션의 다음 프레임이 나타내는 내용을 정확하게 알려줍니다.

CSS 측에서는 원시 측정값이 34보다 큰지 확인하면 데이터이므로 여기서 35를 빼고, 35보다 작으면 센티널입니다.

CSS로 512비트 추출 시작

SVG 애니메이션을 세부적으로 생성하기 위해 PHP 측을 마친 후 이 추출 프로세스를 위해 CSS를 시작하는 구체적인 방법을 생각했습니다.

PHP 코드는 다음과 같습니다!

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

CSS에서 이를 수행할 수 있는 몇 가지 방법이 있으며 최근 사양이 추가되면서 더 많은 방법이 제공될 수 있습니다.

첫 번째 접근 방식은 개념적으로 가장 쉽습니다. 모든 데이터에 대해 뷰 타임라인을 사용하고 동일한 작업을 반복해서 수행하는 것입니다. 그것은 효과가 있었지만 나는 그것이 얼마나 역겨운 지에 대한 불만으로 나의 진행 과정을 통해 신음했습니다. 계속하면 :root에 거의 40개의 애니메이션이 있을 것입니다.

그래서 자러갔습니다.

잠에서 깨어났을 때, 방금 잠에서 깨어났을 때나 명상을 했을 때의 윙윙거리는 기분으로 미소를 지으며 창밖을 바라보며 몇 분 동안 누워 있었는데, 생각의 불꽃이 내 머릿속으로 몰려왔습니다. 나는 몸을 구부리고 노트북과 가장 가까운 펜을 들고 침대에 앉아 단 6개의 CSS 애니메이션으로 알고리즘을 적기 시작했습니다.

문자 그대로 종이에 풀었습니다. 이것이 정확히 구현된 방식입니다.

일어나 컴퓨터를 켜고 이전 작업을 무시하고 새 % CSS: 애니메이션 SVG에 포함된 서버 생성 데이터 비트를 가져오고 추출합니다.을 열었습니다.

나는 치킨 스크래치 사이에 표시된 4개의 html 요소를 설정한 다음 이에 해당하는 4개의 빈 클래스 선택기 주위에 메모로 CSS 패널을 가득 채웠습니다. 지금은 :root에 없지만 여기에 의존하는 모든 항목을 내부에 배치할 수 있습니다.

종이에서 메모를 복사하고 % CSS: 애니메이션 SVG에 포함된 서버 생성 데이터 비트를 가져오고 추출합니다.에 더 구체적인 세부 사항을 작성할 때까지는 어떤 기능도 추가되지 않았습니다.

작업이 끝나면 노트를 읽고 그 내용을 구현하기 시작하여 최종 작업 결과를 얻었습니다.

(256비트로 테스트할 예정이라 '35' 대신 '20'을 썼습니다)

어떻게 작동하는지 자세히 알아보겠습니다. 뷰 타임라인 및 타임라인 범위로 인해 표면이 애니메이션되어 "구멍"으로 빨려 들어가는 모습을 상상할 수 있으면 클라인 병 모양과 같이 데이터가 흐르도록 설정할 수 있습니다. 좁은 상단에서 아래쪽으로 백업됩니다. 다시 표면 위로 돔 레이어를 통해 크기와 복잡성을 얻은 다음 블랙홀을 통해 더 높은 의식(:root)으로 다시 순환합니다.

대부분 수직 순환입니다(주로 수평 순환 또는 정적인 순환이 아님)

CSS로 512비트 추출

약간 수정하여 더욱 명확하게 만든 메모:

256 테스트 -> 512 결승

그리고 내부에 프리젠테이션 노드를 추가했는데, 알고리즘이 실행될 때 내부도 보여줄 수 있어서 좋습니다.

여기에는 구현 및 프리젠테이션에 대한 잡음이 전혀 없는 최종 메모가 있습니다. 이는 모든 작동 방식을 정확하게 설명합니다.

이렇게 많은 세부정보를 외부에 삽입하는 것은 기사의 형태에 좋지 않을 수 있지만 각 부분을 나누어 어떻게 구현되는지 보여드리겠습니다.

메인 컨트롤러

이 구조의 맨 위에는 4개의 타임라인 값과 해당 애니메이션이 있습니다. 그럼 그냥 집어넣어 보겠습니다.

이를 가능하게 하는 데이터 흐름의 핵심은 DOM 백업에 깊이 중첩된 데이터를 호스트(타임라인 범위)로 리프트할 수 있는 기능을 제공한다는 것입니다. 이는 효율적이지 않으므로 이 작업을 수행하는 빈도를 제한하고 싶습니다. 등록된 각 속성과 해당 애니메이션은 단일 데이터를 수직으로 호스팅할 수 있습니다. 데이터의 값은 구조 내부 어딘가에 있는 요소의 인라인 또는 블록 뷰 위치에 따라 결정됩니다. 해당 부분은 나중에 다루겠습니다.

(데이터 흐름을 보다 명확하게 보려면 위에 포함된 반복 예제 참조)

여기에서 우리가 가져오는 네 가지 데이터는 다음과 같습니다.

--xfl-cpu-phase - 현재 실행 중인 CPU 해킹 단계를 나타내는 숫자 값 0~4입니다. (CPU Hack의 단일 '프레임'은 4~5개의 CSS 렌더 프레임이며, 단계의 하나의 루프는 CPU Hack을 '틱'합니다.) 이에 대해서는 이 문서의 뒷부분에서 더 구체적으로 설명하겠습니다.

--xfl-raw-data - SVG가 애니메이션 주기에 있을 때마다 SVG의 높이를 호스팅합니다. 우리의 원시 데이터. 이전에 말했듯이 이 값이 35보다 작으면 SVG 애니메이션의 이 개별 단계는 감시 값입니다. 34보다 큰 경우 SVG 애니메이션의 이 개별 단계는 16비트 값 35이며, 이는 이전 센티널이 표시한 내용에 해당합니다.

--xfl-data-type - 가장 최근의 센티널 값입니다. 이 값은 다음 센티널을 만날 때까지 변경되지 않습니다. --xfl-raw-data 설정부터 이 값 설정까지 1 CSS 프레임 지연이 있습니다.

--xfl-data-value - 원시 값에서 35를 뺀 후의 현재 데이터 값입니다. 시퀀스의 이 단계에 아직 도달하지 않은 경우 0입니다. --xfl-data-type 설정부터 이 값 설정까지 1 CSS 프레임 지연이 있습니다.

또한 기능만 있고 프로세스가 완료되지 않은 동안 애니메이션 SVG만 로드하는 조건으로 svg-animation-current-state-reporter를 선제적으로 래핑했습니다. (따라서 모든 내부 요소는 메모리에서 제거되고 렌더링이 완료되면 무거운 애니메이션 SVG가 렌더링에서 제거됩니다.)

키프레임 값은 해당 데이터 조각의 최대 값에서 0으로 이동합니다. 이것이 왜 거꾸로인지 나중에 설명하겠습니다. Uno Reverse 카드 이미지를 찾아보세요.

CPU 추출기

다음으로 CPU 해킹을 위한 기본 상용구를 설정합니다

CPU Hack 상용구는 캡처 및 호이스트 애니메이션을 설정하기 위해 변수 이름 패턴을 따르고 있습니다.

수평으로(시간에 따라) 순환하려는 1개의 정수 --xfl\1이 있는 경우 이를 등록하고 다음과 같이 캡처 및 호이스트 애니메이션을 설정합니다.

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

그런 다음 두 CPU 애니메이션이 호스팅되는 .cpu-exfiltrator 요소에서 순환 할당을 완료합니다. 지금은 값 중 하나에 대해서만 수행하겠습니다.

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  // add 35 to all the values so we can use 0 to 34 for sentinels. 0 = CSS-side sentinel, 1-32 = data frames, 33 = length, 34 = checksum
  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return ($viewBoxXYWidth . ((string) $index) . '; ' . $viewBoxXYWidth . ((string) ($val + 35)));
  }, $data, range(1, $datalen)); // 1 up to 32 = indicator that next frame is the value(+35) for that index(1-based)

  // no matter how many are in the array, '33' indicates the next frame is data length, which is used in the checksum too
  array_unshift($frames, $viewBoxXYWidth . '33; ' . $viewBoxXYWidth . ((string) ($datalen + 35))); // + 35 b/c data
  // unshift so the length is (hopefully) the first value read and a sense of progress can be reported

  $fullsum = 0;

  for ($x = 0; $x <= ($datalen - 1); $x++) {
    // double the odd ones so there's some semblance of order accounted for
    // the odd ones with 0 based index is the even ones on the CSS side
    $fullsum += ($data[$x] + (($x & 1) * $data[$x]));
  }

  $checksum = floor($fullsum / 2048) + ($fullsum % 2048) + $datalen + 35; // + 35 because it's data

  // no matter how many are in the array, '34' indicates the next frame is checksum
  array_push($frames, $viewBoxXYWidth . '34; ' . $viewBoxXYWidth . $checksum);

  $actualNumItems = count($frames) * 2;

  $dur = $actualNumItems * 0.33; // total seconds

  $keytimeStep = 1 / ($actualNumItems); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $actualNumItems - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

Chrome에서는 두 애니메이션이 동시에 실행되지 않는 한 정적으로 순환(초기값이 됨)되지 않습니다. 이는 숫자 속성을 설정하는 일시 중지된 애니메이션의 최적화에 대한 환상적인 부작용입니다.

마지막으로 CPU Hack의 새로운 자동 버전을 사용하고 있으므로(원래 해킹에서처럼 단계를 순환하기 위해 마우스를 이동할 필요가 없음) --xfl-cpu-phase var에 연결합니다. 이전부터(여기서 상위 요소에 호스팅되므로 스타일 쿼리를 사용하여 이에 응답할 수 있음) 애니메이션의 재생 상태를 제어할 수 있습니다.

또한 나중에 다시 맨 위로 올라갈 --cpu-next-phase를 출력하고 뷰 위치와 타임라인 범위를 사용하여 --xfl-cpu-phase에 대한 다음 값을 설정합니다.

다음 --xfl-data-type에서 SVG 애니메이션 측정이 성공적으로 잠길 때까지 CPU Hack을 일시 중지 상태로 유지하는 추가 단계를 추가했습니다

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

(지금은 데이터 유형이 여전히 항상 0이므로 다음 단계가 연결되면 이미 CPU 해킹을 반복하게 됩니다. 데이터 유형 센티널이 있으면 다음 단계가 완료될 때까지 반복되지 않습니다. 0센티넬로 일부러 클리어했습니다)

나중에 데이터가 모두 준비될 때까지 CPU 단계 1이 시작되지 않도록 언급된 조건도 추가할 예정입니다. 그러면 데이터 유형(센티널)이 잠기고 데이터 값(원시 - 35)이 잠기는 사이에 CPU 해킹을 캡처 단계에 두려고 합니다. 따라서 Abraham Hicks가 말했듯이 "준비가 완료되었습니다".

계속해서 SVG 애니메이션이 보고할 것으로 예상되는 32개 값과 체크섬 및 길이를 모두 등록하겠습니다.

--xfl\1을 --xfl\32에 등록하는 것은 큰 블록이고 CPU 애니메이션도 상용구이므로 앞으로는 무시되도록 모든 항목을 해킹 설정의 맨 아래로 이동하겠습니다.

자동 CPU 해킹

다음 CPU 단계를 --xfl-cpu-phase 값에 연결합니다

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  // add 35 to all the values so we can use 0 to 34 for sentinels. 0 = CSS-side sentinel, 1-32 = data frames, 33 = length, 34 = checksum
  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return ($viewBoxXYWidth . ((string) $index) . '; ' . $viewBoxXYWidth . ((string) ($val + 35)));
  }, $data, range(1, $datalen)); // 1 up to 32 = indicator that next frame is the value(+35) for that index(1-based)

  // no matter how many are in the array, '33' indicates the next frame is data length, which is used in the checksum too
  array_unshift($frames, $viewBoxXYWidth . '33; ' . $viewBoxXYWidth . ((string) ($datalen + 35))); // + 35 b/c data
  // unshift so the length is (hopefully) the first value read and a sense of progress can be reported

  $fullsum = 0;

  for ($x = 0; $x <= ($datalen - 1); $x++) {
    // double the odd ones so there's some semblance of order accounted for
    // the odd ones with 0 based index is the even ones on the CSS side
    $fullsum += ($data[$x] + (($x & 1) * $data[$x]));
  }

  $checksum = floor($fullsum / 2048) + ($fullsum % 2048) + $datalen + 35; // + 35 because it's data

  // no matter how many are in the array, '34' indicates the next frame is checksum
  array_push($frames, $viewBoxXYWidth . '34; ' . $viewBoxXYWidth . $checksum);

  $actualNumItems = count($frames) * 2;

  $dur = $actualNumItems * 0.33; // total seconds

  $keytimeStep = 1 / ($actualNumItems); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $actualNumItems - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

여기에는 요소를 스크롤 컨테이너로 만들고 화면에서 벗어나게 하는 CSS 상용구가 있습니다. 중요한 부분은 다음과 같습니다.

뷰 타임라인: --xfl-cpu-phase 인라인;

이 의사 요소의 오른쪽 가장자리가 100px 너비 상위 요소에 해당하는 위치를 말하며 왼쪽에서 0에서 4로 이동하는 애니메이션까지 "진행"으로 연결합니다... 따라서 25px는 25% 완료된 것입니다. 25%가 0에서 4 사이이면 1에 매핑됩니다.

_{Google 검색에서 트위터로 이어지는 이미지 출처}

기술적으로 애니메이션은 4 대 0이고 기술적으로 뷰가 오른쪽으로 진행됨에 따라 의사의 오른쪽 가장자리에서 측정됩니다. 따라서 25px 너비 의사는 100px 너비 스크롤 상위 항목의 오른쪽에서 75% 떨어져 있고 75%가 4와 0 사이에 있을 때 1의 값으로 매핑됩니다.

역방향 수학을 인지적으로 처리하지 않고 애니메이션의 최대 값이 4이기 때문에 최종 결과는 0에서 4까지의 간단한 진행이라고 받아들이면 이해하기가 더 쉽습니다(다시 애니메이션이 시작된다는 점을 무시 4)에서.

데이터가 준비될 때까지 CPU를 0단계로 유지하는 준비 상태도 작성해 보겠습니다. 해당 메모는 데모의 64번째 줄에 있습니다:

데이터 준비됨 = 데이터 유형 > 0 && 원시 프레임 데이터 - 35 === 데이터 값

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

잠깐, === CSS에서?

이것들은 지금은 상당히 구식이므로 오늘은 다르게 할 것입니다. 이를 업데이트하고 설명하면 좋은 기사가 될 것입니다. 하지만 그동안 여기를 참조하세요: https://codepen.io/propjockey/pen/YzZMNaz

SVG 애니메이션 읽기

이것은 처음에는 아주 CPU Exfiltrator 섹션과 유사합니다. 왜냐하면 여기 DOM에서 호스팅되는 곳(범위)으로 데이터를 측정하고 이동하는 동일한 기술이기 때문입니다.

처음 설정한 기본 요소의 마지막 3개 값을 측정하고 보고할 예정입니다.

On ::에서 SVG를 렌더링하고 애니메이션 SVG의 높이 측정인 블록 보기 위치를 사용하여 --xfl-raw-data를 설정하기 전에. (너비는 10px로 고정됩니다.)

On::--xfl-data-type 인라인(센티널 값 0~34) 및 --xfl-data-value 블록(16비트 값)을 설정한 후.

상위 요소는 SVG(최소 10px)를 렌더링할 수 있을 만큼 충분히 넓어야 하며 감시 값(0~34)에 대한 측정값을 정확하게 제공해야 합니다.

또한 상위 항목은 16비트 값( 35)을 측정할 수 있을 만큼 키가 커야 합니다. 첫 번째 단계에서 최대값을 100k로 설정했기 때문에 필요한 것보다 30% 정도 크더라도 그냥 사용하겠습니다.

스크롤바가 발생하지 않도록 화면 밖으로 왼쪽 상단으로 이동하세요.

그러므로

.svg-animation-현재-상태-보고자

얻다

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  // add 35 to all the values so we can use 0 to 34 for sentinels. 0 = CSS-side sentinel, 1-32 = data frames, 33 = length, 34 = checksum
  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return ($viewBoxXYWidth . ((string) $index) . '; ' . $viewBoxXYWidth . ((string) ($val + 35)));
  }, $data, range(1, $datalen)); // 1 up to 32 = indicator that next frame is the value(+35) for that index(1-based)

  // no matter how many are in the array, '33' indicates the next frame is data length, which is used in the checksum too
  array_unshift($frames, $viewBoxXYWidth . '33; ' . $viewBoxXYWidth . ((string) ($datalen + 35))); // + 35 b/c data
  // unshift so the length is (hopefully) the first value read and a sense of progress can be reported

  $fullsum = 0;

  for ($x = 0; $x <= ($datalen - 1); $x++) {
    // double the odd ones so there's some semblance of order accounted for
    // the odd ones with 0 based index is the even ones on the CSS side
    $fullsum += ($data[$x] + (($x & 1) * $data[$x]));
  }

  $checksum = floor($fullsum / 2048) + ($fullsum % 2048) + $datalen + 35; // + 35 because it's data

  // no matter how many are in the array, '34' indicates the next frame is checksum
  array_push($frames, $viewBoxXYWidth . '34; ' . $viewBoxXYWidth . $checksum);

  $actualNumItems = count($frames) * 2;

  $dur = $actualNumItems * 0.33; // total seconds

  $keytimeStep = 1 / ($actualNumItems); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $actualNumItems - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

이전은

@keyframes capture {
  0%, 100% {
    --xfl\1-captured: var(--xfl\1);
  }
}

@keyframes hoist {
  0%, 100% {
    --xfl\1-hoist: var(--xfl\1-captured, 0);
  }
}

그리고 ::after gets

  --xfl\1: calc(
    var(--xfl\1-hoist, 0) + 1
  );

기본적으로 여기에서 이러한 이후 값에 대한 저장 매체는 상위 스크롤 컨테이너에 대한 1px 정사각형 의사의 뷰 위치입니다. 의사 자체가 1x1이고 해당 값이 0일 때 0을 보고하기를 원하기 때문에 왼쪽과 위쪽 계산에서 1px을 뺍니다.

이것은 모두 이전에 수행된 작업과 매우 유사합니다.

참고 사항에서 알 수 있듯이 이러한 값을 계산하는 방법에는 여러 가지 복잡성이 있습니다.

  @container style(--xfl-cpu-phase: 4) {
    animation-play-state: paused, paused;
    --cpu-next-phase: calc(
      min(1, var(--xfl-data-type)) * 4
    );
  }

이 문제를 해결하는 방법을 이해하는 열쇠는 비교기 값이 0 또는 1로 설정된다는 것입니다. 참이면 1, 거짓이면 0입니다. 그런 다음 여기에 어떤 값을 곱하십시오. false이면 결과는 0으로 유지되고, 그렇지 않으면 값이 무엇이든 됩니다.

Ana Tudor가 여기서 이 아이디어가 어떻게 작동하는지 자세히 설명합니다

그런 다음 두 번째 값에 대해 서로 다르거나 반대되는 비교를 사용하여 해당 비교를 두 번 수행하고 이를 함께 추가하면(비교기 중 최대 하나가 1이 되도록 보장) 그 중 두 개를 추가하면 "else"가 됩니다. 만일".

준비되지 않은 경우 * 이전 값을 사용하세요.
준비가 되었다면 * 이 새로운 값을 사용하세요

이것은 유형이 이미 보고된 후 값에 대한 SVG 애니메이션의 개별 단계 기간 동안 센티넬 값을 유지하는 방법입니다.

이를 구현하는 CSS 코드는 여기 하단에 배치한 --xfl\... 속성 등록의 큰 블록 바로 위인 191번째 줄에서 시작됩니다.
@property --xfl\1 { 구문: ""; 초기값: 0; 상속: 사실; }
...
추가 참고사항도 포함되어 있습니다:

특정 CSS --var 값 설정(지정된 할당)

방금 다룬 논리는 모든 --xfl\1, 2, 32 값에 사용하는 개념과 정확히 동일합니다.

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

--xfl-data-type이 1인 것처럼 --xfl-set\1을 읽습니다. 묵시적인 else 0과 함께 --xfl-data-is-ready를 사용합니다.

--xfl-data-is-ready는 1단계로 전환할 때까지 0단계를 유지하는 플래그로 앞서 설정되었습니다.

즉, 우리의 조건은 && 논리라는 뜻입니다. 통과하려면 두 플래그 모두 1이어야 합니다.

그런 다음 --xfl-set\1이 --xfl-data-value(현재 SVG 애니메이션 값)를 사용하는 것처럼 --xfl\1을 계속 읽습니다. 그렇지 않으면 --xfl-set\1이 --를 사용합니다. xfl\1-hoist(CPU 핵이 --xfl1에 대해 보유하고 있던 이전 값)

이는 매우 반복적이며 나머지 유출의 거의 전부를 설명합니다.

마지막 단계는 기본 calc() 및 mod() 수학을 실행하여 앞서 설명한 대로 체크섬을 구축한 다음 계산된 체크섬 === SVG 애니메이션에 포함된 체크섬을 CPU Hack에 추가하여 언제인지 알 수 있도록 하는 것입니다. 완벽한. 그 이상은 동일합니다.

이제 시간이 됐어요. :)

발표: CSS 애니메이션 SVG 유출 해킹

이 해킹의 모든 부분을 요소당 하나의 값으로 보여주고 싶었기 때문에 이에 대한 프레젠테이션은 불쾌할 정도로 무겁습니다. 2000줄 이상의 HTML과 400줄 이상의 CSS. 게다가 저는 css-bin-bits를 사용하여 각 레지스터를 바이너리 등으로 변환하고 있습니다.

(코드펜 프레임 오른쪽 하단의 재실행을 클릭하시면 실시간으로 확인하실 수 있습니다!)

자바스크립트가 없습니다!

---

연락처를 여시겠습니까?

이 내용이 훌륭하다고 생각하고 더 자세히 알아보고 싶다면 연락주세요! 항상 질문에 답변해 드리겠습니다.

% CSS: 애니메이션 SVG에 포함된 서버 생성 데이터 비트를 가져오고 추출합니다.	% CSS: 애니메이션 SVG에 포함된 서버 생성 데이터 비트를 가져오고 추출합니다.	DEV Blog	% CSS: 애니메이션 SVG에 포함된 서버 생성 데이터 비트를 가져오고 추출합니다.	% CSS: 애니메이션 SVG에 포함된 서버 생성 데이터 비트를 가져오고 추출합니다.

?@JaneOri.% CSS: 애니메이션 SVG에 포함된 서버 생성 데이터 비트를 가져오고 추출합니다.

?@Jane0ri

위 내용은 % CSS: 애니메이션 SVG에 포함된 서버 생성 데이터 비트를 가져오고 추출합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!