Question

我正在尝试在Windows 10动态磁贴上重新创建通知队列的上滑部分动画，其中包含我在另一个图像上的图像。下面我有一个“向上滑动”的故事板......但它不一样。

活动瓷砖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并删除方法的位置动画部分。

Live Tile就像动画一样

1 个答案: