Xamarin形式的Animation和GridLength [英] Animation and GridLength in Xamarin forms

问题描述

我有类模型

public class Model : INotifyPropertyChanged
...
private GridLength detailsPanelHeight { get; set; }
public GridLength DetailsPanelHeight
{
    get { return detailsPanelHeight; }
    set
    {
        if (!GridLength.Equals(detailsPanelHeight, value))
        {
            detailsPanelHeight = value;
            OnPropertyChanged("DetailsPanelHeight");
        }
    }
}
...

XAML代码的一部分：

part of XAML code:

< RowDefinition Height = {Binding DetailsPanelHeight} />

做动画的代码（平滑更改行高）：

code to do animation (changing row height smoothly):

var animate = new Animation(d => currentItem.DetailsPanelHeight = d, 0, 100);
animate.Commit(this, "ExpandAnimation", 50, 1000, Easing.SpringOut);

折叠行的代码：
var animate = new Animation （d => currentItem.DetailsPanelHeight = d，100，0）;
animate.Commit（this， CollapseAnimation，50，1000，Easing.SpringOut）;

它适用于第一个时间，但第二次出现错误：值小于0或不是数字\n参数名称：值。我看到 d 的值小于零。

It works for the first time, but for the second time i get an error: "value is less than 0 or is not a number\nParameter name: value". I see d value is less than zero.

我该怎么做才能解决此问题？

What can i do to fix this problem?

推荐答案

我使用了类似这样的方法，对我来说效果很好。我希望它也适合您。

I've used something like this that worked perfectly for me. I hope it fits for you too.

此动画在 delete 动作调用后调用命令时会折叠视图单元格。这是代码：

This animation collapses the view cell while calling a command after a delete action invocation. Here's the code:

private async void RemoveButtonTapped(object sender, EventArgs e)
{
    Parallel.Invoke(() =>
        {
             if (RemoveCommand?.CanExecute(RemoveCommandParameter) ?? false)
                 RemoveCommand.Execute(RemoveCommandParameter);
        },
        AnimatedDestruction);
}

动画方法

Animation method

private async void AnimatedDestruction()
{
    uint transitionTime = 300;
    decimal delayFactor = 1.2m;

    // Note: stackPanel is the viewCell's top-level container

    await Task.WhenAll(
        stackPanel.FadeTo(0, Convert.ToUInt32(transitionTime * delayFactor), Easing.CubicInOut),
        View.InterpolateValue(stackPanel.Height, 0, Transition, transitionTime, Easing.CubicInOut)
        );
}

转换回调函数

Transition callback function

private void Transition(double value)
{
    const double minHeightValue = 0.001;

    value = value <= minHeightValue ? minHeightValue : value;

    Height = value;
    ForceUpdateSize();
}   

InterpolateValue 函数作为扩展方法（非常可重复使用）

The InterpolateValue function as an extension method (very reusable)

public static Task<bool> InterpolateValue(this View view, double initialValue, double endValue, Action<double> transformIteration, uint length, Easing easing)
{
    Task<bool> ret = new Task<bool>(() => false);

    if (!view.AnimationIsRunning(nameof(InterpolateValue)))
    {
        try
        {
            easing = easing ?? Easing.Linear;
            var taskCompletionSource = new TaskCompletionSource<bool>();

            view.Animate(nameof(InterpolateValue), ((_double) => initialValue - (initialValue * _double)), transformIteration, 16, length, easing, (v, c) => taskCompletionSource.SetResult(c));
            ret = taskCompletionSource.Task;
        }
        catch
        {
            // supress animation overlapping errors 
        }
    }

    return ret;
}

我希望它对您有用。

这篇关于Xamarin形式的Animation和GridLength的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！