Animation effects when converting images in Xamarin
I am creating an image button. In renderer.cs, I am writing an example that converts an image according to the button check state.
I even made the image change according to the check status. It's a bit awkward to simply change the image, so I want to give it an animation effect.
When I looked for examples of animation effects, there was a part that translated the image, but when I applied it to my code, an error occurred.
public class CustomImageToggleButtonRenderer : ImageButtonRenderer
{
public bool IsChecked
{ get; set; } = false;
public CustomImageToggleButtonRenderer(Context context) : base(context)
{
}
/// <summary>
/// 원이미지 기억용
/// </summary>
#region Source
public ImageSource Source
{
get;
private set;
}
#endregion
/// <summary>
/// 개체가 화면에 시현되면 발생합니다.
/// </summary>
#region OnElementChanged
protected override void OnElementChanged(ElementChangedEventArgs<ImageButton> e)
{
base.OnElementChanged(e);
//항목이 없는 경우 처리 안함.
if (e.OldElement != null || this.Element == null)
{
return;
}
var control = e.NewElement as CtrlImageToggleButton;
if(control.Source == null)
SetImage(control);
// [비 활성화 이미지 처리]
if (control.DisabledImageSource != null)
{
this.Source = control.Source;
SetImage(control);
control.PropertyChanged += (sender, arg) =>
{
if (arg.PropertyName == "IsEnabled")
{
SetImage(control);
}
};
}
control.Clicked += delegate
{
IsChecked = !IsChecked;
if (!control.HasVoice)
{
AudioPlayer.PlayClickSound();
}
if(IsChecked)
{
if (control.ToggleOnImageSource != null)
{
this.Source = control.Source;
control.Source = control.ToggleOnImageSource;
}
}
else
{
if (control.ToggleOffImageSource != null)
{
this.Source = control.Source;
control.Source = control.ToggleOffImageSource;
}
}
//Image tempImage = (Image)control.Source as Image;
//await Task.WhenAll()
//await Task.WhenAll(
// this.Source.FadeTo(0, transitionTime, Easing.Linear),
// image.TranslateTo(-displacement, image.Y, transitionTime, Easing.CubicInOut));
//// Changes image source.
//image.Source = ImageSource.FromFile("Icon");
//await image.TranslateTo(displacement, 0, 0);
//await Task.WhenAll(
// image.FadeTo(1, transitionTime, Easing.Linear),
// image.TranslateTo(0, image.Y, transitionTime, Easing.CubicInOut));
};
}
#endregion
/// <summary>
/// 이미지 설정
/// </summary>
#region SetImage
private void SetImage(CtrlImageToggleButton control)
{
//if (control.IsEnabled)
//{
// control.Source = this.Source;
//}
//else
//{
// this.Source = control.Source;
// control.Source = control.DisabledImageSource;
//}
if (IsChecked)
{
this.Source = control.ToggleOnImageSource;
control.Source = this.Source;
}
else
{
this.Source = control.ToggleOffImageSource;
control.Source = this.Source;
}
}
#endregion
}
Is there a way to make the image change depending on the button check state and animate it?
I'd appreciate it if you could show me an example I can refer to.