WPF--的BeginStoryboard用法

最新推荐文章于 2026-04-06 02:49:36 发布

转载最新推荐文章于 2026-04-06 02:49:36 发布 · 8.5k 阅读

标签

#WPF BeginStoryboard

WPF 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用 WPF 开发的动画示例，通过 BeginStoryboard 和 DoubleAnimation 控制线条动画，实现类似蚂蚁沿路径移动的效果。示例中详细展示了如何在窗口加载时触发动画及针对特定元素设置动画。

BeginStoryboard：要在EventTrigger中触发调用，RoutedEvent是响应的事件

例子：

<Window x:Class="Wpf_2008.Window2"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window2" Height="300" Width="300" Name="win">

    <Window.Triggers>

        <EventTrigger RoutedEvent="Window.Loaded" SourceName="win">

            <EventTrigger.Actions>

                <BeginStoryboard>

                    <Storyboard>

                        <DoubleAnimation From="1" To="100" RepeatBehavior="Forever" Duration="0:0:5" 

Storyboard.TargetName="Line1" Storyboard.TargetProperty="StrokeDashOffset"/>

                        <DoubleAnimation From="1" To="100" RepeatBehavior="Forever" Duration="0:0:5" 

Storyboard.TargetName="Line2" Storyboard.TargetProperty="StrokeDashOffset"/>

                        <DoubleAnimation From="1" To="100" RepeatBehavior="Forever" Duration="0:0:5" 

Storyboard.TargetName="Line3" Storyboard.TargetProperty="StrokeDashOffset"/>

                        <DoubleAnimation From="100" To="1" RepeatBehavior="Forever" Duration="0:0:5" 

Storyboard.TargetName="Line4" Storyboard.TargetProperty="StrokeDashOffset"/>

                    </Storyboard>

                </BeginStoryboard>

            </EventTrigger.Actions>

        </EventTrigger>

    </Window.Triggers>

    <Canvas Background="AliceBlue" x:Name="c" Margin="10">

        <Line Name="Line1" X1="0" Y1="0" X2="0" Y2="100" Stroke="Black" StrokeDashArray="2,2" StrokeThickness="4"/>

        <Line Name="Line2" X1="0" Y1="100" X2="100" Y2="100" Stroke="Black" StrokeDashArray="2,2" StrokeThickness="4"/>

        <Line Name="Line3" X1="100" Y1="100" X2="100" Y2="0" Stroke="Black" StrokeDashArray="2,2" StrokeThickness="4"/>

        <Line Name="Line4" X1="0" Y1="0" X2="100" Y2="0" Stroke="Black" StrokeDashArray="2,2" StrokeThickness="4"/>

        <Line X1="0" Y1="250" X2="100" Y2="0" Stroke="Black" StrokeDashArray="2,2" StrokeThickness="4">

            <Line.Triggers>

                <EventTrigger RoutedEvent="Line.Loaded" >

                    <BeginStoryboard>

                        <Storyboard>

                            <DoubleAnimation From="1" To="100" RepeatBehavior="Forever" Duration="0:0:5"

 Storyboard.TargetProperty="StrokeDashOffset"/>                           

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Line.Triggers>

        </Line>

    </Canvas>

</Window>

效果如下：类似一个蚂蚁线动画效果