1

我想在路径的方向上创建一个微光动画

我的代码如下所示：

<Path StrokeThickness="2">
    <Path.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard Duration="0:0:3" RepeatBehavior="Forever">
                    <DoubleAnimation 
                        Storyboard.TargetName="firstGradientStop" 
                        Storyboard.TargetProperty="Offset" 
                        From="-0.2" To="1.0" Duration="0:0:2" />
                    <DoubleAnimation 
                        Storyboard.TargetName="middleGradientStop" 
                        Storyboard.TargetProperty="Offset" 
                        From="-0.1" To="1.1" Duration="0:0:2" />
                    <DoubleAnimation 
                        Storyboard.TargetName="lastGradientStop" 
                        Storyboard.TargetProperty="Offset" 
                        From="0" To="1.2" Duration="0:0:2" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Path.Triggers>
    <Path.Stroke>
        <LinearGradientBrush>
            <GradientStop Color="#80000000" x:Name="firstGradientStop" Offset="0.4" />
            <GradientStop Color="White" x:Name="middleGradientStop" Offset="0.5" />
            <GradientStop Color="#80000000" x:Name="lastGradientStop" Offset="0.6" />
        </LinearGradientBrush>
     </Path.Stroke>
     <Path.Data>
        <!-- dynamic data here, sample path below -->
        <GeometryGroup>
            <LineGeometry StartPoint="0,0" EndPoint="100,100" />
            <LineGeometry StartPoint="100,100" EndPoint="200,100" />
        </GeometryGroup>
    </Path.Data>
</Path>

问题是动画独立于路径的方向，我需要发光从起点到终点的方向。这是可以实现的吗？

4

1 回答 1

2

您可以使用linearGradientBrush的StartPoint和EndPoint，类似的东西（使用值，因此您可以随时旋转渐变角度）：

<PointAnimation 
                    Storyboard.TargetName="Brush" 
                    Storyboard.TargetProperty="StartPoint" 
                    From="0,0" To="0.5,0" Duration="0:0:1.5" />
                        <PointAnimation 
                    Storyboard.TargetName="Brush" 
                    Storyboard.TargetProperty="EndPoint" 
                    From="1,1" To="0.5,1" Duration="0:0:1.5" />

但这不是复杂动态路径的解决方案。（这就是描边的限制，因为它只是背景，你不能用它自相交的路径闪烁）如果你需要更多，然后创建一个简单的 UserControl，它只代表一条带有适当动画的直线。之后，您需要将该控件（使用适当的 rotateTransform）从 codeBehind 通过路径结构迭代并设置所需的故事板时间线添加到画布。那将是一个完整的解决方案。

于 2015-02-27T11:54:33.857 回答