Animation effects when converting images in Xamarin

Viewed 26

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.

0 Answers
Related