[react] 좋아요 버튼에 애니메이션 넣기

react-icon을 이용하고 있다. 

모듈 설치 후 아이콘을 불러왔다.

import { AiFillHeart } from "react-icons/ai";
import { AiOutlineHeart } from "react-icons/ai";

const TodaySentencePage = () => {
    return (
        <>
            <LikeIcon>
                <svg width="0" height="0">
                    <linearGradient id="gradient" x1="100%" y1="0%" x2="100%" y2="100%">
                        <stop stopColor="#6F61C6" offset="0%" />
                        <stop stopColor="#97A4E8" offset="100%" />
                    </linearGradient>
                </svg>
                    <HeartFilledIcon size={45} />
                    <HeartOutlinedIcon size={45} />
            </LikeIcon>
        </>
    )
}

const HeartFilledIcon = styled(AiFillHeart)`
    fill: url(#gradient);
`;

const HeartOutlinedIcon = styled(AiOutlineHeart)`
    color: #6F61C6;
`;

아이콘을 불러와 색과 크기를 적용한 상태이다. 스타일 컴포넌트를 사용하고 있다.

웹페이지 상에서 무언가 변하는 것들은 state를 사용하면 된다.

서버에 보내고자하는 값들을 state에서 받는다.

const [isChecked, setIsChecked] = useState(false);

하트가 눌린 상태를 표시하기 위해 state를 만들어준다. useState안에 들어가는 값은 기본값이다. 기본값을 false로 설정해준다.

const onClick = () => {
    if (isChecked) {
        setIsChecked(false);
    } else {
        setIsChecked(true);
    }
};

state를 만들었고 이제 이벤트를 처리해줘야 한다.

isCheck가 true일 경우는 setIsChecked(false)로, 

isCheck가 false일 경우는 setIsChecked(true)로 초기화해준다.

여기까지하면 기본적으로 클릭하면 state가 변하는 것이 구현 가능하다.

하지만 나는 여기서 약간의 애니메이션을 넣고 싶다.

const HeartFilledIcon = styled(AiFillHeart)`
    fill: url(#gradient);
    cursor: pointer;
    &:hover {
        transform: scale(1.1);
    }
`;

const HeartOutlinedIcon = styled(AiOutlineHeart)`
    color: #6F61C6;
    cursor: pointer;
    &:hover {
        transform: scale(1.1);
    }
`;

cursor와 hover 속성을 지정해줬다.

cursor는 마우스 커서를 하트에 올리면 pointer로 커서가 변하고

hover는 마우스를 하트에 올리면 생기는 이벤트를 설정할 수 있다.

transform: scale(1.1);를 설정하면 마우스가 하트에 올라가면 하트가 10%커진다.

그럼 이렇게 변한다. 하지만 효과가 아직 각지다.

부드럽게 만들어보자.

const HeartFilledIcon = styled(AiFillHeart)`
    fill: url(#gradient);
    cursor: pointer;
    transition: transform 300ms ease;
    &:hover {
        transform: scale(1.1);
    }
`;

const HeartOutlinedIcon = styled(AiOutlineHeart)`
    color: #6F61C6;
    cursor: pointer;
    transition: transform 300ms ease;
    &:hover {
        transform: scale(1.1);
    }
`;

transition: transform 300ms ease;를추가해보자.

transition : property duration timingfunction delay;

기본 형식은 이러하다.

transition은 속성을 천천히 변화시는 속성이다.

애니메이션 효과는 300ms동안 진행하고, ease는 느리게 시작했다가 빨라졌다 다시 느려지는 속성이다.

그럼 완성!

 

 

참고 자료

https://ablue-1.tistory.com/21

react로 좋아요 버튼 만들기(react기초, setState)

https://www.codingfactory.net/10953

CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성