WPF 抖动动画

.NET WPF 抖动动画

1 Demo

2 Code

<!-- 水平抖动 -->
<Button Content="Hello World">
    <Button.RenderTransform>
        <TranslateTransform x:Name="translateTransform" />
    </Button.RenderTransform>
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
            <BeginStoryboard>
                <BeginStoryboard.Storyboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="translateTransform"
                            Storyboard.TargetProperty="X"
                            To="2"
                            Duration="0:0:0.075" />
                        <DoubleAnimation
                            BeginTime="0:0:0.075"
                            Storyboard.TargetName="translateTransform"
                            Storyboard.TargetProperty="X"
                            To="-2"
                            Duration="0:0:0.15" />
                        <DoubleAnimation
                            BeginTime="0:0:0.225"
                            Storyboard.TargetName="translateTransform"
                            Storyboard.TargetProperty="X"
                            To="0"
                            Duration="0:0:0.075" />
                    </Storyboard>
                </BeginStoryboard.Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>
<!-- 竖直抖动 -->
<Button Content="Hello World">
    <Button.RenderTransform>
        <TranslateTransform x:Name="translateTransform1" />
    </Button.RenderTransform>
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
            <BeginStoryboard>
                <BeginStoryboard.Storyboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="translateTransform1"
                            Storyboard.TargetProperty="Y"
                            To="2"
                            Duration="0:0:0.075" />
                        <DoubleAnimation
                            BeginTime="0:0:0.075"
                            Storyboard.TargetName="translateTransform1"
                            Storyboard.TargetProperty="Y"
                            To="-2"
                            Duration="0:0:0.15" />
                        <DoubleAnimation
                            BeginTime="0:0:0.225"
                            Storyboard.TargetName="translateTransform1"
                            Storyboard.TargetProperty="Y"
                            To="0"
                            Duration="0:0:0.075" />
                    </Storyboard>
                </BeginStoryboard.Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>
<!-- 旋转抖动 -->
<Button Content="Hello World">
    <Button.RenderTransform>
        <RotateTransform x:Name="rotateTransform" />
    </Button.RenderTransform>
    <Button.RenderTransformOrigin>
        <Point X="0.5" Y="0.5" />
    </Button.RenderTransformOrigin>
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
            <BeginStoryboard>
                <BeginStoryboard.Storyboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="rotateTransform"
                            Storyboard.TargetProperty="Angle"
                            To="5"
                            Duration="0:0:0.075" />
                        <DoubleAnimation
                            BeginTime="0:0:0.075"
                            Storyboard.TargetName="rotateTransform"
                            Storyboard.TargetProperty="Angle"
                            To="-5"
                            Duration="0:0:0.15" />
                        <DoubleAnimation
                            BeginTime="0:0:0.225"
                            Storyboard.TargetName="rotateTransform"
                            Storyboard.TargetProperty="Angle"
                            To="0"
                            Duration="0:0:0.075" />
                    </Storyboard>
                </BeginStoryboard.Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>