부인 성명:

온라인 SpriteMeister 생성기: https://Sprite-Meister.github.io
작업 모델 v.042 - 생산용이 아닙니다. (하지만 나는 그것을 생산에 사용하므로 당신도 할 수 있습니다)

바보만이 또 다른 애니메이션 도구를 만듭니다

사랑하는 사람을 죽여야 하는 시점이 온다.
개발을 중단하고 결과를 휴지통에 버리십시오. 자신이 하고 있는 일this globe에서 유일한 바보라는 것을 깨달았기 때문입니다.



나는 이것을 쓰레기통에 버릴 수 없고, 그것에 많은 달을 보냈고, 너무 재미있고, 현재 버전이 내 요구를 충족합니다.

다른 개발자가 이것을 사용할 수 있습니까? 모르겠어요. 알려줘요!

나donate all my code to the Public Domain .
Unlicense로 태그가 지정되었으므로 원하는 모든 작업을 자유롭게 수행할 수 있습니다.

스프라이트시트 애니메이션 정보

이 모든 것은 사진가Eadweard Muybridge가 일련의 이미지를 촬영한 1872년에 시작되었습니다. 그리고 "프로젝터"를 사용하여 각 프레임을 빠르게 표시했습니다.



SpriteMeiser<sprite-animation> 웹 구성 요소는 브라우저에 15개 프레임의 전체 JPG를 표시합니다. 프레임별로

<script src="//sprite-meister.github.io/elements.js"></script>

<sprite-animation 
    steps="15"
    cell="183x122"
    duration="1s"
    src="//sprite-meister.github.io/spritesheets/muybridge_horse.jpg">
</sprite-animation>

스프라이트 시트 애니메이션 만들기:

그런데 왜 거기서 멈추나요?

SVG 이미지는 애니메이션 스프라이트 시트가 될 수 있습니다.

및 SVG는 클라이언트 측에서 생성할 수 있습니다.
Playingcards , Chesspieces , Flags , Icons 및 )

따라서 햄버거 아이콘을 화살표로 애니메이션화하는 데 필요한 모든 것은 다음과 같습니다.

<script src="//sprite-meister.github.io/element.js"></script>

<sprite-meister duration="4s">
    ${ setv1( 40-ease({distance:25}) , "top and bottom X position" ) , 
       setv2(    ease({distance:20}) , "top and bottom line to Y=50" )
    }
    <g stroke="black" stroke-width="8" stroke-linecap="round" 
       transform="${rotate(180-ease({distance:180}))}">
        <path d="M${v1} 30L85 ${50 - v2}"></path>
        <path d="M15 50L85 50"></path>
        <path d="M${v1} 70L85 ${50 + v2}"></path>
    </g>
</sprite-meister>

<sprite-meister>는 문자열 리터럴을 24(기본) SVG 프레임으로 구문 분석합니다.

그러면 PacMan은 회전하는 반원 2개에 불과합니다.

..그리고 가늘게 뜨는 눈!

<script src="//sprite-meister.github.io/element.js"></script>

<sprite-meister duration="1s">
  ${ setv1( pulse({mid:45}) ,"rotation" ),
     setv2( ease({distance:1}) ,"squint eye")
  }
  <g fill="yellow">
    <g transform="rotate(${ -v1 } 50 50)">
      <path d="m90 50a1 1 0 0 0 -80 0"></path>
      <ellipse cx="60" cy="30" rx="${5 + v2}" ry="${5 - v2}" fill="black"></ellipse>
    </g>
    <path transform="rotate(${v1} 50 50)" d="m10 50a1 1 0 0 0 80 0"></path>
  </g>
</sprite-meister>

진정한 OOP 방식에서 1개의 유령은 <템플릿>입니다.

<template spritemeister id="ghost" duration=".5s" steps="24" ghostcolor="hotpink">
  ${setv1(ease({distance:1}),"squeeze eyes")} 
  ${setv2(ease({distance:1}),"bounce eyes")} 
  ${setv3(pulse({mid:2}),"bounce ghost")} 
  ${setv4(pulse({start:0,mid:2}),"wiggle skirt")} 
  <g transform="skewY(${v3})">
    <path fill="${attr('ghostcolor','red')}"
          d="M82 94 c7-13 4-44 1-65s-40-55-63-1 c-7 22-7 53-3 66
             l${v4}-11 l7 11l8-13l8 13l8-12l8 12l7-12z"></path>
    <g id="eye${framenr}" transform="translate(0 ${v2})">
      <ellipse fill="white" cx="${58 + v1}" cy="${30 + v1}" rx="${5 + v1}" ry="${5 - v1}"></ellipse>
      <ellipse fill="black" cx="${60 + v1}" cy="${30 + v1}" rx="${1 + v1}" ry="${2 - v1}"></ellipse>
    </g>
    <use x="0" y="36" href="#eye${framenr}" transform="rotate(180 50 50)"></use>
    <text x="25" y="75">${attr("id")} </text>
  </g>
