0

I am implementing an analog clock for windows 8. But am struggling a bit to get the minute hand animation perfectly.

When the second hand hits 12, the minute hand should "slide" 6 degrees to the next number rather than just appearing at the next number suddenly. This is the code am using

Animation in 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>

And these are the converters am using to determine the from and to angle of the animation

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;
                }

With this code the minute hand slides to the next number and then bounces back to previous number and then bounces again to next number. I just want it to slide to next number.

If you have any idea or suggestions, please please let me know.

Thanks

1 Answer 1

0

I'm not sure I understand why your animation has RepeatBehavior set to Forever. That would just keep animating between the two values. In most cases you shouldn't need the From value either unless your last animation stopped at 360 degrees and you want to animate from 0 to 6 again. The default FillBehavior of a timeline is to hold the To value when the animation is past its duration. In some cases it is good to handle the Completed event of a Storyboard and explicitly set the property that the animation targets to its To value anyway to avoid these jitters. You could do that and set up the next animation at that point too.

BTW, I'd also check BounceEase instead of SineEase for the easing function.

4
  • Without the from value the hand starts from 360 degrees always. Look at my MinuteHandFromAngle and MinuteHandToAngle, they are same for every second except when the no. of seconds = 59 when the to angle is increased by 6 degrees so the hand should slide 6 degrees only when the number of seconds = 59. And so even if the repeat behaviour is set to forever the hand will slide only at 59 seconds.
    – Bitsian
    Jan 1, 2013 at 7:11
  • I didnt understand how and where to use the FillBehaviour? Could you give a small code snippet.
    – Bitsian
    Jan 1, 2013 at 7:13
  • If its not too much effort for you can i please ask you to modify my code and give me something that you think might work. All i want is the minute hand to slide(smooth animation) to the next number when a minute is completed.
    – Bitsian
    Jan 1, 2013 at 7:15
  • A kind of a bounce or spring effect is being implemented from my code. I think Sine ease is doing that, and bounce ease also does the same i suppose..is there any simple sliding or smooth translation animation?
    – Bitsian
    Jan 1, 2013 at 9:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.