Анимация исчезновения видимости значков панели приложения в приложениях WinRT

Question

Все приложения Windows 8 по умолчанию используют одинаковые анимации затухания для значков на панели приложений при их отображении и скрытии (в зависимости от изменения контекста). На этой странице рассказывается о настройке видимости значков панели приложения, но не упоминается их анимация.

Мне бы хотелось, чтобы значки на панели моего приложения использовали ту же анимацию. Когда значок становится скрытым, он должен стать прозрачным, а затем свернуться, и когда оно станет видимым, произойдет обратное. Как лучше всего добиться этой анимации?

Answer 1

Вы ищете что-то похожее на это, вы просто запустите свою раскадровку на основе, скажем, события Mouse down или некоторого значения. Просто предупреждение, приведенные ниже значения являются грубым примером, вам нужно будет настроить их, чтобы получить именно то, что вы хотите. Вы можете использовать Storyboard в качестве ресурса в нескольких местах, в зависимости от того, как вы организуете свой код в любом случае. Надеюсь, поможет.

<!-- IN -->
<Storyboard x:Name="FadeButtonIn">
  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                 Storyboard.TargetName="YourButtonObject">
    <EasingDoubleKeyFrame KeyTime="0:0:0.6"
                          Value="0" />
    <EasingDoubleKeyFrame KeyTime="0:0:1.6"
                          Value="1" />
  </DoubleAnimationUsingKeyFrames>
  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="YourButtonObject"
                                 Storyboard.TargetProperty="(UIElement.Visibility)">
    <DiscreteObjectKeyFrame KeyTime="0">
      <DiscreteObjectKeyFrame.Value>
        <Visibility>Visible</Visibility>
      </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
  </ObjectAnimationUsingKeyFrames>
</Storyboard>
<!-- OUT -->
<Storyboard x:Name="FadeButtonOut">
  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                 Storyboard.TargetName="YourButtonObject">
    <EasingDoubleKeyFrame KeyTime="0:0:0.6"
                          Value="1" />
    <EasingDoubleKeyFrame KeyTime="0:0:1.6"
                          Value="0" />
  </DoubleAnimationUsingKeyFrames>
  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="YourButtonObject"
                                 Storyboard.TargetProperty="(UIElement.Visibility)">
    <DiscreteObjectKeyFrame KeyTime="0">
      <DiscreteObjectKeyFrame.Value>
        <Visibility>Collapsed</Visibility>
      </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
  </ObjectAnimationUsingKeyFrames>
</Storyboard>

Answer 2

Если вы используете шаблон MVVM, вот вспомогательный класс, который я написал:

public class FadeAnimatedVisibility
{
    public static readonly DependencyProperty IsVisibleProperty = DependencyProperty.RegisterAttached(
        "IsVisible", typeof(bool), typeof(FadeAnimatedVisibility), new PropertyMetadata(true, IsVisiblePropertyChanged));

    private static void IsVisiblePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var uiElement = d as UIElement;
        if (uiElement == null) return;

        var visibility = e.NewValue as bool?;

        if (visibility == true)
        {
            Storyboard storyboard = new Storyboard();
            var fadeIn = new FadeInThemeAnimation();

            Storyboard.SetTarget(fadeIn, uiElement);

            storyboard.Children.Add(fadeIn);
            storyboard.Begin();
            uiElement.Visibility = Visibility.Visible;
        }
        else
        {
            Storyboard storyboard = new Storyboard();
            var fadeOut = new FadeOutThemeAnimation();

            Storyboard.SetTarget(fadeOut, uiElement);

            storyboard.Children.Add(fadeOut);
            storyboard.Begin();
            uiElement.Visibility = Visibility.Collapsed;
        }
    }

    public static void SetIsVisible(DependencyObject element, bool value)
    {
        element.SetValue(IsVisibleProperty, value);
    }

    public static bool GetIsVisible(DependencyObject element)
    {
        return (bool)element.GetValue(IsVisibleProperty);
    }
}

И XAML используют:

<StackPanel helpers:FadeAnimatedVisibility.IsVisible="{Binding YourProperty}"/>

Answer 3

Вы можете изменить раскадровку, добавив анимацию для свойства непрозрачности кнопки, после чего установите видимость свернутой. Вы можете использовать смесь, чтобы сделать это легко.