0

我目前在我的应用程序中通过代码在图像上使用 TranslateTransform 并且它工作正常。

但我希望图像逐步移动，假设每次移动跳跃 10 或 20 像素。有没有办法做到这一点。这给运动带来了复古的味道。

我在想类似 TranslateTransform.Step = 10;

            Duration durationX = new TimeSpan(0, 0, 0, 0, 600);
            Duration durationY = new TimeSpan(0, 0, 0, 0, 400);

            DoubleAnimation moveX = new DoubleAnimation();
            moveX.Duration = durationX;
            moveX.To = ((ImgCanvasCoordinates[cardSource][0] - ImgCanvasCoordinates[cardTarget][0]) * -1);
            DoubleAnimation moveY = new DoubleAnimation();
            moveY.Duration = durationY;
            moveY.To = ((ImgCanvasCoordinates[cardSource][1] - ImgCanvasCoordinates[cardTarget][1]) * -1);

            Storyboard story1 = new Storyboard();
            story1.Children.Add(moveX);
            story1.Children.Add(moveY);
            Storyboard.SetTarget(moveX, imgGhost);
            Storyboard.SetTarget(moveY, imgGhost);
            Storyboard.SetTargetProperty(moveX, "(Image.RenderTransform).(TranslateTransform.X)");
            Storyboard.SetTargetProperty(moveY, "(Image.RenderTransform).(TranslateTransform.Y)");

            story1.Begin();
4

1 回答 1

2

步进动画效果预览

您可以使用自定义EasingFunction来实现此目的。

通过编写一个EasingFunction你可以完全控制动画的运动。我写了一个StepEasingFunction如下图：

public class StepEasingFunction : EasingFunctionBase
{
    public double NormalizedStep { get; set; }

    protected override Freezable CreateInstanceCore()
    {
        return new StepEasingFunction {NormalizedStep = NormalizedStep};
    }

    protected override double EaseInCore(double normalizedTime)
    {
        var stepIndex = Math.Round(normalizedTime / NormalizedStep);
        return NormalizedStep * stepIndex;
    }
}

然后，只需添加一个 EasingFunction 分配给动画：

moveX.EasingFunction = new StepEasingFunction {NormalizedStep = 0.2};
moveY.EasingFunction = new StepEasingFunction {NormalizedStep = 0.2};

那么，如何计算NormalizedStep房产的价值呢？

你说你想要每一步移动 10 像素，所以计算步数总计数并用于1 / stepTotalCount计算最终NormalizedStep属性。

于 2019-05-29T00:38:26.833 回答