アナログ時計を作ろう! (プログラミングの知識がある方向け)

ダウンロード画像

• 【clock 01】 Stylish (Zip、142 KB) (もはや利用できます)
• 【clock 02】 Cat (Zip、63.3 KB) (もはや利用できます)
• 【clock 03】 Claudia (Zip、192 KB) (もはや利用できます)

続けて、秒針を回転できるようにします。まずは回転の中心点を設定します。この座標は Imageコントロールをオフセットとして指定します。例えば、画像の左上の場合は 0，0 となります。
秒針の中心点は、X 座標は中央なので、画像の横幅 22 ピクセルの半分の 11 です。 Y 座標は 40 ピクセル飛び出すことにしたので、画像の高さ 240 から 40 を引いて 200 となります。

さて、これまで、プロパティしか設定していませんでしたが、いよいよ、XAML に直接記述をします。
XAML のコードの中で、秒針は以下のように記述されています。

先ほど設定した、[Width] や [Height]、[Margin] などが設定されているのが分かります。

これを以下のように変更します。

[RotateTransform] というのは、回転の設定をするものです。[CenerX]、[CenterY] で中心座標を指定します。
試しに実験してみましょう。プログラム中で、[RotateTransform] と書いたところをクリックしてカーソルを置くと [RotateTransform] のプロパティ ウィンドウが表示されます。

ここで [Angle] と書いてあるところに、0 ~ 360 の適当な数字を入れてみましょう。針が回転するのが確認できましたか?

いよいよ秒針を回転させます。
以下のように太字の部分のコードを追加してください。

<phone:PhoneApplicationPage
    x:Class="Analog_Clock.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="SecondMove" RepeatBehavior="Forever">
            <DoubleAnimation
                Duration="0:1:0" From="0" To="360"
                Storyboard.TargetName="秒針"
                Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
                d:IsOptimized="True" />
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

[StoryBoard] は、アニメーションの設定が行えます。[x:Name] は、このアニメーションの名前です。後でこのアニメーションを実行させるコードを記述するときに使います。ここでは、[SecondMove] という名前を付けました。

[RepeatBehavior] は、アニメーションを何回繰り返すかの設定です。[Forever] にするとずっと動き続けることになります。

[DoubleAnimation] の中で実際にどういうアニメーションをさせるのかを設定します。
[Duration] は、1 回のアニメーションの時間設定です。日数.時:分:秒で指定します (日数は省略できます)。ここでは 1 分間で 1 周するようにすればいいので、0:1:0 となります。
長針の場合は 1:0:0、短針は 12:0:0 となりますね。
[From] と [To] は、[Duration] で指定した間にどのくらい数値を変化させるかを設定します。ここでは 1 回転させればいいので、0 から 360 を指定すればよいでしょう。

[Storyboard.TargetName] は、どのコントロールをアニメーションさせるかを指定します。秒針を回転させたいので [秒針] と指定します。
[Storyboard.TargetProperty] は、どのプロパティを変更すればよいかを指定します。先ほど秒針を回転させたときに設定したのは [Angle] ですので、以下のように指定します。

(Image.RenderTransform).(RotateTransform.Angle)

XAML の階層をみると Image コントロール (秒針) の下の [Image.RenderTransform] の下にある [RotateTransform] のプロパティが [Angle] ということが分かります。

これで、アニメーションの設定は整いました。最後にアニメーション開始のプログラムを記述します。

ドキュメント アウトラインで最上位にある [PhoneApplicationPage] をクリックし、プロパティ ウィンドウを出します。上部にあるタブを [イベント] に切り替え [Loaded] をダブルクリックします。

ここで初めて C# の画面が開きました。以下のように太字の部分を 1 行追加します。

ページが開いたときに、先ほど名前を付けた StoryBoard の実行をするという意味です。

それでは、実行してみましょう。秒針が回転すれば成功です。

続けて長針と短針を作りましょう。

作り方は、ほとんど秒針と変りません。
変更する部分は [DoubleAnimation] の [Duration] で長針の場合は、[1:0:0] (1 時間で 1 周)、短針の場合は [12:0:0] (12 時間で 1 周) と指定するところだけです。

