Live Tile like Animation

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

Update: Вы также можете анимировать Высота изображения

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 и удалить часть анимации позиции метода.