Ball Menu Design V2

Show and Tell
1

Hey all,

I recently posted a forum post about my ball menu design. Upon talking to a few people I know, I decided to make a small update to the design to. It was suggested to me that having it in the center was a bit “intrusive” so I fixed it. A gif of the new version in action can be found here

The new code is

<App Theme="Basic" Background="#363F45">
<Panel>
    <Panel>
        <Image ux:Name="menuButton" File="Icons/plus.png" Height="20%" Width="20%" Alignment="BottomRight">  
            <Clicked>
                <Toggle Target="openMenu"/>
            </Clicked>
        </Image>
        <Circle ux:Name="button1" X="-8" Y="-18" Fill="#008FFF" Height="15%" Width="15%" Alignment="BottomRight">
            <DropShadow Angle="90" Size="-15"/>
        </Circle>
        <Circle ux:Name="button2" X="-8" Y="-18" Fill="#008FFF" Height="15%" Width="15%" Alignment="BottomRight">
            <DropShadow Angle="90" Size="-15"/>
        </Circle>
        <Circle ux:Name="button3" X="-8" Y="-18" Fill="#008FFF" Height="15%" Width="15%" Alignment="BottomRight">
            <DropShadow Angle="90" Size="-15"/>
        </Circle>
        <Circle ux:Name="button4" X="-8" Y="-18" Fill="#008FFF" Height="15%" Width="15%" Alignment="BottomRight">
            <DropShadow Angle="90" Size="-15"/>
        </Circle>
        <Circle ux:Name="button5" X="-8" Y="-18" Fill="#008FFF" Height="15%" Width="15%" Alignment="BottomRight">
            <DropShadow Angle="90" Size="-15"/>
        </Circle>
        <Circle ux:Name="button6" X="-8" Y="-18" Fill="#008FFF" Height="15%" Width="15%" Alignment="BottomRight">
            <DropShadow Angle="90" Size="-15"/>
        </Circle>
        <Circle ux:Name="button7" X="-8" Y="-18" Fill="#008FFF" Height="15%" Width="15%" Alignment="BottomRight">
            <DropShadow Angle="90" Size="-15"/>
        </Circle>
        <Circle ux:Name="button8" X="-8" Y="-18" Fill="#008FFF" Height="15%" Width="15%" Alignment="BottomRight">
            <DropShadow Angle="90" Size="-15"/>
        </Circle>
        <WhileTrue ux:Name="openMenu">
            <Change menuButton.X="-150" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change menuButton.Y="-250" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button1.X="-160" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button1.Y="-270" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button2.X="-160" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button2.Y="-270" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button3.X="-160" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button3.Y="-270" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button4.X="-160" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button4.Y="-270" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button5.X="-160" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button5.Y="-270" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button6.X="-160" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button6.Y="-270" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button7.X="-160" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button7.Y="-270" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button8.X="-160" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Change button8.Y="-270" DelayBack="1.1" Duration=".5" Easing="QuarticInOut" EasingBack="QuarticInOut"/>
            <Rotate Target="menuButton" Degrees="-45" DelayBack="1.1" Duration="0.2" Easing="QuarticInOut"/>
            <Move Target="button1" Y="-90" Delay="0.1" Duration="0.9" Easing="QuarticInOut"/>
            <Move Target="button2" X="70" Y="-70" Delay="0.2" Duration="0.9" Easing="QuarticInOut"/>
            <Move Target="button3" X="90" Delay="0.3" Duration="0.9" Easing="QuarticInOut"/>
            <Move Target="button4" X="70" Y="70" Delay="0.4" Duration="0.9" Easing="QuarticInOut"/>
            <Move Target="button5" Y="90" Delay="0.5" Duration="0.9" Easing="QuarticInOut"/>
            <Move Target="button6" X="-70" Y="70" Delay="0.6" Duration="0.9" Easing="QuarticInOut"/>
            <Move Target="button7" X="-90" Delay="0.7" Duration="0.9" Easing="QuarticInOut"/>
            <Move Target="button8" X="-70" Y="-70" Delay="0.8" Duration="0.9" Easing="QuarticInOut"/>
        </WhileTrue>
    </Panel>
</Panel>
</App>