浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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でスワイプ機能を実装してみたい

方はお試しください。

  • この記事いいね! (0)