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?

 

Answer 1

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

 

Answer 2

thanks for your help, this really looks good...

 

 

Answer 3

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......

Answer 4

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)

Answer 5

Ldairy thankx alot bro ....... i really appreciate ur help :) :)