shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.Formsで「いいね」的なボタンを押したときにピョコンとアニメーションさせる

Xamarin.FormsではUIコントロールにシンプルなアニメーションをつけることができます.という記事を以前にかきました.

shuhelohelo.hatenablog.com

シンプルとはいえ,これらを組み合わせることでそれっぽいおしゃれな動きをさせることができます.

今回はよくある「いいね(like)」マークを押したときによくあるピョコンというアニメーションを表現してみました.

ずばり以下の通りなのですが,Imageに以下のハートマーク(heart.png)をセットしておきます. f:id:shuhelohelo:20191205023722p:plain:w100

また,「いいね」した状態の画像(heart_full.png)も用意しておきます. f:id:shuhelohelo:20191205024104p:plain:w100

ImageコントロールTapGestureRecognizerイベントハンドラをセットします.

            <StackLayout Orientation="Horizontal"
                         HorizontalOptions="CenterAndExpand">
                <Image x:Name="heartImage" Source="heart" HeightRequest="30">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_heartImage"/>
                    </Image.GestureRecognizers>
                </Image>
            </StackLayout>

さて,コードビハインドですが,以下のように一度縮めて,画像を切替えてまた大きくするというアニメーションをさせています.

そして大きくさせるときにEasing.SpringOutによってピョコンとさせています.

        private async void TapGestureRecognizer_Tapped_heartImage(object sender, EventArgs e)
        {
            //一旦縮みつつフェードアウトさせる.
            //若干速く
            uint duration = 50;
            await Task.WhenAll(
                     heartImage.ScaleTo(0.2, duration),
                     heartImage.FadeTo(0.2, duration)
                );

            //Sourceにセットされている画像ファイル名に応じて,
            //2つの画像を交互に切り替える
            string imageSource = Regex.Match(heartImage.Source.ToString(), @"(?<=:).+").Value.Trim();
            if (imageSource == "heart")
            {
                heartImage.Source = "heart_full";
            }
            else
            {
                heartImage.Source = "heart";
            }

            //少し遅めの速度で元のサイズ,透明度に戻す
            //SpringOutをつけてピョコン感をだしている
            uint duration2 = 300;
            await Task.WhenAll(
                     heartImage.ScaleTo(1, duration2, Easing.SpringOut),
                     heartImage.FadeTo(1, duration2, Easing.SpringOut)
                );
        }

これで無限に「いいね!」することができます.

このように,(行数は増えるものの)簡単にアニメーションを指定できるのはとても便利です.