Click here to Skip to main content
15,881,281 members
Search within:


Articles / Desktop Programming / XAML
 

Busy Dizzy Bee-sley Spirographic Animation in Expression Blend & Silverlight

Rate me:
Please Sign up or sign in to vote.
4.89/5 (45 votes)
11 May 2010CPOL9 min read 78.5K   628   39  
Simulating a random motion animation without code, using Spirographic Shapes, PathListBoxes, Storyboards & Behaviours
 
<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
	mc:Ignorable="d"
	x:Class="BusyBee.BusyBee"
	d:DesignWidth="640" d:DesignHeight="640" Width="78" Height="104">
	
	<Grid x:Name="LayoutRoot">
		<Canvas x:Name="LayoutRoot_Copy" >
			<Path x:Name="TopWing1" Data="M139.53189,302.3822 C135.28979,274.66455 139.58949,249.96001 139.58949,249.96001 C142.46053,229.12721 163.32451,235.75182 160.71919,245.77116 C159.59674,251.01796 149.6956,273.73666 146.93939,296.15457" Fill="#FFBABABA" Height="37.941" Canvas.Left="26.45" Stretch="Fill" StrokeThickness="1" UseLayoutRounding="False" Width="32.566" Stroke="Black" RenderTransformOrigin="0.5,0.5">
				<Path.RenderTransform>
					<CompositeTransform/>
				</Path.RenderTransform>
			</Path>
			<Path x:Name="TopWing2" Data="M136.4892,295.02271 C139.48444,275.00006 146.1848,256.40555 149.18317,250.30165 C153.10223,242.95065 161.4279,256.03226 160.5574,265.56757 C160.4995,270.59036 149.66321,273.74924 143.95377,294.56958" Fill="#FFBABABA" Height="27.147" Canvas.Left="40.776" Stretch="Fill" StrokeThickness="1" Canvas.Top="7.177" UseLayoutRounding="False" Width="33.718" Stroke="Black" RenderTransformOrigin="0.5,0.5">
				<Path.RenderTransform>
					<CompositeTransform/>
				</Path.RenderTransform>
			</Path>
			<Path x:Name="BottomWing1" Data="M139.59796,301.6069 C135.35587,273.88925 139.58949,249.96001 139.58949,249.96001 C142.46053,229.12721 163.32451,235.75182 160.71919,245.77116 C159.59674,251.01796 149.6956,273.73666 146.93939,296.15457" Fill="#FFBABABA" Height="37.196" Canvas.Left="26.517" Stretch="Fill" StrokeThickness="1" Canvas.Top="68.194" UseLayoutRounding="False" Width="32.499" Stroke="Black" RenderTransformOrigin="0.5,0.5">
				<Path.RenderTransform>
					<CompositeTransform ScaleY="-1" TranslateY="-1.3390007019042969"/>
				</Path.RenderTransform>
			</Path>
			<Path x:Name="BottomWing2" Data="M136.4892,295.02271 C139.48444,275.00006 146.1848,256.40555 149.18317,250.30165 C153.10223,242.95065 161.4279,256.03226 160.5574,265.56757 C160.4995,270.59036 149.66321,273.74924 143.95377,294.56958" Fill="#FFBABABA" Height="26.922" Canvas.Left="40.609" Stretch="Fill" StrokeThickness="1" Canvas.Top="69.915" UseLayoutRounding="False" Width="33.718" Stroke="Black" RenderTransformOrigin="0.5,0.5">
				<Path.RenderTransform>
					<CompositeTransform ScaleY="-1"/>
				</Path.RenderTransform>
			</Path>
			<Path Data="M259,62 C229.99973,89.5 186.27417,123 120,123 C53.72583,123 0,95.465515 0,61.5 C0,27.534489 53.72583,0 120,0 C186.27417,0 233,33.5 259,62 z" Stretch="Fill" UseLayoutRounding="False" Stroke="Black" Height="39.224" Canvas.Left="18.683" Canvas.Top="32.717" Width="59.445">
				<Path.Fill>
					<RadialGradientBrush RadiusY="0.627" RadiusX="0.328" Center="1.177,0.468" GradientOrigin="1.177,0.468" SpreadMethod="Repeat">
						<GradientStop Color="#FFFFEA00" Offset="0.547"/>
						<GradientStop Color="Black" Offset="0.562"/>
					</RadialGradientBrush>
				</Path.Fill>
			</Path>
			<Path Data="M61,1 C73.944176,1.0000002 85.930984,6.0553789 95.733246,14.652607 L96.025436,14.915436 L97.08091,14.708617 C99.663017,14.242002 102.30761,14 105,13.999999 C133.71881,14 157,41.534489 157,75.5 C157,109.46552 133.71881,137 105,137 C101.85888,137 98.782814,136.67061 95.795135,136.03944 L95.106361,135.88336 L94.54657,136.36197 C84.970505,144.34096 73.426407,149 61,149 C27.862915,149 1,115.86907 1,75 C1,34.130928 27.862915,1.0000002 61,1 z" Fill="#FFFEE900" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Width="27.145" Height="33.482" Canvas.Left="0.128" Canvas.Top="35.636"/>
			<Path Data="M13.841778,120.75657 C5.7987633,108.16486 -0.34676552,92.365143 0.22319539,69.172539 C0.73913848,48.178005 4.6051126,28.435564 15.997822,14.966583 C20.471222,10.718265 12.37592,40.841534 12.000123,71.000122 C12.111662,96.176697 17.290915,121.88239 13.841778,120.75657 z" Fill="Black" Stretch="Fill" StrokeThickness="2" UseLayoutRounding="False" Width="3.291" Height="17.157" Canvas.Left="1.956" Canvas.Top="43.493"/>
			<Ellipse Fill="White" Height="15" Stroke="Black" Width="13" Canvas.Left="11" Canvas.Top="37"/>
			<Ellipse Fill="White" Stroke="Black" Width="13" Height="14" Canvas.Left="11" Canvas.Top="53"/>
			<Ellipse Fill="Black" StrokeThickness="2" Width="4" Height="4" Canvas.Left="7" Canvas.Top="50"/>
			<Ellipse Fill="Black" Height="10" StrokeThickness="2" Width="8" Canvas.Left="13" Canvas.Top="40"/>
			<Ellipse Fill="White" Height="3" StrokeThickness="2" Width="5" Canvas.Left="14" Canvas.Top="42"/>
			<Ellipse Fill="Black" StrokeThickness="2" Width="8" Height="10" Canvas.Left="13" Canvas.Top="55"/>
			<Ellipse Fill="White" StrokeThickness="2" Width="5" Height="3" Canvas.Left="14" Canvas.Top="57"/>
			<Path Data="M246.07312,215.20589 C292.98663,229.35114 314.16422,265.80307 296.51868,297.71927" Stretch="Fill" Stroke="Black" StrokeThickness="3" UseLayoutRounding="False" Width="8.905" RenderTransformOrigin="0.5,0.5" Height="17.906" Canvas.Left="23.197" Canvas.Top="32.595">
				<Path.RenderTransform>
					<CompositeTransform ScaleY="-1" TranslateY="-2.9510002136230469"/>
				</Path.RenderTransform>
			</Path>
			<Ellipse Width="7" Fill="#FFFEE900" Stroke="Black" RenderTransformOrigin="0.5,0.5" Height="8" Canvas.Top="25" Canvas.Left="26">
				<Ellipse.RenderTransform>
					<CompositeTransform ScaleY="-1"/>
				</Ellipse.RenderTransform>
			</Ellipse>
			<Path Data="M253.15681,219.47565 C288.15701,236.03006 301.88831,263.16019 288.84573,292.89725" Stretch="Fill" Stroke="#FFFEE900" UseLayoutRounding="False" Width="7.415" RenderTransformOrigin="0.5,0.5" Height="16.64" Canvas.Left="23.677" Canvas.Top="31.684">
				<Path.RenderTransform>
					<CompositeTransform ScaleY="-1" TranslateY="-1.2850027084350586"/>
				</Path.RenderTransform>
			</Path>
			<Path Data="M246.07312,215.20589 C292.98663,229.35114 314.16422,265.80307 296.51868,297.71927" Stretch="Fill" Stroke="Black" StrokeThickness="3" UseLayoutRounding="False" Width="8.905" RenderTransformOrigin="0.5,0.5" Height="17.906" Canvas.Left="23.197" Canvas.Top="60.084">
				<Path.RenderTransform>
					<CompositeTransform TranslateY="-2.951"/>
				</Path.RenderTransform>
			</Path>
			<Ellipse Width="7" Fill="#FFFEE900" Stroke="Black" RenderTransformOrigin="0.5,0.5" Height="8" Canvas.Top="72" Canvas.Left="26">
				<Ellipse.RenderTransform>
					<CompositeTransform ScaleY="-1"/>
				</Ellipse.RenderTransform>
			</Ellipse>
			<Path Data="M253.15681,219.47565 C288.15701,236.03006 301.88831,263.16019 288.84573,292.89725" Stretch="Fill" Stroke="#FFFEE900" UseLayoutRounding="False" Width="7.415" RenderTransformOrigin="0.5,0.5" Height="16.64" Canvas.Left="23.677" Canvas.Top="59.173">
				<Path.RenderTransform>
					<CompositeTransform TranslateY="-1.285"/>
				</Path.RenderTransform>
			</Path>
		</Canvas>
	</Grid>
</UserControl>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Alan Beasley
User Interface Analyst
United Kingdom United Kingdom
I've been playing with computers since my first Acorn Electron, & after blowing up a few ZX Spectrums. I moved on to the C64 & Amiga, & eventually reluctantly on to the PC.

I have learnt a wide set of skills during my 38 years of existence, living in the UK, on the sunny south coast.

My main area of expertise is Graphic/Visual Design, Usability & UI Design. I am not a programmer, but am fairly technically minded due to studying Mechanical Engineering at Uni.

I have work both Freelance & for IBM as a Graphic Designer, & am skilled in the usual graphics packages like, PhotoShop, CorelDraw or Illustrator, Premier, Dreamweaver, Flash etc.
But I originally started with Lightwave & 3D animation.

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 10 May 2010

Article Copyright 2010 by Alan Beasley
Everything else Copyright © CodeProject, 1999-2024

Web04 2.8:2024-04-02:1