Live Tile like Animation

Question

Ich versuche, die Slide-Up-Animation der Benachrichtigungswarteschlange auf Windows 10 Live-Kacheln mit einem Bild, das ich auf einem anderen Bild habe, neu zu erstellen. Unten habe ich ein "slide-up" Storyboard, das funktioniert ... aber es ist nicht dasselbe.

Wird die Live-Fliese ani tatsächlich größer, wenn sie über die erste gleitet?

Ich kann nicht sehen, was es tut.

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

Der Flip-Teil der Animationen wäre auch nett.

Answer 1

Sie konnten einen Blick auf die DoubleAnimationUsingKeyFrames Klasse nehmen:

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

Update: Sie können auch die Höhe des Bildes animieren

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

Wenn das für Sie zu laggy sieht Sie können auch versuchen, die VerticalAlignment des Elements auf Bottom zu setzen und den Positionsanimationsteil der Methode zu entfernen.