0

Windows 8 用のアナログ時計を実装していますが、分針のアニメーションを完全に取得するのに少し苦労しています。

秒針が 12 に達したとき、分針は次の数字に突然現れるのではなく、次の数字に 6 度「スライド」する必要があります。これは使用しているコードです

XAML のアニメーション

<converter:ThemeTimeConverter
    x:Key="minuteHandTransform"
    Component="MinuteHandFromAngle" />

<converter:ThemeTimeConverter
    x:Key="minuteHandToTransform"
    Component="MinuteHandToAngle" />


<!-- Minute Hand -->
                <Image
                    Source="{Binding Time, Converter={StaticResource MinHandBackground}}"
                    HorizontalAlignment="Left"                        
                    VerticalAlignment="Top"                        
                    Canvas.Left="118"
                    Canvas.Top="118">
                    <Image.RenderTransform>
                        <TransformGroup>
                            <TranslateTransform
                                X="-11"
                                Y="-90" />

                            <RotateTransform
                                x:Name="minHandTransform" />
                        </TransformGroup>
                    </Image.RenderTransform>
                    <Image.Triggers>
                        <EventTrigger
                            RoutedEvent="Image.Loaded">
                            <BeginStoryboard>
                                <Storyboard
                                    x:Name="myStoryboard2">
                                    <DoubleAnimation
                                        x:Name="minuteAnimation"
                                        Storyboard.TargetName="minHandTransform"
                                        Storyboard.TargetProperty="Angle"
                                        Duration="0:0:1"
                                        From="{Binding Time, Converter={StaticResource minuteHandTransform}}"
                                        To="{Binding Time, Converter={StaticResource minuteHandToTransform}}"
                                        RepeatBehavior="forever">
                                        <DoubleAnimation.EasingFunction>
                                            <SineEase
                                                EasingMode="EaseOut" />
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Image.Triggers>
                </Image>

そして、これらはコンバーターがアニメーションの始点と終点の角度を決定するために使用しています

case ThemeComponents.MinuteHandFromAngle:
                {
                    double minangle = (((float)dt.Minute) / 60) * 360;
                    _RotateTransform.Angle = minangle;

                    return _RotateTransform.Angle;
                }
            case ThemeComponents.MinuteHandToAngle:
                {
                    double minangle = (((float)dt.Minute) / 60) * 360;

                    if (((float)dt.Second) == 59)
                    {
                        _RotateTransform.Angle = minangle + 6;
                    }
                    else
                    {
                        _RotateTransform.Angle = minangle;
                    }

                    return _RotateTransform.Angle;
                }

このコードを使用すると、分針が次の数字にスライドしてから前の数字に戻り、次の数字に再び跳ね返ります。次の番号にスライドさせたいだけです。

アイデアや提案があれば、お知らせください。

ありがとう

4

1 に答える 1

0

アニメーションで RepeatBehavior が Forever に設定されている理由がわかりません。これは、2 つの値の間でアニメーションを続けるだけです。ほとんどの場合、最後のアニメーションが 360 度で停止し、再び 0 から 6 までアニメーション化する場合を除き、From 値も必要ありません。タイムラインのデフォルトのFillBehaviorは、アニメーションがその期間を過ぎたときに To 値を保持することです。場合によっては、Storyboard のCompletedイベントを処理し、アニメーションの対象となるプロパティを明示的に To 値に設定して、これらのジッターを回避することをお勧めします。それを実行して、その時点で次のアニメーションをセットアップすることもできます。

ところで、イージング関数については、SineEase の代わりに BounceEase もチェックします。

于 2012-12-31T16:06:18.130 に答える