Video: ANIMATE PATHS IN SILVERLIGHT 1.0

Presenter:Todd Miranda

There are multiple ways to animate paths in Silverlight 1.0. Animating a path can produce subtle effects or more major manipulations of paths. In this video Todd Miranda demonstrates multiple ways to animate a path.

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video


Minute 0

Him in k is taught in this field and industry cut enemy has a slight one data source beginning so Visual Studio 2008 will create a new website will choose to scribble civil rights script web and war of the language since this is a similar window application weren t let s go to war passengers okay right so here s our default template for our civil rights site and to change the default HTML and usually just what it is less however go into our singing guard JS and effectively want to do is just remove these of

Minute 1

And bursts or the addition of the handlers to the first child item of the root element of we will be using that and I was just open up our synagogues and that sorely any resources but we can justly lose their right clean out this key in this because were put our own content in the canvas were to increase the width of our canvas a little bit will increase the height of our canvas just is little room to work with is the first thing you do obviously from an animated path is to create the path to list jump right in and were create the path element like so we ll go ahead and specify stroke of perhaps blue and a stroke

Minute 2

This movie to which you will see that free will fight them is going to give this path and name and so dereference it for animations will call this blue path for Craig as she worked we well know when you specify the path a data so well you specify this is what Hannah made this path of women as specified in the data using the path marked up whereas you specify the data using the figures the past geometry type syntax so we need to begin this with a geometry group or a past geometry soaring and been meaning to go with a past geometry that figures collection now technically you can leave out this dispatcher for figures because the figures collection is a

Minute 3

Assumed to be the default content for past geometry if you don t specify so we have our path figure and it has a start point of starting a little bit minions will started at 20 and will go with 50 we should be right about the Center so there s our path figure startling now the first single and two years or create a line segment and this line segment is to simply don t go to a safe 4050 and then actually do have another line segment at the end and it s going go pressure where it can end up yet so let s go to be a quadratic VGA segments just delightful curve that we can animate and its point will and will be at the city Lesko 60

Minute 4

50 and then point to will be at 80 cover 50 if we space a settlement that will draw the line segment to 150 and that should space things out pretty well so it will effectively have a straight line in an arc segment administrator her and so I should support it easy a segment on arc segment because they re there is an arc segment can users will affect so well is that it should be pretty good let s go ahead and run this and see what our path of flight solutions for our developer server and our IE and seaweed green show straight lines let s see a preacher in a wooded room where

Minute 5

A swastika with a UN official you say now we ve got a straight line we got our another straight line supreme basic path but gives us so just exactly what we need to do animation up or look at two different in two different ways we can animate up half the first and we look at is obviously like an oscillation type animations were were were were changing one of the pollutants of some type of a smooth curved segment in that way we can get some really nice effects as with this animation to pass the other type of animation look at no is an animation where it looks like our path rose into existence sort start from zero income of one things into its full length so you can make curved paths and have this thing expand along the curve and we ll take a look at as well okay so

Minute 6

For our first animation with him to the oscillation animation for our BGA segment lets begin numbers can do this in the key in the start triggers in that way we can respond to and event trigger a view routed event will be canvas loaded and writes a webpage loads going to kick off this animation write so well in here we want to do a begin storyboard and one specify the storyboard will go and given name just for a good practice and was from the storyboard will collect half up down cut and sew in Sadr storyboard were going to use eight animation and point animation does exactly what it sounds like it does

Minute 7

It animates a single point and since we re using are segments which have point properties we can drill down through our path to our segments and affect these point properties using the point animation so let s say that we would go from and is the point remember so we won t go from folks from 60 0 which is our starting point of pulling one of our BGA segment and we want to go to let s go 60 103 the exact opposite of where it sits when it begins and fulfilling us go ahead and do all reverse equals true so that it just for goes down and up and elicit the repeat behavior for

Minute 8

Or so they oscillates for us okay so now we ve got storyboard in the target name target name is blue path of us will recall the past just blue path and we have a storyboard org property will tour a property can can sometimes look a little complicated but just keep in mind number one need a fully qualified path down to the property that will affect number two if we re dealing with properties that are attached properties properties that are on a properties that may be inherited from my beautiful base element things like that it s not a property is directly accessible off of the actual object or looking at the needy use parentheses to get to it and you can tell whether it

Minute 9

Property not about you look in the SDK in Symbian familiar with some of properties or so the property we want is a data obviously the starting point wounded and died more to deal for him to be half geometry figures collection and will be first set of figures really have wound up so it s the first set of figures within a more will of the segments and 1 g the second segment which is our corporate BGA segment and since that is a BGA type segment we want to say BGA segment 1 aren t so that s the full of qualified property name that we want to access on our loop half element Akai so now we ve got the with our path

Minute 10

We ve got our storyboard kicked off from the from the event trigger that loaded clear noticeable red squiggly here looks like a almost have deleted that in tag for canvas are solicitors run this right now so we can see what we have so far and this should show us our path and into the animation on our arcs are and ACR animation where were actually oscillating the arc segment back and forth so you can imagine you get pretty complex path information pretty interesting animations and laugh at you if you have a complex path of the entire Pass discount morphed through some type of animation using this is in this exact same type code ourselves that it was another type of animation will show a pattern that was the width of information we re working on the path to grow into existence of us is going to be fed into the page

Minute 11

Minority that we need to create an outpacing mask on path and we manipulate the offset of the gradient for a tasty rascals to take that one step how let s start with our theft auto place to ask and obviously were in use a linear gradient brush our start pulling will be 1 0 hour and will will be 0 0 children have the of the linear gradient brush toward the end of the path and work its way back I know we want to create our gradient offsets so I were gradient stop color and remember these this is outpacing mask so her first color is a black but it is zero powerful

Minute 12

And the offset will be won and we grabbed our second gradient stop it s going to be full of pasty white also offset ones we wanted all CSS top of one another right now are numerous and manipulate both of these offsets of screensaver that and will move up to see your list do another begin storyboard is create another storyboard object and can name it for good good measure is to be half inter and noticed the woman into a double animation for our call for manipulating the offset here in an hour or there is a face mask and so

Minute 13

That are double animation and we want to do our from a to be one trough that starts in 12 to be zero children from one to zero for duration on the Cisco half second so zero hours zero minutes 1 5 seconds and we know that our storyboard a target name is the same as before so it s blue path and our storyboard a target property and when one look at the fully qualified path to our property and we never will access the okay city mask and that comes off of the UI looks parentheses the UI element pace of the mass died the radiant

Minute 14

Brush gradient stops collection and we did for reference the first gradient stop and do gradient stop offset because the offset property as I should want it to write so let s create another one of those and were simply going here in change the gradient stop of his second gradient stops of will take both gradient stops from one to zero and I over 1 5 seconds which means us go up to the storyboard and let s do a begin time a endlessly that maybe this begins at two seconds so we ll have this animation one of the press enter and give a small break and will store the oscillation so let s take a look at what this looks like

Minute 15

And in or this oscillation to see if he really had a couple different ways a we looked at at two of those ways where we can actually make the path row into existence if you look at that way and in this this idea of changing the points of a segment to do the oscillation or the the animation of the segments of the path so you save it that again pretty powerful you can even imagine some pretty pretty crazy things having more complex path and manipulating old lot of those points all at the same time and having them have give an idea of like a morphing type effect of a path in your page

Minute 16

Him as a

Click here to go to original video page