네트워크 응용:애니메이션

Task

Create a window containing the string "Hello World! " (the trailing space is significant).

Make the text appear to be rotating right by periodically removing one letter from the end of the string and attaching it to the front. When the user clicks on the (windowed) text, it should reverse its direction.

결과는 다음과 같습니다.

네, 2000년대 초부터 반짝이기 시작한 네온사인기!
Click here for the hosted version.
우선, 우리는 페이지의 동적 리셋을 어떻게 만드는지 알아야 한다. 즉, '클릭' 단추가 없는 상황에서 함수를 정기적으로 실행하는 것이다.이를 위해 +Click과 +Auto 접두어류를 사용할 수 있습니다.
+Click 및 +Auto 접두어 클래스
이 두 종류는 통상적으로 함께 사용한다.+Click은 일정 시간(ms)이 지난 후 버튼을 클릭할 때 사용됩니다.+Auto은 접두사 종류로 정기적으로 자동으로 단추를 누른다.This라고 하면 자동으로 누릅니다.+Auto의 의존 나무를 검사할 때 +JS류에서 계승된 것을 볼 수 있다.

: (dep '+Auto)
   +JS
+Auto

+Click +Auto이라는 파일의 click-button.l 버튼의 최소 예제를 테스트해 보겠습니다.

(app)
(action (html 0 "Animation" "@lib.css" NIL
   (form NIL
      (gui '(+Click +Auto +Button) 500 'This 1000 "Start") ) ) )

이제 서버를 $ pil @lib/http.l @lib/xhtml.l @lib/form.l --server 8080 +으로 시작하고 http://localhost:8080/click-button.l을 가리키거나 살펴보겠습니다.우리는 브라우저 창의 왼쪽 상단에 외로운 작은 단추를 보아야 한다.

우리가 이 버튼을 눌렀을 때 무슨 일이 일어날까요?브라우저의 개발자 도구(Firefox의 F12)를 열고 네트워크 분석 옵션을 클릭하겠습니다.

네트워크 유량 분석
버튼을 클릭하면 다음이 표시됩니다.

은 첫 번째 줄에서 POST 요청을 볼 수 있습니다. 이 요청은 페이지를 응답으로 바꿉니다. (상태: 303)즉, 새 세션이 생성됩니다(PicoLisp 세션 here에 대한 자세한 정보).

그리고 우리는 네 개의 GET 요청을 보았다.

실제 페이지

css 파일

form이라는 JavaScript 파일js

브라우저 아이콘.

그리고 초당 POST 요청이 있습니다. form.js에서 시작합니다.

+Click과 +Auto의 클래스 정의에서 우리는 첫 번째 POST은 +Click류가 발기한 것이고 나머지는 모두 +Auto류가 발기한 것으로 알고 있다.+Auto은 +JS에서 상속된 것이기 때문에, 전방에서만 자바스크립트를 사용하여 페이지를 다시 불러옵니다.

도서관
여기서 무슨 일이 일어났는지 알아보는 데 시간을 좀 쓰자.네트워크 탭에서 이니시에이터를 클릭하면 form.js에서 실제로 페이지 재로드를 호출하는 행이 표시됩니다.

우리는 홈페이지에서 form.js의 onsubmit, the click-button.l에서 doPost, 그리고 form.js에서 post으로 전화를 받았다.
한 행 중 하나를 클릭하면 관련 파일 위치에서 [디버거] 탭이 열립니다.

코드에 따라 조작하면, 업데이트된 폼 내용만 페이지에 다시 불러온 것을 볼 수 있습니다.(우리의 예시에서 제출 단추를 제외하고는 표 내용이 없다).

애니메이션 시작 버튼 만들기
이제 우리의 새로운 지식을 이용하자.다음 코드 행을 사용합니다.

   (gui '(+Click +Auto +Button) 500 'This 1000 "Start")

우리는 '시작' 이라고 표시된 단추가 있다.우리가 그것을 눌렀을 때, 우리는 폼을 제출하고 세션을 시작합니다. (만약 그렇지 않다면.)클릭하면 바로 이런 상황이 발생합니다.
그리고 500밀리초 후에 우리는 form.js이 발기한 첫 번째 form.jspost를 보았고 그 다음에 1000밀리초 간격으로 주기적으로 생성된post를 보았다.
왜 이것은 애니메이션에 유용합니까?
이 기능을 사용하면 서버에서 전체 페이지를 다시 로드하지 않고도 +Auto 클래스의 모든 요소를 프런트엔드에서 업데이트할 수 있습니다.이렇게 하면 깜빡이는 것을 피하고 응답 속도가 더욱 빠르고 안정적이다.
이제 업데이트해야 할 실제 내용을 만듭니다.

Hello World 요소 만들기
글로벌 변수 +gui을 정의합니다.

(setq *Str "Hello World! ")

textfield 요소로 설정합니다.우리는 접두사 클래스 *Str을 사용하여 내용을 지정하고 +View을 호출합니다. 더 이상 인자가 필요하지 않아서 간단한 텍스트 필드를 입력할 필요가 없습니다.

  (gui '(+View +TextField) '*Str)

회전관 기둥
텍스트는 다음과 같이 왼쪽에서 오른쪽으로 회전해야 합니다.

"안녕하세요, 세계!"

"안녕하세요, 세계!"

"!안녕 세상"

...

우리 어떻게 해야 돼요?
지금 보시다시피 PicoLisp has many powerful list functions.예를 들어 +TextField이라는 내장 함수가 있는데, 이것은 오른쪽으로 원소를 회전시킨다.여러 요소를 회전하려면 선택할 수 있는 rot 매개 변수가 필요합니다.rot 함수는 파괴성을 가지고 원시 목록이 수정되었다는 것을 의미한다.
그러나, 우리는 현재 문자열이 하나밖에 없다.첫 번째 단계로, 우리는 cnt을 사용하여 문자열에서 목록을 만들어야 한다.REPL을 열고 테스트(rot):

: (setq *Str (chop "Hello World! "))           
-> ("H" "e" "l" "l" "o" " " "W" "o" "r" "l" "d" "!" " ")

이제 chop 목록을 돌려 살펴보겠습니다.

: (rot *Str)
-> (" " "H" "e" "l" "l" "o" " " "W" "o" "r" "l" "d" "!")
: *Str                              
-> (" " "H" "e" "l" "l" "o" " " "W" "o" "r" "l" "d" "!")

보시다시피 끝 공백이 문자열의 시작으로 이동했습니다.우리의 문자열 길이는 13글자이기 때문에 $ pil + 12번을 실행하면 뒤로 이동할 수 있습니다.우리는 *Str 함수를 사용하여 실행 횟수를 제어할 수 있다.

: (do 12 (rot *Str))                
-> ("H" "e" "l" "l" "o" " " "W" "o" "r" "l" "d" "!" " ")

애니메이션 만들기
지금 우리는 거의 완성하지 못했다.우리는 목록 rot *Str을 문자열로 바꾸기만 하면 된다.

(gui '(+View +TextField) '(pack (rot *Str))))

