대기 시간에 눈이 내렸으면 좋겠어요.

입문

안녕하십니까@hey3.
이 글은 ACCESS Advent Calendar 2019 23일째 되는 글입니다.
제가 Qiita에 투고한 것은 처음이라 긴장이 되네요...
이번 보도는 크리스마스를 앞두고 하고 싶은 일을 했을 뿐이다.(소재)
※ 소재로 프레임을 사용해서 죄송합니다.

개요

크리스마스가 곧 다가오는데, 비동기적인 업데이트 과정에서 구성 요소에 눈을 내리고 싶다
(원래 기다릴 시간이 없는 게 좋은데...)

프로비저닝

빠른 비동기 처리를 위해 React v16.6 이후 추가된 lazy 및 Suspense 를 사용했습니다.lazy과Suspense깊은 접촉을 하지 않기 때문에 알고 싶으면 구글 선생님께 부탁드립니다.
스타일링이 사용됩니다styled-component.
그리고 기분 정도예요TypeScript.

실제로 해봤어요.

여기저기서 욕먹는 코드가 나오지만 어쩔 수 없죠...( 'ω')
만약 지적이 있다면, 끊임없이 나에게 알려주세요!

프레젠테이션용 액자 만들기

// LoadingArea/index.tsx

import React, { lazy, Suspense } from 'react'
import styled from 'styled-components'

const LazyComponent = lazy(() => import('../../components/Lazy'))

const LoadingArea = styled.div`
  width: 800px;
  height: 500px;
`

export default () => (
  <LoadingArea>
    <Suspense fallback={<SnowLoading />}>
      <LazyComponent />
    </Suspense>
　</LoadingArea>
)

앞으로 통용적으로 사용하고 싶지만, 이번에는 가로 800px, 세로 500px로 고정합니다.Suspense의fallback 지정SnowLoading 구성 요소(후술).

눈을 배경으로 하다

이번 사용radial-gradient으로 눈이 올 듯한 배경을 만들었다.

// SnowLoading/index.tsx

import React from 'react'
import styled from 'styled-components'

const Container = styled.div`
  display: grid;
  justify-content: center;
  align-content: center;
  width:100%;
  height:100%;
  background: radial-gradient(farthest-corner at 50% 50%,#7397a1 1%,#3f2c41 100%);
  position: relative;
`

export default () => (
  <Container />
)

완성된 건 여기예요.

추위가 들려오니 눈이 올 것 같다 ('ω')

본론눈

눈이 내리다.

// Snow/index.tsx

import React from 'react'
import styled, { css, keyframes } from 'styled-components'

interface Props {
  left: number
  delay: number
}

const fall = keyframes`
  0% {
    top: 0;
    opacity: 0;
  }
  100% {
    top: 95%;
    opacity: 1;
  }
`

const swing = keyframes`
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(70px);
  }
  100% {
    transform: translateX(0px);
  }
`

const snowAnimation = (delay: number) =>
  css`
    ${swing} 2s infinite ease-in-out, ${fall} 5s infinite linear ${delay}s;
  `

const Snow = styled.div<{left: number, delay: number}>`
  position: absolute;
  color: green;
  opacity: 0;
  left: ${({ left }) => left}%;
  z-index: 1000;
  animation: ${({ delay }) => snowAnimation(delay)};

  &:after {
    content: "\\2744";
  }
`

export default ({ left, delay }: Props) => (
  <Snow left={left} delay={delay} />
)

준비position:absolute는 눈이 내리는 애니메이션과 흔들리는 애니메이션으로 나뉜다.
떨어진 애니메이션으로 바꾸면 환상적이네요('ω')@keyframes 표시에 대해 설정을 표시한다.
"낙하산"과 "낙하산"을 부모 구성 요소에 전달함으로써 부모 구성 요소 측면에서 각 눈 결정체의 애니메이션을 이동할 수 있습니다.
이 일대용opacity은 만들기 쉽다.
참고로 이번에 사용한 눈 결정은 이 & x 2744입니다.❄」 태그 요소의 표시 속성을 수정합니다.
실제 생성설.
방금 div 구성 요소를 다음과 같이 수정합니다.

// SnowLoading/index.tsx
...
import Snow from '../Snow'

...

export default () => (
  <Container>
    {[...Array(30)].map(index =>
      <Snow key={index} left={Math.floor(Math.random() * 90)} delay={Math.floor(Math.random() * 20)}/>
    )}
  </Container>
)

못 만드는 냄새가 나지만 이번에는 눈을 감으세요(˘ω˘ )
이렇게 하면 어느 정도에 무작위로 30개의 눈 결정을 내린다.
집행하는 물건은 여기 있습니다.(용량을 압축해서 거칠다)

와, 눈이 와요.( 'ω')
마음에 들어요.
하지만 그렇다면 비동기적인 처리인 줄 모른다.
눈이 쌓이다.

눈이 쌓이다

이렇게 하면 되죠.

// PileUpSnow/index.tsx

import React from 'react'
import styled, { css, keyframes } from 'styled-components'

const pileUp = keyframes`
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
`

const pileUpAnimation = () =>
  css`
    ${pileUp} 7s infinite ease-out;
`

const PileUpSnow = styled.div`
  position: absolute;
  bottom: 0;
  width: 100%;
  background: aliceblue;
  z-index: 2000;
  animation: ${pileUpAnimate};
`

export default () => (
  <PileUpSnow />
)

재능이 없으면 안 어울릴 것 같아서.

로드 여유 추가

// Loading/index.tsx

import React from 'react'
import styled, { css, keyframes } from 'styled-components'

const loading = keyframes`
  0% { transform: translate(0,0); }
  50% { transform: translate(0,15px); }
  100% { transform: translate(0,0); }
`

const loadingAnimation = delay =>
  css`
    ${loading} .6s infinite linear ${delay};
  `

const Container = styled.div`
  position: absolute;
  z-index: 3000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 5rem;
  height: 1rem;
`

const Point = styled.div`
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.3rem;
  border-radius: 1.2rem;
  background-color: #4b9cdb;
  &:nth-last-child(1) {
    animation: ${loadingAnimation('.1s')};
  }
  &:nth-last-child(2) {
    animation: ${loadingAnimation('.2s')};
  }
  &:nth-last-child(3) {
    animation: ${loadingAnimation('.3s')};
  }
`

export default () => (
  <Container>
    <Point />
    <Point />
    <Point />
  </Container>
)

이런 물건을 가운데에 놓아라.
loading on loading처럼 촌티가 뛰어나다.( 'ω')

인도물

화질도 질도 거칠지만 이런 걸 만들었어요.(이미 눈이 안 보여요('ω'))

총결산

크리스마스가 가까워서 로딩에서 눈이 내려 봤어요.
로딩하면 무거워진다.
이 기사에서는 별로 언급하지 않았지만 React Suspense에 대해서도'그렇구나'라는 소감을 얻었습니다.
기술에 관해서는 안 된다고 생각하기 때문에 더욱 공부해야 한다.
가뜩이나 눈이 쌓인 공연을 내놓을 수는 없다.( 'ω')
내일은 @KensukeTakahara 선생님의 투고입니다!
React, TypeScript의 투고인 것 같습니다.기대된다!(전에 이상한 투고가 있어서 미안해요...)