C# 实时瓦片式动画

我正在尝试在Windows 10 live互动程序上使用我在另一个图像上看到的图像重新创建通知队列的幻灯片部分动画。下面我有一个“向上滑动”的故事板在工作…但它不一样

当活瓦片在第一层上滑动时，它的高度是否真的在增长

我看不清它在干什么

public static async Task SlideUp(FrameworkElement element, double duration, int to = 0)
    {
        var tempTransform = new TranslateTransform();
        element.RenderTransform = tempTransform;
        var animation = new DoubleAnimation
        {
            From = element.ActualHeight * 2,
            To = to,
            Duration = TimeSpan.FromSeconds(duration),
            EasingFunction = new CubicEase { EasingMode = EasingMode.EaseOut }
        };

        Storyboard.SetTargetProperty(animation, "Y");
        Storyboard.SetTarget(animation, tempTransform);
        var sb = new Storyboard();
        sb.Duration = animation.Duration;
        sb.Children.Add(animation);
        await sb.BeginAsync();
    }

---

动画的翻转部分也不错。

您可以查看DoubleAnimationUsingKeyFrames类：

更新：您还可以设置图像高度的动画

public static async Task SlideUp(FrameworkElement element, double duration, int to = 0)
{
    var trTransform = new TranslateTransform();
    element.RenderTransform = trTransform;
    double from = element.ActualHeight;
    duration *= 1.5;



    var animation = new DoubleAnimationUsingKeyFrames();
    animation.KeyFrames.Add(new DiscreteDoubleKeyFrame
    {
        KeyTime = KeyTime.FromTimeSpan(new TimeSpan(0,0,0,0)),
        Value = from / 2
    });
    var ks = new KeySpline { ControlPoint1 = new Point(0.0, 0.0), ControlPoint2 = new Point(0.9, 0.1) };
    animation.KeyFrames.Add(new SplineDoubleKeyFrame
    {
        KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(duration*1000/2)),
        KeySpline = ks,
        Value = (from - to) / 3 + to
    });
    var ks2 = new KeySpline { ControlPoint1 = new Point(0.1, 0.9), ControlPoint2 = new Point(0.2, 1.0) };
    animation.KeyFrames.Add(new SplineDoubleKeyFrame
    {
        KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(duration)),
        KeySpline = ks2,
        Value = to
    });
    Storyboard.SetTargetProperty(animation, "Y");
    Storyboard.SetTarget(animation, trTransform);
    var sb = new Storyboard();
    sb.Duration = animation.Duration;
    sb.Children.Add(animation);



    DoubleAnimationUsingKeyFrames resizeHeightAnimation = new DoubleAnimationUsingKeyFrames()
    {
        EnableDependentAnimation = true
    };
    resizeHeightAnimation.KeyFrames.Add(new DiscreteDoubleKeyFrame
    {
        KeyTime = KeyTime.FromTimeSpan(new TimeSpan(0, 0, 0, 0)),
        Value = 0
    });
    var heightSpline1 = new KeySpline { ControlPoint1 = new Point(0.0, 0.0), ControlPoint2 = new Point(0.9, 0.1) };
    resizeHeightAnimation.KeyFrames.Add(new SplineDoubleKeyFrame
    {
        KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(duration * 1000 / 2)),
        KeySpline = heightSpline1,
        Value = from / 3
    });
    var heightSpline2 = new KeySpline { ControlPoint1 = new Point(0.1, 0.9), ControlPoint2 = new Point(0.2, 1.0) };
    resizeHeightAnimation.KeyFrames.Add(new SplineDoubleKeyFrame
    {
        KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(duration)),
        KeySpline = heightSpline2,
        Value = from
    });
    Storyboard.SetTarget(resizeHeightAnimation, element);
    Storyboard.SetTargetProperty(resizeHeightAnimation, "RenderTransform.Height");
    sb.Children.Add(resizeHeightAnimation);


    sb.Begin();
}

---

如果这看起来很适合你，你也可以尝试将元素的垂直对齐设置为底部，并删除该方法的位置动画部分。

放松效果很完美，但向上滑动从它位于topof上的图像下方开始。从=element.ActualHeight*2更改为-from=element.ActualHeight，仍然从下面开始。图像必须看起来是从底部开始增长的，直到它填满下面的图像。it.Ok，所以还需要一个高度动画，我更新了解决方案。