인프런 React 강의 듣고 사이트 만들기 _ Front 작업 02. wifi 애니메이션 만들기 (styled-components)

(강의내용과 큰 상관없습니다. 강의 듣고 결과물 만드는 작업 중입니다.)

 

작업물에 wifi 애니메이션이 필요해서 제작해보기로했습니다.

뭐 대충 이런거..

wifi 이미지

 

딱히 기능은 없고 css 애니메이션으로만..

codepen.io에서 간단한 코드를 발견해서 크기만 수정해서 사용하기로 했습니다.

 

감사합니다 ㅎㅎ

코드 출처입니다.

https://codepen.io/roncallyt/pen/GymuE

Wifi signal, pure CSS

 

일단 styled-components를 통해 작업하는데, keyframe을 어떻게 처리할까 하고 찾아보다가 발견했고 참고글을 읽고 작업했습니다^^. 

공식문서에도 있겠지요. 쉽게 설명해주셨습니다.

https://medium.com/@shlee1353/%EB%A6%AC%EC%95%A1%ED%8A%B8-styled-components-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EA%B5%AC%ED%98%84-fbbb8aa9e722

리액트 styled components 애니메이션 구현

공식문서도 확인해봅시다.

styled-components.com/docs/basics#animations

styled-components: Basics

 

별도로 keyframes를 제공해줍니다.

import styled, { keyframes } from 'styled-components';

 

이건 완성 코드!

import React from 'react';
import PropTypes from 'prop-types';
import styled, { keyframes } from 'styled-components';

const lineDefaultStyle = `
    border: 2px solid transparent;
    border-radius: 100%;
`;

const appearIn = (themeColor) => keyframes`
    0%{ border-top-color: transparent; }
    25%{ border-top-color: ${themeColor}; }
    75%{ border-top-color: ${themeColor}; }
    100%{ border-top-color: ${themeColor}; }
`;

const appearMiddle = (themeColor) => keyframes`
    0%{ border-top-color: transparent; }
    25%{ border-top-color: transparent; }
    75%{ border-top-color: ${themeColor}; }
    100%{ border-top-color: ${themeColor}; }
`;

const appearOut = (themeColor) => keyframes`
    0%{ border-top-color: transparent; }
    25%{ border-top-color: transparent; }
    75%{ border-top-color: transparent; }
    100%{ border-top-color: ${themeColor}; }
`;

const OutLine = styled.div`
    ${lineDefaultStyle}
    margin: 1px auto;
    width: 25px;
    height: 30px;
    border-top-color: ${props => props.themeColor};
    animation: ${props => appearOut(props.themeColor)} 1.5s infinite linear
`;

const MiddleLine = styled.div`
    ${lineDefaultStyle}
    margin: 1px auto;
    width: 18px;
    height: 25px;
    border-top-color: ${props => props.themeColor};
    animation: ${props => appearMiddle(props.themeColor)} 1.5s infinite linear
`;

const InLine = styled.div`
    ${lineDefaultStyle}
    margin: 1px auto;
    width: 14px;
    height: 23px;
    border-top-color: ${props => props.themeColor};
    animation: ${props => appearIn(props.themeColor)} 1.5s infinite linear
`;

const Dot = styled.div`
    ${lineDefaultStyle}
    margin: 2px auto;
    width: 3px;
    height: 3px;
    border: 0;
    background: ${props => props.themeColor};
`;

const Wifi = (({ themeColor }) => {
    return(
        <OutLine themeColor={themeColor}>
            <MiddleLine themeColor={themeColor}>
                <InLine themeColor={themeColor}>
                    <Dot themeColor={themeColor} />
                </InLine>
            </MiddleLine>
        </OutLine>
    );
});

Wifi.propTypes = {
    themeColor: PropTypes.string,
};

Wifi.defaultProps = {
    themeColor: '#333',
};

export default Wifi;

테마색으로 라인을 그려주려고 외부에서 props를 전달받습니다.

뭔가 중복되는 코드들을 줄일 수 있을 것 같은데, 최적화는 추후에..^^;;

 

완성된 와이파이!

wifi

근데 왜 노트북에서는 잘 되던게, 데탑오니까 애니메이션 반복이 안되는지는 봐야겠습니다~

infinite가 빠졌군요. ㅎ 코드는 수정해두었습니다.~

 

여튼 약간 엉성하긴 한데, 좋습니다. 굿굿