Question

我看到了另一个我非常喜欢的Silverlight效果，我想知道如何重现它。该应用程序的主屏幕有5或6个大按钮，轻轻地上下移动几个像素，好像他们正在盘旋。

有人可以为我提供一些XAML来实现这种效果吗？

Answer 1

使用空白用户控件和一个名为button的按钮：

<UserControl.Resources>
    <Storyboard x:Name="sbHover" RepeatBehavior="Forever" AutoReverse="False">
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="-4"/>
            <EasingDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>
<Button x:Name="button" Height="79" Margin="177,128,236,0" VerticalAlignment="Top" Content="Button" RenderTransformOrigin="0.5,0.5">
    <Button.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Button.RenderTransform>
</Button>

代码背后：

public partial class MainPage : UserControl
{
    public MainPage()
    {
        // Required to initialize variables
        InitializeComponent();

        this.Loaded +=new System.Windows.RoutedEventHandler(MainPage_Loaded);
    }

    private void MainPage_Loaded(object sender, System.Windows.RoutedEventArgs e)
    {
        sbHover.Begin();
    }
}

您可以调整缓动时间和值以更改速度和距离，同样可以添加缓动以获得更好的反弹效果。

如何在Silverlight中创建“悬停”按钮？

1 个答案: