Xamarin Forms等待动画或事件完成

时间:2017-07-11 00:48:34

标签: c# xamarin xamarin.forms

所以我试图让我的按钮在另一个动作发生之前执行动画。但是如何设置它会有点奇怪。

我有一个名为AnimatedButton的子类按钮,它添加了一个Click + = AnimatedButton_Clicked处理程序来执行动画,如下所示:

    using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace TransactionApp_2.Views.UITools.Buttons
{
    class AnimatedButton : Button
    {
        /// <summary>
        /// Generic Animated Button Subclass that allows for:
        /// Button indexing,
        /// Simple sleek animations,
        /// Sets initial properties and parameters,
        /// allows easy background images
        /// </summary>

        public int ButtonIndex { get; set; }
        public AnimatedButton(string buttonText, ImageSource backgroundImage = null, int buttonIndex = 0)
        {
            ButtonIndex = buttonIndex;
            Text = buttonText;
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label));
            Opacity = 0.95;
            Margin = new Thickness(8,0,8,0);

            Clicked += AnimatedButton_Clicked;

            if (backgroundImage != null)
            {
                //Set Background Image
            }

        }
        private async void AnimatedButton_Clicked(object sender, EventArgs e)
        {

            //Obsolete version of OnPlatform
#pragma warning disable CS0618 // Type or member is obsolete
            var platformSpecific = Device.OnPlatform<uint>(50, 50, 25); //Whats the new version of this??
#pragma warning restore CS0618 // Type or member is obsolete

            //Simple Animations
            await this.ScaleTo(0.85, platformSpecific, Easing.SinIn);


     await this.FadeTo(0.8, platformSpecific, Easing.SinOut);
        await this.FadeTo(0.95, platformSpecific, Easing.SinIn);
        await this.ScaleTo(1, platformSpecific, Easing.SinOut);
    }
}

}

在我的UI后端代码中,我还添加了一个新的点击事件,刷新了UI的网格,如下所示:

            for (int i = 0; i < count; i++)
        {

            grid.RowDefinitions.Add(rowCollection[i]);
            AnimatedButton button = new AnimatedButton(menuOptions.ItemDataList[i].TitleText) { ButtonIndex = i+1};
            button.Clicked += (s, e) =>
            {
                        RefreshGrid(button.ButtonIndex);
            };
            grid.Children.Add(button, 0, i + 1);
        }

显然,当按下按钮时,两个事件都在同一时间执行,在动画结束前刷新网格。使用这种类型的设置如何使RefreshGrid()调用等到子类中的动画完成?我一直在尝试使用线程来处理这个问题,但没有运气。

想想也许有一种方法可以在调用RefreshGrid()之前等待事件或动画完成,或者更好地使用线程。

谢谢!

2 个答案:

答案 0 :(得分:2)

这可能看起来像是一种解决方法但你可以暴露在点击事件的动画完成后引发的另一个事件,并让后端订阅它。

大致看起来像这样。 (免责声明:此代码尚未经过测试。)

AnimatedButton:

public event EventHandler ClickedAnimationCompleted = delegate { };

private async void AnimatedButton_Clicked(object sender, EventArgs e) {

    //...other code removed for brevity

    //Simple Animations
    await this.ScaleTo(0.85, platformSpecific, Easing.SinIn);

    await this.FadeTo(0.8, platformSpecific, Easing.SinOut);
    await this.FadeTo(0.95, platformSpecific, Easing.SinIn);
    await this.ScaleTo(1, platformSpecific, Easing.SinOut);

    ClickedAnimationCompleted(this, EventArgs.Empty);   
}

后端:

for (int i = 0; i < count; i++) {
    grid.RowDefinitions.Add(rowCollection[i]);
    AnimatedButton button = new AnimatedButton(menuOptions.ItemDataList[i].TitleText) { ButtonIndex = i+1};
    button.ClickedAnimationCompleted += (s, e) => {
        RefreshGrid(button.ButtonIndex);
    };
    grid.Children.Add(button, 0, i + 1);
}

答案 1 :(得分:1)

添加与动画一样多的延迟。

await grid1.TranslateTo(-100, 0, 300);
await Task.Delay(300);