C#中怎么利用 WPF实现一个时钟动画

发布时间：2021-07-07 15:16:49 阅读：190 作者：Leah 栏目：大数据
开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>
本篇文章给大家分享的是有关C#中怎么利用 WPF实现一个时钟动画，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
布局时钟的时针、分针、秒针，及添加秒针动画，秒针动画写的比较啰嗦，只写了30秒，其实可以在MainWindow.xaml.cs文件中用for循环添加EasingDoubleKeyFrame，直接添加到xaml中占代码也不美观，暂时先这样吧，下篇文章有空改了。
<Window x:Class="Clock.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"        xmlns:local="clr-namespace:Clock"        mc:Ignorable="d"        AllowsTransparency="True" WindowStyle="None" ResizeMode="NoResize"        Height="520" Width="520" WindowStartupLocation="CenterScreen" Background="{x:Null}">    <Window.Resources>        <Storyboard x:Key="sbseconds" RepeatBehavior="Forever">            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="second" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">                <EasingDoubleKeyFrame KeyTime="0" Value="-90">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:1" Value="-84">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:2" Value="-78">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:3" Value="-72">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:4" Value="-66">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:5" Value="-60">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:6" Value="-54">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:7" Value="-48">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:8" Value="-42">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:9" Value="-36">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:10" Value="-30">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:11" Value="-24">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:12" Value="-18">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:13" Value="-12">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:14" Value="-6">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:15" Value="0">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:16" Value="6">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:17" Value="12">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:18" Value="18">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:19" Value="24">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:20" Value="30">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:21" Value="36">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:22" Value="42">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:23" Value="48">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:24" Value="54">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:25" Value="60">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:26" Value="66">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:27" Value="72">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:28" Value="78">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:29" Value="84">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>                <EasingDoubleKeyFrame KeyTime="00:00:30" Value="90">                    <EasingDoubleKeyFrame.EasingFunction>                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>                    </EasingDoubleKeyFrame.EasingFunction>                </EasingDoubleKeyFrame>            </DoubleAnimationUsingKeyFrames>        </Storyboard>    </Window.Resources>    <Window.Triggers>        <EventTrigger RoutedEvent="FrameworkElement.Loaded">            <BeginStoryboard Storyboard="{StaticResource sbseconds}"/>        </EventTrigger>    </Window.Triggers>    <Grid>        <Border BorderThickness="10" BorderBrush="Black" CornerRadius="300" Width="520" Height="520">            <Grid Height="500" Width="500" HorizontalAlignment="Center" VerticalAlignment="Center">                <Border CornerRadius="350">                    <Border.Background>                        <ImageBrush ImageSource="Assets/clock.png"/>                    </Border.Background>                </Border>                <Border CornerRadius="350" Background="#778889BB"/>                <Border x:Name="hour" CornerRadius="0 15 15 0" Height="10" Width="130" BorderThickness="3" BorderBrush="#FF66B01C" Margin="0,245,120,245" HorizontalAlignment="Right" RenderTransformOrigin="0,0.5">                    <Border.RenderTransform>                        <TransformGroup>                            <ScaleTransform/>                            <SkewTransform/>                            <RotateTransform Angle="-90"/>                            <TranslateTransform/>                        </TransformGroup>                    </Border.RenderTransform>                </Border>                <Border x:Name="minute" CornerRadius="0 15 15 0" Height="5" Width="160" BorderThickness="3" BorderBrush="#FFD15209" Margin="250.5,247,0,248" HorizontalAlignment="Left" RenderTransformOrigin="0,0.5">                    <Border.RenderTransform>                        <TransformGroup>                            <ScaleTransform/>                            <SkewTransform/>                            <RotateTransform Angle="-90"/>                            <TranslateTransform/>                        </TransformGroup>                    </Border.RenderTransform>                </Border>                <Border x:Name="second" CornerRadius="0 15 15 0" Height="3" Width="220" Background="Red" Margin="0,248,30,248" HorizontalAlignment="Right" RenderTransformOrigin="0,0.5">                    <Border.RenderTransform>                        <TransformGroup>                            <ScaleTransform/>                            <SkewTransform/>                            <RotateTransform Angle="-90"/>                            <TranslateTransform/>                        </TransformGroup>                    </Border.RenderTransform>                </Border>                <Ellipse Fill="Black" Width="20" Height="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>            </Grid>        </Border>    </Grid></Window>
以上就是C#中怎么利用 WPF实现一个时钟动画，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
向AI问一下细节
C#中怎么利用 WPF实现一个时钟动画

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签
