Xamarin.Formsで「いいね」的なボタンを押したときにピョコンとアニメーションさせる
Xamarin.FormsではUIコントロールにシンプルなアニメーションをつけることができます.という記事を以前にかきました.
シンプルとはいえ,これらを組み合わせることでそれっぽいおしゃれな動きをさせることができます.
今回はよくある「いいね(like)」マークを押したときによくあるピョコンというアニメーションを表現してみました.
ずばり以下の通りなのですが,Imageに以下のハートマーク(heart.png)をセットしておきます.
また,「いいね」した状態の画像(heart_full.png)も用意しておきます.
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) ); }
これで無限に「いいね!」することができます.
このように,(行数は増えるものの)簡単にアニメーションを指定できるのはとても便利です.