Foundation Silverlight 3 Animation- P11 pot

281 In this chapter, we’re going to take a look at a couple of different methods for getting 3D effects in Silverlight. The first method is utilizing the plane projection transforms that are new to Silverlight 3. Plane projections will allow us to create some interest- ing planar 3D effects very quickly and easily. From there, we’re going to apply some of the concepts from Chapter 6 to emulate 3D object rotations. While Silverlight doesn’t yet support full 3D models, you can add a little pop to your applications by implementing the concepts we’ll talk about here. Projection plane Even though we’ve had our noses in the code for a little while now, we’re going to start talking about projection planes in the context of Blend. Why? Because Blend just makes it really easy to access the features with which we want to work. I touched on the projection transforms very briefly earlier in this book. The projections are avail- able on the Transform pane of the Properties panel, which is shown in Figure 7-1. SIMULATING 3D IN 2D Chapter 7 282 CHAPTER 7 Figure 7-1. The Projection transform pane When the controls on the Projection portion of the pane are adjusted, an object’s rotation, center point, and offsets can be adjusted or animated. Rotations occur along the x, y, or z axis, which will allow you to spin an object as illustrated in Figure 7-2. Figure 7-2. Projection rotations The second tab on the pane allows you to define the center of rotation. As with the regular center point transform, values here range from 0 to 1, with .5 being in the center, as shown in Figure 7-3. 283 SIMULATING 3D IN 2D The z center of rotation is likely to go unused for the time being but would be useful in the case of a true 3D model. Figure 7-3. Projection rotation offsets The third and fourth tabs allow you to adjust global or local coordinate offsets for your planar rota- tions. This is basically the equivalent of defining a radius offset for the rotation of the plane. With a basic understanding of the concepts involved in planar projection transforms, let’s take a look at a simple example. Use Blend to open the PlaneProjection project for Chapter 7. The project con- tains the H]ukqpNkkp canvas, as well as a simple, gradient-filled rectangle element. 1. Select the BlueRectangle element in the Objects and Timeline panel. 2. On the Rotation tab, enter 45 into the Y field. Notice that the rectangle rotates to the left. Change the Y rotation back to 0. 3. Select the Center of Rotation tab (the second tab). In the X field, enter 1. 4. Return to the Rotation tab, and enter 45 into the Y field again. Notice that the plane now rotates around the right edge rather than the center point. 5. Take a few minutes to experiment with the different values and see what types of effects they have on the object in the application. In a moment, we’ll take a look at a more realistic usage scenario for projection planes. 284 CHAPTER 7 Think of the center of rotation point as the hinge around which your object is rotating. In the preced- ing example, we moved the rotation point from the center (.5 X) to the right side (1 X) of the object. If you remember way back in one of the early chapters when we first talked about transforms, we used a Skew transform to make a door appear to swing open. While the skewing action did a great job of emulating the look we were going for, if you truly wanted to get that effect, the plane projections would make it easy. If you use Split view, or examine the code as you work, you will notice that Blend adds a Lnkfa_pekj container to your element and fills in the appropriate values. As with other objects in XAML, you can name the projection and access the properties using code if you’d like. One last thing to keep in mind—even though the example you just went through was very simple, any element inside of your applications can have projections applied. If you rotate a canvas object, all of the content inside the canvas will also rotate. Any controls or interactivity you have set up will remain working and active, so you can get some pretty interesting effects. Let’s turn our attention to an example that is probably a little more realistic. In the following project, we’ll create a rotating group of objects, as shown in Figure 7-4. I’ve left them plain here, but a few real-world examples, such as contact cards and image galleries, come to mind. Figure 7-4. An example project that leverages the X projection plane transform 285 SIMULATING 3D IN 2D 1. Use Blend to open the X_Projection project for Chapter 7. The project contains a canvas called AllItems that contains seven more canvases, each containing a TextBlock so that the items can be identified as the application runs. All of the item canvases are currently stacked on top of one another. There are also two buttons: one that says Rotate Up and another that says Rotate Down. 2. Change to Split view so that the XAML code is visible beneath the artboard. 3. Expand the AllItems canvas if it isn’t already, and select Item_0 by clicking it. On the Center of Rotation tab of the Projection portion of the Transform pane, put –200 into the Z field. This has the net effect of offsetting the X rotation 200 pixels from 0 Z. On the Rotation tab, enter 1 into the X field, and then change it to 0. This will add a ?]jr]o*Lnkfa_pekj XAML container to the selected canvas and fill in the necessary properties. 4. Select Item_1. Once again, set the Center of Rotation to –200 Z. On the Rotation tab, enter 45 into the X field. You will see the element rotate and shift down on the artboard. 5. Work around the remaining six canvas items. Each one should have the Center of Rotation set to –200 Z, and for each item, the X rotate value should increase by 45 degrees. Item_2 will be 90; Item_3 will be 135; Item_4 will be 180; and so on. Once you have finished applying the projec- tions to each object, the project should look similar to the one shown in Figure 7-5. Figure 7-5. The X_Projection project taking shape 6. Next, we’ll create a storyboard that we will access from code to spin our objects. Click the New storyboard button, and type Rotate in the Create Storyboard Resource dialog before clicking OK. 286 CHAPTER 7 7. Our animation will take 1 second, so move the timeline play head to that position. 8. Select Item_0, and in the X Rotate field, enter 1, then 0. The purpose of this is to set a keyframe at 1 second that contains the current rotation value. It is necessary to change the value and then change it back to force the keyframe into the animation. The result of this action will be an animation that looks like the code shown following. 8@kq^ha=jei]pekjQoejcGauBn]iao>acejPeia9,,6,,6,,£ Opknu^k]n`*P]ncapJ]ia9Epai[,Opknu^k]n`*P]ncapLnklanpu9£ $QEAhaiajp*Lnkfa_pekj%*$Lh]jaLnkfa_pekj*Nkp]pekjT%: 8A]oejc@kq^haGauBn]iaGauPeia9,,6,,6,-R]hqa9,+: 8+@kq^ha=jei]pekjQoejcGauBn]iao: 9. Edit the A]oejc@kq^haGauBn]ia item to add an T6J]ia property as shown. This will allow us to directly access the values for this keyframe from code. 8A]oejc@kq^haGauBn]iat6J]ia9Epai,[Nkp]paGauPeia9,,6,,6,-£ R]hqa9,+: 10. Work through each of the remaining items just as you did for the first in steps 8 and 9. However, for each item’s X rotate value, change the value before changing it back to the value that was there to begin with. We just want to force Blend to write the keyframes for us using the values we set. Your completed storyboard should look like the following: 8Opknu^k]n`t6J]ia9Nkp]pa: 8@kq^ha=jei]pekjQoejcGauBn]iao>acejPeia9,,6,,6,,£ Opknu^k]n`*P]ncapJ]ia9Epai[,Opknu^k]n`*P]ncapLnklanpu9£ $QEAhaiajp*Lnkfa_pekj%*$Lh]jaLnkfa_pekj*Nkp]pekjT%: 8A]oejc@kq^haGauBn]iat6J]ia9Epai,[Nkp]pa£ GauPeia9,,6,,6,-R]hqa9,+: 8+@kq^ha=jei]pekjQoejcGauBn]iao: 8@kq^ha=jei]pekjQoejcGauBn]iao>acejPeia9,,6,,6,,£ Opknu^k]n`*P]ncapJ]ia9Epai[-Opknu^k]n`*P]ncapLnklanpu9£ $QEAhaiajp*Lnkfa_pekj%*$Lh]jaLnkfa_pekj*Nkp]pekjT%: 8A]oejc@kq^haGauBn]iat6J]ia9Epai-[Nkp]pa£ GauPeia9,,6,,6,-R]hqa901+: 8+@kq^ha=jei]pekjQoejcGauBn]iao: 8@kq^ha=jei]pekjQoejcGauBn]iao>acejPeia9,,6,,6,,£ Opknu^k]n`*P]ncapJ]ia9Epai[.Opknu^k]n`*P]ncapLnklanpu9£ $QEAhaiajp*Lnkfa_pekj%*$Lh]jaLnkfa_pekj*Nkp]pekjT%: 8A]oejc@kq^haGauBn]iat6J]ia9Epai.[Nkp]pa£ GauPeia9,,6,,6,-R]hqa95,+: 8+@kq^ha=jei]pekjQoejcGauBn]iao: 8@kq^ha=jei]pekjQoejcGauBn]iao>acejPeia9,,6,,6,,£ Opknu^k]n`*P]ncapJ]ia9Epai[/Opknu^k]n`*P]ncapLnklanpu9£ $QEAhaiajp*Lnkfa_pekj%*$Lh]jaLnkfa_pekj*Nkp]pekjT%: 8A]oejc@kq^haGauBn]iat6J]ia9Epai/[Nkp]pa£ GauPeia9,,6,,6,-R]hqa9-/1+: 8+@kq^ha=jei]pekjQoejcGauBn]iao: 287 SIMULATING 3D IN 2D 8@kq^ha=jei]pekjQoejcGauBn]iao>acejPeia9,,6,,6,,£ Opknu^k]n`*P]ncapJ]ia9Epai[0Opknu^k]n`*P]ncapLnklanpu9£ $QEAhaiajp*Lnkfa_pekj%*$Lh]jaLnkfa_pekj*Nkp]pekjT%: 8A]oejc@kq^haGauBn]iat6J]ia9Epai0[Nkp]pa£ GauPeia9,,6,,6,-R]hqa9-4,+: 8+@kq^ha=jei]pekjQoejcGauBn]iao: 8@kq^ha=jei]pekjQoejcGauBn]iao>acejPeia9,,6,,6,,£ Opknu^k]n`*P]ncapJ]ia9Epai[1Opknu^k]n`*P]ncapLnklanpu9£ $QEAhaiajp*Lnkfa_pekj%*$Lh]jaLnkfa_pekj*Nkp]pekjT%: 8A]oejc@kq^haGauBn]iat6J]ia9Epai1[Nkp]pa£ GauPeia9,,6,,6,-R]hqa9 1+: 8+@kq^ha=jei]pekjQoejcGauBn]iao: 8@kq^ha=jei]pekjQoejcGauBn]iao>acejPeia9,,6,,6,,£ Opknu^k]n`*P]ncapJ]ia9Epai[2Opknu^k]n`*P]ncapLnklanpu9£ $QEAhaiajp*Lnkfa_pekj%*$Lh]jaLnkfa_pekj*Nkp]pekjT%: 8A]oejc@kq^haGauBn]iat6J]ia9Epai2[Nkp]pa£ GauPeia9,,6,,6,-R]hqa9.3,+: 8+@kq^ha=jei]pekjQoejcGauBn]iao: 8@kq^ha=jei]pekjQoejcGauBn]iao>acejPeia9,,6,,6,,£ Opknu^k]n`*P]ncapJ]ia9Epai[3Opknu^k]n`*P]ncapLnklanpu9£ $QEAhaiajp*Lnkfa_pekj%*$Lh]jaLnkfa_pekj*Nkp]pekjT%: 8A]oejc@kq^haGauBn]iat6J]ia9Epai3[Nkp]pa£ GauPeia9,,6,,6,-R]hqa9/-1+: 8+@kq^ha=jei]pekjQoejcGauBn]iao: 8+Opknu^k]n`: 11. The project has now been set up the way we want, but we’ll need to add some code to create some interactivity. Open the I]ejL]ca*t]ih*_o file in Visual Studio for editing. The code that goes in the code-behind file is relatively simple for this project. We know that each of the items in our application is rotated in 45-degree increments, so when one of the buttons is clicked, we either add or subtract 45 from the values in the animations and then play the storyboard. 12. To achieve this, start by declaring two variables above the I]ejL]ca$% constructor. The first will be used to store the increment value so that it only needs to be changed in one place if necessary. The second is used to control the direction of the rotation. lner]pa`kq^haNkp]paEj_naiajp9017 lner]pa`kq^haNkp]pa@eop]j_a7 13. Inside of the I]ejL]ca$% constructor, add code to assign the Nkp]paEj_naiajp value to the Nkp]pa@eop]j_a variable. Nkp]pa@eop]j_a9Nkp]paEj_naiajp7 14. Inside of the I]ejL]ca$% constructor, create an event listener for the ?he_g event on ^pjNkp]paQl. ^pjNkp]paQl*?he_g'9jasNkqpa`ArajpD]j`han$^pjNkp]paQl[?he_g%7 288 CHAPTER 7 15. Inside the event handler, add code to increment each item’s value by the Nkp]pa@eop]j_a amount. lner]parke`^pjNkp]paQl[?he_g$k^fa_poaj`an(Nkqpa`Arajp=ncoa% w Epai,[Nkp]pa*R]hqa)9Nkp]pa@eop]j_a7 Epai-[Nkp]pa*R]hqa)9Nkp]pa@eop]j_a7 Epai.[Nkp]pa*R]hqa)9Nkp]pa@eop]j_a7 Epai/[Nkp]pa*R]hqa)9Nkp]pa@eop]j_a7 Epai0[Nkp]pa*R]hqa)9Nkp]pa@eop]j_a7 Epai1[Nkp]pa*R]hqa)9Nkp]pa@eop]j_a7 Epai2[Nkp]pa*R]hqa)9Nkp]pa@eop]j_a7 Epai3[Nkp]pa*R]hqa)9Nkp]pa@eop]j_a7 Nkp]pa*>acej$%7 y 16. Inside the I]ejL]ca$% constructor, create an event listener for the ?he_g event on ^pjNkp]pa@ksj. ^pjNkp]pa@ksj*?he_g'9jasNkqpa`ArajpD]j`han$^pjNkp]pa@ksj[?he_g%7 17. The code that goes inside of this event handler is very similar to that for the ^pjNkp]paQl han- dler, except that the values are incremented rather than decremented. lner]parke`^pjNkp]pa@ksj[?he_g$k^fa_poaj`an(Nkqpa`Arajp=ncoa% w Epai,[Nkp]pa*R]hqa'9Nkp]pa@eop]j_a7 Epai-[Nkp]pa*R]hqa'9Nkp]pa@eop]j_a7 Epai.[Nkp]pa*R]hqa'9Nkp]pa@eop]j_a7 Epai/[Nkp]pa*R]hqa'9Nkp]pa@eop]j_a7 Epai0[Nkp]pa*R]hqa'9Nkp]pa@eop]j_a7 Epai1[Nkp]pa*R]hqa'9Nkp]pa@eop]j_a7 Epai2[Nkp]pa*R]hqa'9Nkp]pa@eop]j_a7 Epai3[Nkp]pa*R]hqa'9Nkp]pa@eop]j_a7 Nkp]pa*>acej$%7 y Press F5 to run the application. As you click the buttons, the animations are updated on the fly, and the storyboard is triggered. Since the storyboard values are incremented or decremented when the mouse button is clicked, numerous clicks of the buttons will still calculate the correct end point, but the animation will still occur over 1 second. Since the items in the application are all Canvas objects, you can add any type of content you’d like without having to modify the code in order for the applica- tion to run. The code shown here is fairly explicit, so it’s easy to follow, but if there were many more objects, it would probably be a better idea to create a generalized method that can be called from either event handler to update the storyboard values. Then, you can simply change the Nkp]pa@eop]j_a value to –45 or 45, call the method, and fire the storyboard. This would help optimize your code a bit. To give you some idea of what that might look like, I’ve included that code in the X_ProjectionCompleted project. 289 SIMULATING 3D IN 2D To give yourself some practice, try two things for me. First, modify the easing options for each anima- tion in the storyboard. See if you can get the entire set of items to rock back and forth a bit before turning. Second, start from scratch, and see if you can mimic this behavior with a Y rotate (horizontal) projection. The projections are a lot of fun and certainly add a lot of flexibility to the feature set of Silverlight. However, there is more you can do if you’re willing to get your hands dirty and work with a little more code. In the next section, we’re going to talk more about 3D and how to simulate 3D effects in 2D with code. 3D As you are aware, the coordinate system in Silverlight has only x and y axes, where x is the horizontal axis and y is the vertical. To imagine a 3D coordinate system like the one shown in Figure 7-6, a z axis line is drawn straight into your computer screen. We’re not going to be coding up a true 3D coordinate system—instead, we’ll fake the visual cues that make people see objects as being farther away using some of the trigonometry you learned in Chapter 6. Figure 7-6. The z axis for a 3D coordinate system in Silverlight would run perpendicular to your monitor. Z axis rotation We’ll start out with an easy one: z axis rotation. Any object you rotate around the z axis on the screen would be moving in a circular or elliptical pattern, as shown in Figure 7-7. 290 CHAPTER 7 Figure 7-7. Z axis rotation results in a circular or elliptical rotation. As such, z axis 3D movement isn’t really emulating any 3D motion. It will still become part of your toolbox, however, so it’s worth taking a look at. You saw how to create circular movements in Chapter 6, but let’s do a quick review project that puts our terms in a context that works for 3D. In this exam- ple, we will build a project that moves a ball around the z axis. 1. Open the ZAxis3D project. This project contains a gradient-filled >]hh object and the main page. The I]ejL]ca*t]ih file also contains a storyboard timer named Ikra>]hh. 2. If you were building an application that supported multiple objects traveling in circular or elliptical paths, you might choose to place some of the code in the object’s code-behind files. However, for this project, we’ll just take a look at the one ball, so all of our code will go into the I]ejL]ca*t]ih*_o file. Open I]ejL]ca*t]ih*_o for editing. 3. Start by declaring an instance of the >]hh object: lner]pa>]hhIu>]hh9jas>]hh$%7 4. Next, declare the variables we’ll be using for the movement. Knecej will be the origin point for the motion, and N]`eqo will determine the radius of the circle the ball will travel. =jcha and Olaa` will be used to determine our sine and cosine calculations, and Lkoepekj will determine where on the canvas the ball will be placed. lner]paLkejpKnecej7 lner]pa`kq^haN]`eqo9-1,7 lner]pa`kq^ha=jcha9,7 lner]pa`kq^haOlaa`9*-7 lner]paLkejpLkoepekj7 [...]... about 30 km/second, so to determine ’s speed, we take 30 / 48 05 296 SIMULATING 3D IN 2D Figure 7-10 The InnerSolarSystem project with both Venus and Mercury in view 20 Inside the constructor, initialize the shown in bold in the following listing: and variables by adding the code 297 CHAPTER 7 21 Create the 22 In the to the storyboard’s method: file, call the event handler: method to add the object 23 Running... order to make objects appear to be moving either toward or away from the viewer Figure 7- 13 Objects appear to get more distant as they are scaled down and made more translucent 30 0 SIMULATING 3D IN 2D Let’s code up another example This time, we’ll write some code that emulates motion around the y axis 1 Open the YAxis3D project This project contains a simple layout Canvas, our trusty control, and a storyboard... for this example is in the YAxis3DCompleted project I also added a few sliders and a check box to the project, as shown in Figure 7-14 The sliders will allow you to change the , , and values as the application is running The check box allows you to toggle the transparency, so you can see what effect that has on the object 30 2 SIMULATING 3D IN 2D Figure 7-14 The YAxis3DCompleted project includes some... Right-click the HorizontalCarousel C# project name in Visual Studio’s Solution Explorer and select Add New Item, as shown in Figure 7-15 30 3 CHAPTER 7 Figure 7-15 Adding a new item through Visual Studio’s Solution Explorer 3 When the Add New Item dialog opens, select Silverlight User Control Type the name CarouselItem, and click the Add button Visual Studio will create the new object for you and add... some values: calculations to use values: Take some time and look at the ZAxis3DCompleted project, shown in Figure 7-8 It contains the code shown here in the example, but I also added a few sliders so you can manipulate some of the values in real time as the application runs Figure 7-8 The ZAxis3DCompleted project 292 SIMULATING 3D IN 2D A model of the inner solar system So you’ve built this project and... draw correctly regardless of the y value Be careful when you type in this code—the difference between the two distance calculations is very small but makes a big difference in the end result 30 8 SIMULATING 3D IN 2D 23 With the variable having been recalculated based on the y position of the carousel item, the scale and transparency of the object can be updated: 24 That’s all for the curly brace ( ) for... the planet Mercury is 48km/second For , we used a value of 05, and we need to make the other planets move relative to ’s speed The average speed of the planet Venus is 35 km/ second To determine the speed of in relation to , we take 35 / 48 05 295 CHAPTER 7 15 Next, add the following bold code to the constructor to initialize the and variables: 16 Finish up the Venus code-behind by adding the method... our other planets will be determined using Mercury’s speed as a base 2 93 CHAPTER 7 8 Inside the constructor, initialize the and variables as shown in the following code The values being used were determined by me from a reference image Notice that we are once again adjusting the location of the center point to accommodate the way Silverlight references objects by their top-left coordinate 9 The last... MsgNumber Also, add a transform group to the Canvas Name the ItemScale The XAML that goes inside the user control for this object is shown in the following listing Figure 7-16 shows the object 30 4 SIMULATING 3D IN 2D Figure 7-16 This figure shows what the carousel item should look like 6 Open the file for editing We will be using code to distribute the carousel items along an elliptical path when creating... following code listing: 13 Begin filling in the loop with the following code Here, we create an instance of called Once the instance has been defined, we populate one of the TextBlocks with the element number This is strictly for reference for this carousel—if you had a set of images or videos in your carousel, this is where you would assign the property 14 Next, each calculate the 15 Once 30 6 has a value . 3D effects in Silverlight. The first method is utilizing the plane projection transforms that are new to Silverlight 3. Plane projections will allow us to create some interest- ing planar 3D. shown in Figure 7 -3. 2 83 SIMULATING 3D IN 2D The z center of rotation is likely to go unused for the time being but would be useful in the case of a true 3D model. Figure 7 -3. Projection rotation. simulate 3D effects in 2D with code. 3D As you are aware, the coordinate system in Silverlight has only x and y axes, where x is the horizontal axis and y is the vertical. To imagine a 3D coordinate