WPF button animation effect Creation

Summary: This article compares the production process of the WPF button and flash button to explain how to use the XAML to implement button animation, and you can also learn expression blend. This article assumes that you are creating a system for ordering drinks. Now you have to create a coffee button. After the user clicks it, the user will place a coffee order for the user. Of course, the more intuitive the button is, the better. The more intuitive the button is, the more obvious the user needs to know that it is used to order coffee.

The Development Environment used in this article: expression blend 2 SP1, expression Design

Before reading this article, we recommend that you read the following chapters in WPF secrets to learn some basic concepts:

XAML, Chapter 2 of WPF secrets
Style, WPF secrets 10.1
Controls template, WPF secrets 10.2
Trigger, WPF secrets 10.1.2
Animation and storyboard, Chapter 2 of WPF secrets
Key Frame: WPF secrets 13.3
 

Body

The content first learned by anyone who has learned flash is generally made of buttons. In flash, buttons are in four states: Up (not clicked), over (hovering over ), down (press the mouse) and hit (click the mouse ).

If you want to add an animation for a certain state, you need to use an embedded movieclip to implement it. Of course, this article does not explain the flash tutorial, so we will not introduce it more.

Many beginners of WPF think that flash seems to be better than Microsoft, because Flash has buttonclip, Which is intuitive and convenient. In fact, from the perspective of software development, the event model of WPF is more scientific, because all animation and visual effects in the program are triggered by events, in WPF, it is not difficult to implement up, down, over, and hit statuses similar to those in flash. In fact, you can easily find the corresponding attributes and events. Below I will list a table, after reading this, you can easily understand:

Flash

WPF

