Wpf animation - like shaking icons on iOS

2019-04-17 01:10发布

I would like to have an image animation in wpf where the image shakes lightly in order to delete it, as it happens for apps in iOS. Do you know something that would help ? Something that already built? Thanks a lot.

1条回答
狗以群分
2楼-- · 2019-04-17 01:25

Here's a complete sample of shaking the text of button. You should be able to adapt this to shake an image, and improve it using easing functions.

        <Grid.Resources>
            <ControlTemplate x:Key="ShakingButtonTemplate" TargetType="Button">
                <Border Margin="5" BorderBrush="Aquamarine" BorderThickness="5" CornerRadius="5">
                    <ContentPresenter HorizontalAlignment="Center" Content="{TemplateBinding Content}">
                        <ContentPresenter.RenderTransform>
                            <TransformGroup>
                                <TranslateTransform x:Name="Position"/>
                            </TransformGroup>
                        </ContentPresenter.RenderTransform>
                    </ContentPresenter>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard x:Name="ShakeIt">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames
                                        Storyboard.TargetName="Position" 
                                        Storyboard.TargetProperty="X" 
                                        RepeatBehavior="5x"
                                        >
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.20" Value="-2"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
<!--
                                    <DoubleAnimation 
                                        Storyboard.TargetName="Position" 
                                        Storyboard.TargetProperty="X" 
                                        From="-2" To="2" 
                                        Duration="0:0:0:0.1" 
                                        AutoReverse="True" 
                                        RepeatBehavior="10x">
                                    </DoubleAnimation>
-->
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>

            <Style x:Key="ShakingButton" TargetType="Button">
                <Setter Property="Template" Value="{StaticResource ShakingButtonTemplate}"/>
            </Style>
        </Grid.Resources>

        <StackPanel>
            <Button Style="{StaticResource ShakingButton}" Content="This is a button" />
        </StackPanel>
查看更多
登录 后发表回答