ここで、設定に必要な座標データをまとめておきます。

秒針

Width: 22
Height: 240
Margin: 229,40,0,0
CenterX: 11
CenterY: 200

長針

Width: 100
Height: 234
Margin: 190,16,0,0
CenterX: 50
CenterY: 224

短針

Width: 68
Height: 180
Margin: 206,70,0,0
CenterX: 34
CenterY: 170

XAML ソースは、以下のようになります。太字は追加した部分です。

<phone:PhoneApplicationPage
    x:Class="Analog_Clock.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">

    <phone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="SecondMove" RepeatBehavior="Forever">
            <DoubleAnimation
                Duration="0:1:0" From="0" To="360"
                Storyboard.TargetName="秒針"
                Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
                d:IsOptimized="True" />
        </Storyboard>
        <Storyboard x:Name="MinutesMove" RepeatBehavior="Forever">
            <DoubleAnimation
                Duration="1:0:0" From="0" To="360"
                Storyboard.TargetName="長針"
                Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
                d:IsOptimized="True" />
        </Storyboard>
        <Storyboard x:Name="HourMove" RepeatBehavior="Forever">
            <DoubleAnimation
                Duration="12:0:0" From="0" To="360"
                Storyboard.TargetName="短針"
                Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
                d:IsOptimized="True" />
        </Storyboard>

    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel は、アプリケーション名とページ タイトルを格納します-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Windows Phone Sample" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Analog Clock" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - 追加コンテンツをここに入力します-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
            <Image Height="480" HorizontalAlignment="Left" Margin="0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="480" Source="/Analog%20Clock;component/Images/clock01.png" />
            <Image Height="240" HorizontalAlignment="Left" Margin="229,40,0,0" Name="秒針" Stretch="Fill" VerticalAlignment="Top" Width="22" Source="/Analog%20Clock;component/Images/clock01_sec.png" >
                <Image.RenderTransform>
                    <RotateTransform CenterX="11" CenterY="200" Angle="0"></RotateTransform>
                </Image.RenderTransform>
            </Image>
            <Image Height="234" HorizontalAlignment="Left" Margin="190,16,0,0" Name="長針" Stretch="Fill" VerticalAlignment="Top" Width="100" Source="/Analog%20Clock;component/Images/clock01_min.png">
                <Image.RenderTransform>
                    <RotateTransform CenterX="50" CenterY="224" Angle="0"></RotateTransform>
                </Image.RenderTransform>
            </Image>
            <Image Height="180" HorizontalAlignment="Left" Margin="206,70,0,0" Name="短針" Stretch="Fill" VerticalAlignment="Top" Width="68" Source="/Analog%20Clock;component/Images/clock01_hour.png">
                <Image.RenderTransform>
                    <RotateTransform CenterX="34" CenterY="170" Angle="0"></RotateTransform>
                </Image.RenderTransform>
            </Image>
        </Grid>
    </Grid>

    <!--ApplicationBar の使用法を示すサンプル コード-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

プログラムを実行すると以下のようになります。

このままでは、常に 0 時 0 分から時計が動いてしまいます。
起動時に現在の時刻を指定するようにしましょう。

[PageLoaded] のイベントに以下のように太字の部分のプログラムを追加します。

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
    SecondMove.Begin();
    MinutesMove.Begin();
    HourMove.Begin();

    int second = DateTime.Now.Second;
    SecondMove.Seek(new TimeSpan(0, 0, second));
    int minutes = DateTime.Now.Minute;
    MinutesMove.Seek(new TimeSpan(0, minutes, second));
    int hour = DateTime.Now.Hour;
    HourMove.Seek(new TimeSpan(hour, minutes, second));

}

必要な処理は、開始時にアニメーションを一定時間進めるだけです。DateTime.Now は現在の時刻を返します。DateTime.Now.Second、DateTime.Now.Minutes、DateTime.Now.Hour は、それぞれ、現時刻の秒、分、時を返します。

TimeSpan は、引数に時、分、秒を与えるとその時間を返します。StoryBoard.Seek でその時間分進行させれば、現在の時刻までそれぞれのアニメーションが進行するということです。

これでプログラムは完成しました。