Up mouseleftbuttonup (Event)
Down mouseleftbuttondown (Event)
Over ismouseover (property)
Hit ispressed (property)
Did you find that the events and attributes of WPF are more targeted and clearer? Of course, we must acknowledge that flash is doing well-It puts the four most common States corresponding to the button in a separate editing view (that is, the buttonclip editor, in this way, it is easy for beginners to get started. Maybe the Versions later than expression blend can be used for reference.

To do anything, we must understand what we are going to do in the end, so let's take a look:

Are you a little impatient? Let's get started!

Drawing

After careful analysis, you will find that the most important thing in the whole button is the hot cup. So, what should we draw the cup first? Expression design is used.

I drew a few drafts of the Cup. All the design friends know that this is actually a graphics job. How to draw it is not the focus of this article? Let's try it out. Note that several paths must be placed in a group after a cup is drawn. This ensures that a canvas contains a cup image during export, the exported XAML is similar to the following code:
--------------

XAML code

   <Viewbox x:Name="Group" Width="30.8005" Height="32.0573" Canvas.Left="35.6441" Canvas.Top="40.7749">    <Canvas Width="30.8005" Height="32.0573">        <Path x:Name="Path" Width="3.01129" Height="16.1666" Canvas.Left="6.25348" Canvas.Top="2.18024" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FF9E9898" Data="F1 M 7.92015,3.18024C 7.56208,5.32863 8.36821,8.0273 8.25348,10.0135C 8.08681,12.899 7.25348,14.8798 7.25348,17.3469"/>        <Path x:Name="Path_0" Width="3.01129" Height="16.1666" Canvas.Left="10.7747" Canvas.Top="2.27339" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FF9E9898" Data="F1 M 12.4414,3.27339C 12.0833,5.42178 12.8895,8.12045 12.7747,10.1067C 12.6081,12.9921 11.7747,14.973 11.7747,17.44"/>        <Path x:Name="Path_1" Width="3.01129" Height="16.1667" Canvas.Left="14.8581" Canvas.Top="2.14838" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FF9E9898" Data="F1 M 16.5247,3.14838C 16.1667,5.29678 16.9728,7.99545 16.8581,9.9817C 16.6914,12.8671 15.8581,14.848 15.8581,17.315"/>        <Path x:Name="Path_2" Width="10.6739" Height="7.81753" Canvas.Left="19.7414" Canvas.Top="19.929" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FFFFFFFF" Data="F1 M 22.9393,21.1666C 25.1893,21.1529 29.1164,20.8922 29.3039,20.9334C 29.8005,21.0424 28.6164,23.7316 26.1476,25.1718C 23.7262,26.5844 23.3768,26.8041 20.7414,26.7355"/>        <Path x:Name="Path_3" Width="24.1439" Height="12.9312" Canvas.Left="0.12096" Canvas.Top="18.8018" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FFFFFFFF" Data="F1 M 1.12678,20.5627C 1.48111,19.7491 22.9913,19.4325 23.2518,20.4012C 23.4669,21.2014 21.0644,30.4402 12.6734,30.7251C 2.88443,31.0573 1,20.8539 1.12678,20.5627 Z "/>    </Canvas></Viewbox>

--------------
As shown above, the five cups above will be exported into five viewboxes, each with a canvas. However, you will find that when using expression blend, in fact, we only need canvas. viewbox is not needed.

Export XAML

After finishing the painting, we will explain how to export these images into XAML and put them into expression blend.

In the File menu, you will see the export menu item, click it, and you will see the following dialog box:

Note that you must select the xaml wpf canvas for format to ensure that the exported XAML canvas is compatible with the WPF program. Other options do not matter.

Create a WPF Application

Next, we start to use expression blend to create a simple application. Of course, the main purpose of this program is to help us check the final effect of this button.

Click file-> new project menu in expression blend. The following dialog box is displayed:

You only need to select the WPF application. The default items can be used for all other options.

Drag a button from the toolbar on the left and put it in the default window (window1.xaml) (whatever it is). The size depends on your preferences. I will not give the reference value here.

Modify a widget Template

Right-click the button and click Edit Control Parts (Template) => edit a copy to enter the control template editor, similar to the Flash movieclip editor.

A dialog box is displayed, asking about the location of the button style. We recommend that you select Window: window next to this document. If you want to create an application, putting styles in application is also a good choice, which facilitates global style management.

The next step is very important. Don't make it easy!

First, we replace the chrome control in the button control template with the grid. The simplest way is to drag the grid from the Toolbox into the editing area. Add a contentpresenter and rectangle to the grid.

[Thinking questions] Why should I add a rectangle? (Note: we can compare the creation of buttonclip in flash with the same principle)

Next we will use the exported XAML, switch to the XAML view, copy the code of the first canvas to the current grid, and return to the design view, you should see that grid now has three level-1 subnodes: rectangle, [contentpresenter], and canvas, as shown below:

Here, we set the fill of rectange to gradient. The Code is as follows:

XAML code

   <Rectangle Stroke="#FF000000" HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="rectangle">    <Rectangle.Fill>        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">            <GradientStop Color="#FFF8F8F8" Offset="0"/>            <GradientStop Color="#FFD9D9D9" Offset="0.853"/>            <GradientStop Color="#FF5F5E5E" Offset="1"/>        </LinearGradientBrush>    </Rectangle.Fill></Rectangle>

Of course, you don't need to set it in the XAML code, just set it in the color palette.

In the red box, click Properties tab => Fill => gradient, and then configure the gradient in the gradient editor.

Now, the first step is complete. Now we can see the final effect of the button. Is it over? Of course not. We also need to add animations. When you hover the mouse over the button, the coffee gets angry, so that the coffee button will be more realistic.

Animation Effects

Press F6 to switch to the Animation Mode.

In the triggers box, click + property (add attribute trigger), change the default iscancel to ismouseover, and change the value after = to true (if not, you can modify it in The XAML view ), as follows:

You will notice that there is a red button on the left of ismouseover, which indicates that the operation is being recorded. Next, click the + button in the objects and timeline boxes to create a new storyboard, and then you can start recording the animation. By default, animation in Flash has frames. All animations are implemented based on frames in timeline. To change the animation status, you can use key frames, microsoft also draws on this experience, and WPF also has the concept of key frames. To add a key frame, click the button on the left of the time. The effect of adding all key frames is as follows:

Note that when adding these key frames, because our animations do not need to change consecutively and are independent, we must tell WPF what we mean, setting hold in for each key frame can solve this problem. You only need to right-click a key frame to see this option. As for how cigarettes swing, I have my personal preferences, but I always feel that the smoke I made seems to be a little mechanized. Well, after all, it was not the birth of an artist.

As we all know, all key frames in Flash do not perform continuous gradient by default. Unless you use motion tween, the right picture is an example of using FLASH animation.
Let the button start

After storyboard is complete, some people are very excited and can't wait to run the program, but the result is very disappointing. There is no movement at all when you move the mouse over the button, in fact, the reason is very simple-storyboard does not have a connection with the corresponding trigger. Return to the triggers box, click ismouseover = true, and add the storyboard begin and storyboard stop actions to the displayed actions when activating and actions when deactivating.

Now you can run the program and move the mouse to see the smoke effect.

To download the complete program code, click here: coffebuttonsample.zip

[Homework]: Create a play button in a gold mining game.

Requirements:

1. The button should have a texture, and a certain amount of reflective surface should be added during painting.

2. When the mouse does not move up, a golden light will be sent every certain time, which moves from left to right, as shown in the middle figure.

3. Move the mouse to the brightest position.

If you have any questions or cannot write them clearly, please correct them. Thank you for reading this article.