wpf 简易弹簧动画
直接上代码
重点
- <Border.LayoutTransform > 边界变化
<Window.Resources>
<Storyboard x:Key="rtLine">
<DoubleAnimation Duration="0:0:2" From="5" To="80" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetName="rt1" Storyboard.TargetProperty="Angle"/>
<DoubleAnimation Duration="0:0:2" From="-5" To="-80" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetName="rt2" Storyboard.TargetProperty="Angle"/>
<DoubleAnimation Duration="0:0:2" From="5" To="80" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetName="rt3" Storyboard.TargetProperty="Angle"/>
<DoubleAnimation Duration="0:0:2" From="-5" To="-80" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetName="rt4" Storyboard.TargetProperty="Angle"/>
<DoubleAnimation Duration="0:0:2" From="5" To="80" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetName="rt5" Storyboard.TargetProperty="Angle"/>
<DoubleAnimation Duration="0:0:2" From="-5" To="-80" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetName="rt6" Storyboard.TargetProperty="Angle"/>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded" >
<BeginStoryboard Storyboard="{StaticResource rtLine}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<StackPanel VerticalAlignment="Bottom" Orientation="Vertical">
<Grid >
<Border Width="60" Height="6" Background="Orange" CornerRadius="3">
<Border.LayoutTransform >
<RotateTransform Angle="10" CenterX="30" CenterY="3" x:Name="rt1"/>
</Border.LayoutTransform>
</Border>
<Border Width="60" Height="6" Background="Orange" CornerRadius="3">
<Border.LayoutTransform >
<RotateTransform Angle="-10" CenterX="30" CenterY="3" x:Name="rt2"/>
</Border.LayoutTransform>
</Border>
</Grid>
<Grid Margin="-1">
<Border Width="60" Height="6" Background="Green" CornerRadius="3">
<Border.LayoutTransform >
<RotateTransform Angle="10" CenterX="30" CenterY="3" x:Name="rt3"/>
</Border.LayoutTransform>
</Border>
<Border Width="60" Height="6" Background="Green" CornerRadius="3">
<Border.LayoutTransform >
<RotateTransform Angle="-10" CenterX="30" CenterY="3" x:Name="rt4"/>
</Border.LayoutTransform>
</Border>
</Grid>
<Grid Margin="-1">
<Border Width="60" Height="6" Background="Red" CornerRadius="3">
<Border.LayoutTransform >
<RotateTransform Angle="10" CenterX="30" CenterY="3" x:Name="rt5"/>
</Border.LayoutTransform>
</Border>
<Border Width="60" Height="6" Background="Red" CornerRadius="3">
<Border.LayoutTransform >
<RotateTransform Angle="-10" CenterX="30" CenterY="3" x:Name="rt6"/>
</Border.LayoutTransform>
</Border>
</Grid>
</StackPanel>
</Grid>