WPF 贝塞尔曲线实现波纹动画效果

最新推荐文章于 2023-05-24 11:25:35 发布

ReflexMechanism

最新推荐文章于 2023-05-24 11:25:35 发布

阅读量1.1k

点赞数

文章标签： c#

本文链接：https://blog.csdn.net/ReflexMechanism/article/details/123727092

版权

本文介绍了一种使用WPF技术创建手机充电界面动画的方法。通过定义路径动画和波形动画，实现了动态的水波效果，并结合UI元素展示了充电进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <UserControl.Resources>
        <Storyboard x:Key="WaterStoryboard">
            <PointAnimation Storyboard.TargetName="bs_Water" Storyboard.TargetProperty="Point1" From="15,-5" To="15,5" Duration="00:00:2" AutoReverse="True" RepeatBehavior="Forever"></PointAnimation>
            <PointAnimation Storyboard.TargetName="bs_Water" Storyboard.TargetProperty="Point2" From="35,5" To="35,-5" Duration="00:00:1.8" AutoReverse="True" RepeatBehavior="Forever"></PointAnimation>
        </Storyboard>
    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard Storyboard="{StaticResource WaterStoryboard}"></BeginStoryboard>
        </EventTrigger>
    </UserControl.Triggers>

                <!--进度-->
                <StackPanel Panel.ZIndex="1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" TextBlock.Foreground="White" TextBlock.FontSize="18" Margin="129,210,153,48">
                    <TextBlock Name="text_Value" Text="100"></TextBlock>
                    <TextBlock Text="%"></TextBlock>
                </StackPanel>
                <StackPanel VerticalAlignment="Bottom"   Width="165" Margin="10 0 45 10">
                    <!--水波-->
                    <Path Fill="#42a5f5" Margin="0,0,0,-1" Height="13" Stretch="Fill">
                        <Path.Data>
                            <PathGeometry>
                                <PathFigure StartPoint="0,0">
                                    <BezierSegment x:Name="bs_Water" Point1="15,-5" Point2="35,5"  Point3="50,0"></BezierSegment>
                                    <PolyLineSegment Points="50,5 0,5"></PolyLineSegment>
                                </PathFigure>
                            </PathGeometry>
                        </Path.Data>
                    </Path>
                    <!--矩形-->
                    <Rectangle Name="rec_Water"  Fill="#42a5f5" Height="59"/>
                </StackPanel>

WPF实现三星手机充电界面 - 普通的地球人 - 博客园