React / ChakraUI / framer-motion でいいねボタンアニメーション実装

はじめに

フロントエンド学習歴半年未満の初心者です。現在ポートフォリオを作成していますが
ReactにおいてFramer Motionというライブラリを知ったので使ってみます。
宣言的な構文が特徴で、少ないコード量でリッチなアニメーションが簡単に実装できます。
今回の様に部分的にさりげなく拘ったアニメーションを追加したい場合などに向いているのかなと思いました。

この記事の対象読者

ReactとChakra UIを使っていて、アニメーションを実装したい方。

何を作るのか

おしゃれないいねボタンアニメーションを実装します。（できるとは言っていない）
イメージとしては以下のような、気持ちの良い感じのアニメーションが理想です。

Twitter

Zenn

準備

yarn add @chakra-ui/react framer-motion@3.10.6 react-icons

※Chakra UIが使える様になるまでの設定は割愛します

追記

https://github.com/chakra-ui/chakra-ui/issues/3618
framer-motionの最新版v4では本番環境で動作が不安定なようです。
v3.10.6 で動作が確認できているとのことなのでこちらをインストールします。

---

react-iconsを使い、後ほど２つのハートマークアイコンをimportします。
（枠線のみのハートマークと塗り潰されたハートマーク）

試しに動かしてみる

公式リポジトリにあるQuick Startを参考にとりあえず動かしてみました。

import { motion } from 'framer-motion'
import type { VFC } from 'react'
import { useState } from 'react'

const LikeButtonWithCount: VFC = () => {
  const [isVisible, setIsVisible] = useState(true)

  const toggleVisible = () => {
    setIsVisible(!isVisible)
  }

  return (
    <motion.h1 animate={{ opacity: isVisible ? 1 : 0 }} onClick={toggleVisible}>
      hogehogehoge
    </motion.h1>
  )
}

このように、とても簡単にアニメーションが実装できそうです🤔

実装

上述した２つのハートマークのアイコン遷移にアニメーションを追加していきたいと思います。
まずはアニメーションのない実装から。
コードが綺麗でない点については何卒ご容赦ください。

import { Box, Icon, Text, Tooltip } from '@chakra-ui/react'
import type { VFC } from 'react'
import { useState } from 'react'
// AiFillHeart => ❤︎
// AiOutlineHeart => ♡
import { AiFillHeart, AiOutlineHeart } from 'react-icons/ai'

export type LikeButtonWithCountProps = {
  count: number
  isLiked: boolean
}

const LikeButtonWithCount: VFC<LikeButtonWithCountProps> = (props: LikeButtonWithCountProps) => {
  const [isLike, setIsLike] = useState(false)

  const toggleLike = () => {
    setIsLike(!isLike)
  }

  return (
    <Box display="flex" alignItems="center" color="gray.500">
      <Tooltip label="いいね！" bg="gray.400" fontSize="11px">
        <Text cursor="pointer" onClick={toggleLike}>
          <Icon
            as={isLike ? AiFillHeart : AiOutlineHeart}
            mr="2.5"
            fontSize="22px"
            color={isLike ? 'red.400' : ''}
          />
        </Text>
      </Tooltip>
      <Text>{props.count}</Text>
    </Box>
  )
}

export { LikeButtonWithCount }

これでとりあえず動作するものになりました。
しかしやはり味気なさを感じてしまいますので改修していきます。

import type { HTMLChakraProps } from '@chakra-ui/react'
import { Box, chakra, Icon, Text, Tooltip } from '@chakra-ui/react'
import type { HTMLMotionProps } from 'framer-motion'
import { motion, useAnimation } from 'framer-motion'
import type { VFC } from 'react'
import { useState } from 'react'
import { AiFillHeart, AiOutlineHeart } from 'react-icons/ai'

export type LikeButtonWithCountProps = {
  count: number
  isLiked: boolean
}

const LikeButtonWithCount: VFC<LikeButtonWithCountProps> = (props: LikeButtonWithCountProps) => {
  const [isLike, setIsLike] = useState(false)
  const controls = useAnimation()

  const toggleLike = async () => {
    await setIsLike(!isLike)
    controls.start({ scale: [1, 1.3, 1.6, 1.3, 1] })
  }

  type Merge<P, T> = Omit<P, keyof T> & T
  type MotionBoxProps = Merge<HTMLChakraProps<'div'>, HTMLMotionProps<'div'>>

  const MotionBox: React.FC<MotionBoxProps> = motion(chakra.div)

  return (
    <Box display="flex" alignItems="center" color="gray.500">
      <Tooltip label="いいね！" bg="gray.400" fontSize="11px">
        <MotionBox
          cursor="pointer"
          onClick={toggleLike}
          animate={controls}
          transition={{ duration: 0.2 }}
        >
          <Icon
            as={isLike ? AiFillHeart : AiOutlineHeart}
            mr="2.5"
            fontSize="22px"
            color={isLike ? 'red.400' : ''}
          />
        </MotionBox>
      </Tooltip>
      <Text>{props.count}</Text>
    </Box>
  )
}

export { LikeButtonWithCount }

少し良くなりました。解説していきます。

type Merge<P, T> = Omit<P, keyof T> & T
type MotionBoxProps = Merge<HTMLChakraProps<'div'>, HTMLMotionProps<'div'>>

const MotionBox: React.FC<MotionBoxProps> = motion(chakra.div)

こちらはFramerMotionの用意しているdiv要素の型と
Chakra UIの用意しているdiv要素の型をマージしています。
これによってMotionBoxタグではFramer MotionとChakra UIのプロパティが
両方使えるという訳です。

ハートのアイコンをMotionBoxで囲み、onClick,animate,transitionプロパティを
指定しました。 さらにuseAnimationHooksをimportして
ボタンクリックをトリガーとしてアニメーションが発火するようにします。

const toggleLike = async () => {
  await setIsLike(!isLike)
  (!isLike) {
    controls.start({ scale: [1, 1.3, 1.6, 1.3, 1] })
  }
}

クリック後のこちらの関数、未いいねならいいねをつける、いいね済ならいいねを外す
という処理ですがsetIsLikeをawaitさせないと
後続のアニメーションスタート処理がうまく動きません。
ここら辺は勉強中なのですが、この方法でもしかしたら何らかの弊害があるかもしれません...

controls.startにてアニメーションをスタートさせます。
配列でプロパティを渡すことでkeyframesと同じ役割をします。
transition={{ duration: 0.2 }}を指定している為、0.2秒
を５で割った地点でそれぞれの変更がアニメーションされます。

最後にアニメーション部分を修正しました。

 controls.start({
   scale: [0.9, 1.1, 1.2, 1.2, 1],
   color: ['#FFF5F5', '#FED7D7', '#FEB2B2', '#FC8181', '#F56565'],
})

(あまり変わっていない)
本当はオブジェクトを周りに散らしたりしたかったのですが、
上手くいかなかったので一旦諦めます... 気が向いたらまたチャレンジするかもしれません。

さいごに

https://www.framer.com/api/motion/
アニメーションに関しては本当にいろいろなことが出来る様です。
リッチな静的サイトを制作する機会があったら、また触ってみたいと思います。