直播瓷磚像動畫

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，並刪除該方法的位置動畫部分。