Spotify Chrome 확장 프로그램: 음악 컨트롤러 | 4단계

Spotify Chrome 확장 프로그램 - UX 및 애니메이션

이것은 사용자의 Spotify 세션을 제어할 수 있는 ReactJS로 구동되는 Spotify Chrome 확장 프로그램을 구축하는 다단계 프로젝트의 4단계입니다.

1단계를 찾을 수 있습니다.

이 튜토리얼에서는 사용자가 Google 크롬 확장 프로그램의 작동 방식을 알고 있다고 가정합니다. 더 알아보기 .

즉시 전환에 도움이 되는 다른 패키지를 설치해야 합니다.

>> npm install --save react-transition-group

이 새로운 패키지인 Player 및 OptionsPage 구성 요소를 사용하는 두 가지 구성 요소가 있습니다.

'Player'의 open_close 버튼부터 시작하겠습니다.

CSSTransition은 HTML 요소를 DIV 요소에 래핑하여 작동합니다.

이 래퍼 DIV에는 CSS 클래스가 추가되고 제거됩니다.

이러한 CSS 클래스에는 사전 정의된 이름이 있습니다(**React Transition Group**에서 정의).

그러나 애니메이션을 정의합니다.

해당 클래스 이름은 다음과 같습니다.

.chrome-ext-flip-appear

.chrome-ext-flip-appear-active

.chrome-ext-flip-appear-done

.chrome-ext-flip-enter

.chrome-ext-flip-enter-active

.chrome-ext-flip-enter-done

.chrome-ext-flip-exit

.chrome-ext-flip-exit-active

.chrome-ext-flip-exit-done

기본적인 분해는 이렇습니다.

세 가지 총 상태가 있습니다: 표시, 입력 및 종료

각 상태에는 세 가지 모드가 있습니다.

시작 - 단순히 상태 이름이므로 표시, 입력 또는 종료

이것은 애니메이션이 시작되는 값입니다. 불투명도 0

활성

이것은 애니메이션이 이끄는 값입니다. 불투명도 0.8

완료

애니메이션을 그대로 두는 값입니다(예: 불투명도 0.8(원하는 경우 애니메이션이 끝이 아닌 다른 위치로 이어질 수 있음)

따라서 플레이어 구성 요소에서 전체 구성 요소를 CSSTransition 구성 요소로 래핑하고 사용자 정의 CSS를 공급하기만 하면 됩니다.

// Player.js
<CSSTransition ... classNames="chrome-ext-flip">
    ...
</CSSTransition>

// player_styles.css
...
.chrome-ext-flip-enter {
    transform: translateY(0%);
}

.chrome-ext-flip-enter-active {
    transform: translateY(100%);
    transition: transform 1000ms;
}

.chrome-ext-flip-enter-done {
    transform: translateY(100%);
}
...

메모:
플레이어가 주머니에 들어가거나 닫히기를 원할 때 Y가 0%에서 시작한 다음 Y가 100%로 전환되어 플레이어를 화면 밖으로 내보냅니다. 그런 다음 Y를 100%로 마무리하여 화면에서 벗어나게 합니다.

'OptionsPage'에 대한 언로드 및 로드를 처리해 보겠습니다.

이 페이지에서는 전체 구성 요소를 CSSTransition으로 래핑하지 않습니다.

Deck의 이미지를 옮기고 싶을 뿐입니다.



따라서 Deck 구성 요소만 CSSTransition으로 래핑합니다.

...
</div>
<div className="chrome-ext-options_content">
    <CSSTransition
        ...
        classNames={my_context.direction ? 'chrome-ext-slide-next' : 'chrome-ext-slide-prev'}>
        <Deck />
    </CSSTransition>
</div>
<div ref={ref_id => options_deck_type = ref_id} className="chrome-ext-deck_type">{my_context.current_deck}</div>
...

메모:
사용자가 다음 데크를 선택하는지 또는 이전 데크를 선택하는지에 따라 전환 변경에 연결하는 클래스입니다.

'다음' 및 '이전' 트랙 버튼에는 전환 라이브러리가 필요하지 않습니다.

사용자가 다음 또는 이전을 클릭하면 로딩 카세트 gif를 보여주기만 하면 됩니다. 이렇게 하려면 newTrack의 상태를 true로 전환하고 gif가 애니메이션될 때까지 기다린 다음 newTrack을 다시 false로 전환합니다.

next_track = () => {
    this.setState(_state => {
        return {
            newTrack: true,
            isPlaying: false,
        }
    }, () => {
        setTimeout(() => {
            this.setState({ newTrack: false, isPlaying: true });
        }, 400);
    });
}

'재생'/'일시정지' 버튼은 쉽습니다.

매우 간단합니다. 사용자가 재생/일시정지 버튼을 클릭하면 상태에서 isPlaying 변수를 뒤집습니다.

이 플립은 티커의 애니메이션을 트리거합니다.

start_pause = () => {
    this.setState(_state => {
        return {
            isPlaying: !_state.isPlaying
        }
    });
}

마지막으로 'Ticker'에 애니메이션을 적용합니다.

말로 표현하기에는 너무 복잡하지만 간단히 말해서 requestAnimationFrame()을 사용하여 애니메이션 루프를 사용합니다.

우리는 문자열을 선택하고 시야에서 스크롤될 때까지 왼쪽으로 이동한 다음 무한 스크롤의 환상을 만들기 위해 오른쪽에 배치합니다.


자세한 내용은 아래 비디오를 참조하십시오.

다음 단계에서는 실제 Chrome 확장 프로그램 코딩을 수행할 것입니다.

백엔드 로직을 완료하고, Spotify API에 연결하고, Spotify 플레이어를 제어하기 위한 경로를 구축합니다.

이 단계here에 대한 소스 파일을 찾을 수 있습니다.

보다 심층적인 가이드를 원하시면 YouTube에서 전체 비디오 자습서를 확인하십시오.

사이버펑크 2077에서 영감을 받은 Spotify 컨트롤러 구축 - 4단계