정말 쓸모가 있다!만약 우리가 버튼을 눌렀다면, 우리는 매우 원시적인 애니메이션을 볼 수 있을 것이다.


반전 버튼 만들기
작업 설명에 따르면, 우리는 회전 방향을 반전시키는 단추를 실현해야 한다.우리가 이전에 보았듯이, 우리는 한 번이 아니라 12번을 돌려서 그것을 제어할 수 있다.그래서 가장 간단한 방법은 전역 변수 do을 정의하는 것이다. 이것은 1 또는 12일 수 있다.*Str 함수를 사용하여 pack으로 초기화합니다.

(one *Dir)

그리고 *Dir을 수정하여 회전을 1 순환으로 제어합니다. 이 순환은 one에 의존합니다.

(gui '(+View +TextField) '(pack (do *Dir (rot *Str))))

마지막으로, 우리는 +TextField과 do 사이를 전환하는 단추를 정의해야 한다.

(gui '(+Button)  "Reverse direction" '(setq *Dir (if (= 1 *Dir) 12 1)))

마지막으로, 우리는 *Dir의 현재 값에 따라 단추 탭을 전환할 수 있다.

(gui '(+Button)  '(if (= 1 *Dir) "Rotate left" "Rotate right")
   '(setq *Dir (if (= 1 *Dir) 12 1)) )

지금 보면 이렇다.


스타일링 좀 해달라고!
완성되었지만, 적어도 그것을 좀 더 아름답게 하자!

우선, 저는 항상 안내류를 포함해서 포지셔닝과 정렬을 더욱 쉽게 하는 것을 좋아합니다.

다음으로 애니메이션 만들기 버튼이 자동으로 클릭된다는 것을 알았습니다.그럼 우리는 왜 그것을 클릭해야 합니까?보시다시피, 클릭한 후 발생하는 첫 번째 일은 포트 변경 사항을 포함한 세션 시작입니다.브라우저의 소스 간 정책 때문에 JavaScript를 통해 이 작업을 자동으로 수행할 수 없으면 차단됩니다.

따라서 세션이 실행 중이면 자동으로 단추를 눌러서 표시할 필요가 없습니다.두 가지 일을 하자.
1. 1을 12으로 교체하고 자동 세션을 삽입하여 시작합니다.
2. bootstrap "invisible"클래스를 사용하여 "start animation"단추를 숨깁니다. (이 클래스는 CSS "visibility"속성만 "hidden"으로 설정합니다.또한 아이콘으로 '왼쪽으로 회전' 과 '오른쪽으로 회전' 을 바꾸자.

마지막 단계에서 재미있는 플래시와 네온사인 디자인을 추가합시다!

이렇게

최종 솔루션은 this link에서 다운로드할 수 있습니다.같은 폴더에서 네온사인 애니메이션이 있는 사용자 정의 CSS 파일을 찾을 수도 있습니다.

출처

https://rosettacode.org/wiki/Animation
ZAK과 으로 만든 아이콘 www.flaticon.com

https://css-tricks.com/how-to-create-neon-text-with-css/

https://codepen.io/WebTutorials/pen/GRoqZVo