c# - 像动画一样的动态磁贴

Question

我正在尝试在 Windows 10 动态磁贴上使用我在另一张图片之上的一张图片重新创建通知队列的向上滑动部分动画。下面我有一个“向上滑动”的 Storyboard在工作......但它不一样。

动态磁贴 ani 在第一个上方滑动时实际上在增加高度吗？

我无法“看到/理解”它在做什么。

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();
    }

动画的翻转部分也很好。

Answer 1

您可以看一下 DoubleAnimationUsingKeyFrames 类:

https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.doubleanimationusingkeyframes.aspx

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

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();
}

如果这对您来说太慢了，您也可以尝试将元素的 VerticalAlignment 设置为 Bottom 并删除该方法的位置动画部分。