none
Animation like pacman opening his mouth

    Question

  • Hi,

     

    I have a rectangle area and want to show a different color with a specific animation.

     

    I want to show a pie that is growing and shows the new color on top of the old color.

    (looks like a pacman that is opening his mouth). But my area is a rectangle(window).

     

    I can not get it figured out what the best way is to accomplish this...

     

    I started with a Arcsegment, but can not get it right.

     

    Any ideas?

     

    Tuesday, October 30, 2007 10:23 AM

Answers

  • <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <Path Stroke="Blue" StrokeThickness="6" Fill="Blue">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="200 200" IsClosed="True">
                        <LineSegment x:Name="line" Point="300 125" />
                        <ArcSegment x:Name="arc" Point="300 275"
                                    Size="100 100" IsLargeArc="True" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Canvas.Loaded">
                <BeginStoryboard>
                    <Storyboard TargetProperty="Point" RepeatBehavior="Forever">
                        <PointAnimation Storyboard.TargetName="line"
                                        From="300 125" To="300 195"
                                        AutoReverse="True" />

                        <PointAnimation Storyboard.TargetName="arc"
                                        From="300 275" To="300 205"
                                        AutoReverse="True" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>
    </Canvas>

     

    Tuesday, October 30, 2007 11:55 AM

All replies

  • <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <Path Stroke="Blue" StrokeThickness="6" Fill="Blue">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="200 200" IsClosed="True">
                        <LineSegment x:Name="line" Point="300 125" />
                        <ArcSegment x:Name="arc" Point="300 275"
                                    Size="100 100" IsLargeArc="True" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Canvas.Loaded">
                <BeginStoryboard>
                    <Storyboard TargetProperty="Point" RepeatBehavior="Forever">
                        <PointAnimation Storyboard.TargetName="line"
                                        From="300 125" To="300 195"
                                        AutoReverse="True" />

                        <PointAnimation Storyboard.TargetName="arc"
                                        From="300 275" To="300 205"
                                        AutoReverse="True" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>
    </Canvas>

     

    Tuesday, October 30, 2007 11:55 AM
  • thanks for your help, this really looks good...

     

     

    Tuesday, October 30, 2007 3:55 PM
  • hey anyone out there kindly help me regarding this code ........ what i want is just how to make this animation in smaller size becoz every time i tried to do that it just completely changes its entire shape......
    Friday, December 02, 2011 10:06 PM
  • Here's a smaller version.

            <Path Stroke="Blue" StrokeThickness="6" Fill="Blue">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="200 200" IsClosed="True">
                            <LineSegment x:Name="line" Point="250 175" />
                            <ArcSegment x:Name="arc" Point="250 225"
                                    Size="37 37" IsLargeArc="True" />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="Canvas.Loaded">
                    <BeginStoryboard>
                        <Storyboard TargetProperty="Point" RepeatBehavior="Forever">
                            <PointAnimation Storyboard.TargetName="line"
                                        From="250 175" To="250 195"
                                        AutoReverse="True" />
     
                            <PointAnimation Storyboard.TargetName="arc"
                                        From="250 225" To="250 205"
                                        AutoReverse="True" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Canvas.Triggers>

     


    Need translation help? I translate from English to Japanese and vice versa. Please feel free to contact me for your translation needs. 日英・英日翻訳依頼を受け付けています。 お気軽にご相談下さい。(Ldiary.com)
    Friday, December 02, 2011 11:06 PM
  • Ldairy thankx alot bro ....... i really appreciate ur help :) :)
    Saturday, December 03, 2011 8:15 AM