直播瓷砖像动画

Question

我试图重新在Windows通知队列的滑部分与动画图像我有ontop的另一幅图像的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(); 
} 

如果看起来laggy你，您也可以尝试将元素的VerticalAlignment设置为Bottom，并删除该方法的位置动画部分。