【SL】【DESIGN]Blend环绕文字

不做解释转载SilverZine的关于BlendExpress使用的文章，感兴趣的同学请订阅他的博客，我很推荐他的博客在RIA上的设计，这篇文章同样不想多做任何翻译，因为图文并茂，我冒昧的翻译反而会引入错误，原文呈上。

Create Circular Rotating Text in Expression Blend

Sunday, May 10 2009 - Tutorials

In this tutorial we will see how to create a button with text rotating around it. This might be useful for tooltips, or could be applied towards other effects like fly-outs in a game or something similar.

Here is the effect we will create: (hover over the blue circle)

Getting Started

Fire up Expression Blend and create a new project. In this project I will use a canvas size of 200 width by 200 height.

The first thing we want to do is create a circle, this will serve as our reference point for our rotating text. My circle is 125 width by 125 height.

The basic premise behind this effect is to make use of the anchor point which all objects have – this anchor point is more precisely named the RenderTransformOrigin in Silverlight. The RenderTransformOrigin is the point around which all rotation, and other transforms, occur.

To create our rotating text effect we will place a letter at the top of the circle and move its RenderTransformOrigin to the exact center of our circle. Now when we rotate the text it will rotate around our new center point, appearing to rotate precisely on the edge of the circle. The key is to make sure your positioning is exact, so use the Align Horizontal Centers function to make sure your letter is centered with the circle (Note: to do this you may have to select the root of the UserControl instead of the LayoutRoot).

The other thing we need to be sure to do is to set the TextAlignment of our letter to be Center justified. Some of our letters will be bigger, some smaller, and being center justified is key to getting the rotation similar no matter the character width.

In this example we are going to use the text “Silverzine”, so here is an example of what the S will look like after having its RenderTransformOrigin set to the center of the circle:

Once you have the first letter setup rotate it around the circle and make sure that the bottom of the letter stays right on the edge of the circle – this may require some tweaking to get it just right.

Once you’re done setting up the first letter, duplicate it once for each letter in the word which will be rotating around the circle – in our case we will duplicate the “S” nine times.

Once you have duplicated your text go through and set each instance to the proper letter in the word you are spelling – you may want to name your objects so they don’t get confusing. Also, make use of the Objects and Timeline window for selecting your items rather than the stage since the items will all be on top of one another.

Here is what your stage should look like at this point:

Now comes the fun part.

What we want to do is fan the letters out around the circle by rotating them around our modified center point. Take the time to get the spacing just right – how far apart they are is up to you, being consistent between the letters is the main goal. I find it is easiest to start with the center letter(s) and work my way towards the outer letters. Don’t worry if your word isn’t exactly level around the circle, it will be rotating in the end anyway. Once you’re done you should have something like this:

Now that we have our text setup around the circle, we want to animate it. For the most accurate rotation it is usually best to keep each layer separate, but the easiest thing to do is to group all the letters into one grid which we will then animate.

Select all the letters in the scene, and go to the Object Menu > Group Into > Grid. You’ll note that this makes us lose our center point, so we need to move it again to match up with the center of the circle. Just select the grid containing our text, move its justification point, select the circle and see where its point is, and gradually adjust the justification point (RenderTransformOrigin) of our grid until it is as close to the circle’s center as possible. Once your done when you rotate the grid it should rotate around the circle as one big object instead of many individual letters.

Animating our text

All we have to do at this point is to create a new Storyboard and animate our text around the circle. You’ll probably want to change your window layout to the animation layout via the Window menu > Active Workspace > Animation Workspace. Here is the series of steps I used to create my rotation animation:

1) Create a New Storyboard in the Objects and Timeline panel
2) Create a keyframe at 0.0 seconds for the Grid containing our letters
3) Move the play head to 2.0 seconds and create another keyframe
4) On our second keyframe modify the Rotate Transform to 360 degrees

Now you should be able to play your storyboard and see the text rotate around the circle once. For our effect we want to have this continuously repeat – this can be done by selecting our Storyboard and changing RepeatBehavior to Forever.

Finishing Up

At this point all that is left is styling your new control to behave as you want. This might include only playing the animation on mouse over, or maybe dimming out the text and having it fade in on mouse over and fade out when the mouse leaves. If you want to reuse this same control you may even want to make a wrapper class which can take in text up to a given number of characters, and assign your text fields to those letters so that you can show different text around different buttons. How you style it at this point is up to you, hopefully the finished sample at the beginning of this article will give you some ideas.