</template>

그런 다음 다음과 같이 4개의 유령이 생성됩니다.

<sprite-meister id="Blinky" template="ghost" ghostcolor="red"></sprite-meister>
<sprite-meister id="Pinky"  template="ghost" ghostcolor="hotpink"></sprite-meister>
<sprite-meister id="Inky"   template="ghost" ghostcolor="cyan"></sprite-meister>
<sprite-meister id="Clyde"  template="ghost" ghostcolor="orange"></sprite-meister>

그것은 나를 위해 작동

온라인 SpriteMeister 생성기: https://Sprite-Meister.github.io

필요한 악의 시트 애니메이션을 만드는 데 도움을 주었습니다.

이로써 내 모든 (작업 모델) 코드를 퍼블릭 도메인에 기부합니다.

https://github.com/sprite-meister/sprite-meister.github.io

수행 방법

<sprite-meister id="bounce" duration="1s" steps="24">
    <ellipse
    cx="50"
    cy="${70 - ease({distance:36})}"
    rx="${ framenr > 11 ? minmax({value:30,min:41 - ease({distance:10})}) : 30}"
    ry="${minmax({value:30,min:30 - ease({distance:30})})}"
    fill="none"
    stroke="red"
    stroke-width="5"
    ></ellipse>
    <text y="12">n:${framenr}</text>
</sprite-meister>

<sprite-meister> 웹 구성 요소가 해당 내용을 문자열로 읽음

문자열이 parseStringLiteral 함수에 전달됨

변수 AND 함수를 포함하는 {} 데이터 객체와 함께(위 코드의 'ease' 참조)

모든 함수는 모든 프레임 단계에 대해 하나의 값을 생성합니다

.

모든 데이터와 함께 웹 구성 요소는 하나의 SVG(24 프레임스텝 너비)를 만듭니다

.

알려진 문제

Repo가 엉망입니다. 모든 코드를 리팩터링해야 합니다

.

모든 프레임 단계에 대해 1개의 SVG가 생성되기 때문에 절대 참조는 항상 프레임 1을 가리킵니다

.

X 평면의 % 백분율도 마찬가지입니다

.

SVG는 1프레임 높이이므로 Y 평면 비율이 양호합니다

.

...

documentation.html의 최소 문서

작업 모델 v.042라고 말씀 드렸습니다.

온라인 SpriteMeister 생성기: https://Sprite-Meister.github.io


.ltag__tag__id__724 .follow-action-button{
배경색: #D3FFDE !중요;
색상: #080808 !중요;
테두리 색상: #D3FFDE !중요;
}

# 따르다

.ltag__user__id__108898 .follow-action-button {
배경색: #2e2ee2 !중요;
색상: #e2e22e !중요;
테두리 색상: #2e2ee2 !중요;
}

대니 엥겔만 팔로우

Online since 1990, Yes! I started with Gopher. I do modern Web Component Development with technologies supported by **all** WHATWG partners (Apple, Google, Microsoft & Mozilla)

Web-Components #102 - Web Components #101 학습 후 추가 수업 5개

Danny Engelman ・ 5월 22일 ・ 3분 읽기

#webcomponents #javascript #webdev #showdev

가장 건방진 React vs Web Components 게시물

Danny Engelman ・ 6월 21일 ・ 1분 읽기

#webcomponents #javascript #webdev #showdev

2021년에 파이 차트를 그리려면 어떤 웹 기술이 필요합니까? (스포일러 경고: 표준 웹 구성 요소가 가능합니다) 🥧

Danny Engelman ・ 4월 16일 ・ 9분 읽기

#webcomponents #webdev #svg #javascript

ACME - 187바이트의 Accordion 웹 구성 요소

Danny Engelman ・ 5월 6일 ・ 2분 읽기

#webcomponents #webdev #javascript #html

웹 구성 요소로 치팅하는 방법

Danny Engelman ・ 6월 9일 ・ 1분 읽기

#webcomponents #javascript #webdev #showdev

〈file-size〉 웹 컴포넌트, 크기가 중요하기 때문에

Danny Engelman ・ 5월 21일 ・ 3분 읽기

#webcomponents #javascript #webdev #showdev