【react】framer-motionを使ってスワイプ機能を実装する

お題

framer-motionを使ってスワイプ機能を実装する

少し前にframer-motionを使った画面遷移を実装しましたが、今度は一つのコンポーネントで

スワイプをする機能を試しに実装してみたいと思います。

スワイプ機能は一から作るとアニメーションの始まりとか細かい動きを加えたりと

やたらめんどくさいですが、framer-motionには一括で管理できるプロパティが一通り

備わっています。

以下のコードをみていただくと分かると思います。

import { motion, AnimatePresence } from "framer-motion"
export const Slideshow = ({ image }) => ( 
<AnimatePresence>
<motion.img 
  key={image.src}
  src={image.src} 
  initial={{ opacity: 0, y: 200 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
  drag="x"
  dragConstraints={{ left: 0, right: 0 }}
  dragElastic={1} />
</AnimatePresence> )

追加したプロパティはdrag・dragConstraints・dragElasticの三点です。

drag：スワイプする面を指定します。xでは横。yでは縦にスワイプをします。

dragConstraints：ドラッグの効く範囲を設定します。この値を指定した位置までドラッグするまで

はスワイプが走ることはありません。

dragElastic：ドラッグした時のコンポーネントの弾力を表します。高く設定すると

少しのドラッグでコンポーネントがスワイプされます。

この三点を抑えた上でスワイプする対象・必要な設定を更に盛り付けることで上質な

スワイプ機能を持ったアプリに仕上げることができます。

まとめ

応用すればスワイプを使った画面遷移も実現できるのでreactでスワイプ機能を実装してみたい

方はお試しください。