c＃UWPのスライド要素

Question

UWPのアニメーションに関する質問があります。私はトップにタップすると、スライドショー（ショー）またはスライドショー（ほぼ完全に隠れる）という、私のアプリの一番下にメニューを持っていたい。私は以前WPFを学習していましたが、ThicknessAnimationを使用してコントロールのマージンを移動してスライドさせることができることを知っています。残念ながら、UWPではThicknessAnimationsを使用できませんので、別の方法を探しました。私は任意のFrameworkElement（これを再利用できるように）で動作させたいと思っています。結局、私はこの解決策を思い付いた：それは作品

/// <summary> 
    /// Adds a vertical slide animation 
    /// </summary> 
    /// <param name="storyboard">The storyboard to add the animation to</param> 
    /// <param name="seconds">The time the animation will take</param> 
    /// <param name="offset">The distance the element will cover (nagative is up, positive is down)</param> 
    public static void AddVerticalSlide(this Storyboard storyboard, FrameworkElement element, float seconds, double offset) 
    { 

     var slideAnimation = new ObjectAnimationUsingKeyFrames();  

     for (int i = 0; i <= 100; ++i) 
     { 
      double scalar = (double)i/100; 
      slideAnimation.KeyFrames.Add(new DiscreteObjectKeyFrame 
      {     
       Value = new Thickness(0, scalar*offset, 0, -scalar*offset), 
       KeyTime = TimeSpan.FromSeconds(scalar*seconds), 
      }); 
     } 

     //slideAnimation.Duration = TimeSpan.FromSeconds(seconds); 

     // Set the target and target property 
     Storyboard.SetTarget(slideAnimation, element); 
     Storyboard.SetTargetProperty(slideAnimation, "(FrameworkElement.Margin)"); 

     // Add the animation to the storyboard 
     storyboard.Children.Add(slideAnimation); 
    } 

、良さそうに見えますが、ここで私はこの質問を求めている理由です：それは正しいかどうかはわかりません。私のゲーは、途中で手動で100ポイントを定義し、このアニメーションを使ってオブジェクトを各ポイントに移動するよりも、オブジェクトをスライドさせるより良い方法があるということです。

Answer 1

これは機能しますが、オフセットのに理想的な方法ではありません。どうして？実際にはの1つだけがの2つ多く作成されているため、DoubleAnimationが必要です。

要素のMarginをアニメーション化することはほとんどありません。その位置を変更するには、トランスフォーム（RenderTransform）の変換値（つまりTranslateX/TranslateY）をアニメーション化することをおすすめします。

変換で何かをアニメーション化するのが効率的です。それらはUIスレッドから外れています。伝統的に、彼らは特別なスレッドで実行されていたがコンポジスレッドを（と思う）と呼ばれるが、これまでクリエーター更新以来、彼らはWindows UI teamに応じて、さらにパフォーマンスとなっている - あなたはストーリーボードを使用する場合

とXAMLのトランジションアニメーション、あなたは フードの下のコンポジションを使用しています。アニメーションは、 秒ごとに60フレームで実行されます！

次は、このアプローチが得るほどパフォーマンス

public static void Slide(this UIElement target, Orientation orientation, double? from, double to, int duration = 400, int startTime = 0, EasingFunctionBase easing = null) 
{ 
    if (easing == null) 
    { 
     easing = new ExponentialEase(); 
    } 

    var transform = target.RenderTransform as CompositeTransform; 
    if (transform == null) 
    { 
     transform = new CompositeTransform(); 
     target.RenderTransform = transform; 
    } 
    target.RenderTransformOrigin = new Point(0.5, 0.5); 

    var db = new DoubleAnimation 
    { 
     To = to, 
     From = from, 
     EasingFunction = easing, 
     Duration = TimeSpan.FromMilliseconds(duration) 
    }; 
    Storyboard.SetTarget(db, target); 
    var axis = orientation == Orientation.Horizontal ? "X" : "Y"; 
    Storyboard.SetTargetProperty(db, $"(UIElement.RenderTransform).(CompositeTransform.Translate{axis})"); 

    var sb = new Storyboard 
    { 
     BeginTime = TimeSpan.FromMilliseconds(startTime) 
    }; 

    sb.Children.Add(db); 
    sb.Begin(); 
} 

注このような技術を使用した例である、アニメーションのサポートが新たに作曲APIのおかげで、UWPでさらに強力にあります。しかし、Compositionのオフセットアニメーションはビットtrickyにすることができます。

しかし、UWPコミュニティTookit等Blur、Offset、のようないくつかの有用なアニメーションがthemアウトをチェックするためにお気軽に包む素晴らしい仕事をしています。