expoで ぷるんっとしたボタンの実装方法
abyblog
expoでボタンを実装するとき、やはり動きをつけたくなりますよね。
今回は、ぷるんとしたボタンの実装方法についてまとめていきます。
こんな動きをつけることができます
写真や文字の実装は含みません。動きのみです。
目次（クリックで読みたい部分にジャンプできます）
必要なパッケージのインストール
まず必要なパッケージのインストールをしていきましょう。
expo install react-native-reanimated react-native-gesture-handlerこの二つがインストールできたら、最初の準備は終了です。
コードを書いていきましょう。
実際のコード
実際のコードは次のようなものです。
//必要なものをインポートする。
const MatchingButtonContainer = ({value,beforeImage,afterImage}) => {
const [isColor, setIsColor] = useState(true)
const scale = useSharedValue(1);
const toggleImage = () => {
console.log("Pressed")
};
const handlePressIn = () => {
scale.value = withSpring(0.8, {
damping: 2,
stiffness: 80,
overshootClamping: false,
});
};
const handlePressOut = () => {
scale.value = withSpring(1, {
damping: 8,
stiffness: 800,
overshootClamping: false,
});
};
const animatedStyle = useAnimatedStyle(() => {
return {
transform: [{ scale: scale.value }],
};
});
return (
<Pressable
onPress={toggleImage}
onPressIn={handlePressIn}
onPressOut={handlePressOut}
>
<Animated.View style={animatedStyle}>
<Text>要素</Text>
//要素を追加する
</Animated.View>
</Pressable>
);
};要素を押したとき、離した時にそれぞれ関数を実行することにより、変化を表現しています。
押したとき＝ onPressIn = {handlePressIn}
離した時 ＝ onPressOut={handlePressOut}
動きを変えたい時
動きを変えるには、次のコードの数字部分を調整します。
scale.value = withSpring(1, {
damping: 8,
stiffness: 800,
overshootClamping: false,
});1は大きさ。
今回のコードは、押した時に0.8倍になり、離したら1倍（元に戻る）ように設定しています。
dampingは振動の強度
stiffness は硬さを変えることができます（スーパーボールと鉄球の違いのようなニュアンス）
実際にコードをいじってみた方が早いので、ぜひ自分の好きな動きをつけてみてください！
まとめ
今回は、expoでぷるんとした動きをつけるためのコードを紹介しました。
ボタンを作ったりする時には、 特徴的な動きをつけるだけで、完成度が上がります。
ぜひ作ってみてくださいね！
(Visited 13 times, 1 visits today)
