Question

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

我的代码如下所示：

<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>

问题是动画与路径的方向无关，我需要发光从StartPoint到EndPoint的方向。这可以实现吗？

Answer 1

您可以使用linearGandientBrush的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，它只代表一条带有适当动画的直线。之后，您需要通过路径结构迭代的codeBehind将该控件（使用正确的rotateTransform）添加到画布，并设置所需的故事板时间轴。那将是一个完整的解决方案。

在路径方向的道路冲程动画

1 个答案: