Sliding elements in c# UWP

问题

I have a question about animations in UWP. I want to have a menu on the bottom of my app that, when tapped on the top, slides up (shows) or down (hides almost entirely). I was learning WPF before and there I know I can use ThicknessAnimation to move the margin of my control and have it slide. Unfortunately, in UWP I can't use ThicknessAnimations, so I tried to find another way. I want this to work for an arbitrary FrameworkElement (so as to be able to reuse it). Eventually, I came up with this solution:

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

It works, looks nice, but here's the reason I'm asking this question: I don't know if it's proper. My guees is that there's a better way to slide objects than manually define 100 points on the way and move the object to each point using this animation.

回答1:

This works but is just not the ideal way to offset an element. Why? Because you are creating two many DiscreteObjectKeyFrames when you really just need one DoubleAnimation.

You should almost never animate the Margin of an element. To change its position, a better approach is to animate the translate values (i.e. TranslateX/TranslateY) of its transform (RenderTransform) instead.

Animating anything in transform is efficient. They are off the UI thread. Traditionally, they were running in a special thread called Compositor thread (I think), but ever since the Creators Update, they have become even more performant according to the Windows UI team -

When you use Storyboard and Transition animations in XAML, you’re using Composition under the hood. Animations run at 60 frames per second!

The following is an example of using such technique

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

Note as performant as this approach gets, there is even more powerful animation support in UWP, thanks to the new Composition API. But offset animation in Composition can be a bit tricky.

However, the UWP Community Tookit has done a great job wrapping some useful animations like Blur, Offset, etc. Feel free to check them out.

来源：https://stackoverflow.com/questions/45485321/sliding-elements-in-c-sharp-uwp