Question

所有默认的Windows 8应用程序在显示和隐藏它们时都会对其应用栏图标使用相同的淡入淡出动画（基于上下文更改）。 This page讨论设置应用栏图标的可见性，但没有提及动画它们。

我希望我的应用栏图标使用相同的动画。当图标变为隐藏时，它应淡入透明然后折叠，反之则在变为可见时发生。实现这个动画的最佳方法是什么？

Answer 1

你正在寻找与此相似的东西，你只需根据鼠标按下事件或某些值来消除你的故事板。只是一个警告，下面提供的这些值是一个粗略的例子，你需要调整它们以获得你想要的。根据您当前如何组织代码，您可以将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

您可以修改故事板以为按钮的不透明度属性添加动画，然后将可见性设置为折叠。您可以使用Blend轻松实现。

动画WinRT应用程序中应用栏图标的淡入淡出可见性

3 个答案: