C#でアナログ時計を作ってみた
だいたい９時６分３３秒くらい？かな
秒針がとても滑らかに動きます
そんな超単純なアニメーションでxamlの実力を知りました
早速、xamlコードは以下のようになりました。
MainWindow.xaml
<Windowx:Class="MainWindow.AnalogClock"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"mc:Ignorable="d"Title="アプリケーション課題３：Analog Clock"Height="500"Width="500"Loaded="Window_Loaded"><Window.Resources><Storyboardx:Key="SecondHand"x:Name="SecondHand"RepeatBehavior="Forever"><DoubleAnimationDuration="0:1:0"From="0"To="360"Storyboard.TargetName="SecondLine"Storyboard.TargetProperty="(Line.RenderTransform).(RotateTransform.Angle)"/></Storyboard><Storyboardx:Key="MinuteHand"x:Name="MinuteHand"RepeatBehavior="Forever"><DoubleAnimationDuration="1:0:0"From="0"To="360"Storyboard.TargetName="MinuteLine"Storyboard.TargetProperty="(Line.RenderTransform).(RotateTransform.Angle)"/></Storyboard><Storyboardx:Key="HourHand"x:Name="HourHand"RepeatBehavior="Forever"><DoubleAnimationDuration="12:0:0"From="0"To="360"Storyboard.TargetName="HourLine"Storyboard.TargetProperty="(Line.RenderTransform).(RotateTransform.Angle)"/></Storyboard></Window.Resources><CanvasWidth="400"Height="400"><Linex:Name="HourLine"Stroke="Black"Fill="Black"X1="200"Y1="200"X2="200"Y2="80"StrokeThickness="3"><Line.RenderTransform><RotateTransformx:Name="AngleHour"Angle="0"CenterX="200"CenterY="200"/></Line.RenderTransform></Line><Linex:Name="MinuteLine"Stroke="Black"Fill="Black"X1="200"Y1="200"X2="200"Y2="40"StrokeThickness="2"><Line.RenderTransform><RotateTransformx:Name="AngleMinute"Angle="0"CenterX="200"CenterY="200"/></Line.RenderTransform></Line><Linex:Name="SecondLine"Stroke="Black"Fill="LightGray"X1="200"Y1="240"X2="200"Y2="30"><Line.RenderTransform><RotateTransformx:Name="AngleSecond"Angle="0"CenterX="200"CenterY="200"/></Line.RenderTransform></Line><EllipseFill="Black"Width="10"Height="10"HorizontalAlignment="Center"VerticalAlignment="Center"Canvas.Top="195"Canvas.Left="195"/></Canvas></Window>さらにC＃サイドのコードは以下の通り
MainWindows.xaml.cs
// ********************************************************// *// * 処理内容：滑らかなアナログ時計の動作を実現// *// * MainWindow.xaml.cs ：アナログ時計表示// *// * 2020.07.03 ProOJI// *// ********************************************************usingSystem;usingSystem.Windows;usingSystem.Windows.Media.Animation;namespaceMainWindow{/// <summary>/// アナログ時計のクラス/// </summary>publicpartialclassAnalogClock:Window{/// <summary>/// 初期設定/// </summary>publicAnalogClock(){InitializeComponent();InitializeAngle();}/// <summary>/// アナログ時計のアニメーション/// </summary>/// <param name="sender"></param>/// <param name="e"></param>privatevoidWindow_Loaded(objectsender,RoutedEventArgse){// 時間の針StartAnimation("HourHand",this.AngleHour.Angle);// 分の針StartAnimation("MinuteHand",this.AngleMinute.Angle);// 秒の針StartAnimation("SecondHand",this.AngleSecond.Angle);}/// <summary>/// 針の角度の初期設定/// </summary>/// <returns>なし</returns>voidInitializeAngle(){DateTimedt=DateTime.Now;this.AngleSecond.Angle=dt.Second*360.0/60.0;this.AngleMinute.Angle=(dt.Minute+dt.Second/60.0)*360.0/60.0;this.AngleHour.Angle=(dt.Hour+dt.Minute/60.0)*360.0/12;}/// <summary>/// 時計の針のアニメーション表示/// </summary>/// <param name="name">各針の名称</param>/// <param name="angle">針の角度</param>/// <returns>なし</returns>privatevoidStartAnimation(stringname,doubleangle){varsb=this.Resources[name]asStoryboard;varda=sb.Children[0]asDoubleAnimation;da.From=angle;da.To=da.From+360.0;sb.Begin();}}}まとめ
XAMLのみで、かなりのアニメーションを作ることができるのはすごい
以上！(￣∀￣)