WPF implements Samsung phone charging interface

First on

This effect comes from the Samsung S5 charging interface, of course, some of the details of the difference, mainly to see ideas. The purpose of this article is to exchange technology and not to direct the effect to commercial products and projects.

Battery Background

Because there are several parts inside the battery, this example uses a grid to do the background, cutting the profile of a battery with the clip attribute, which not only shows the outline of a battery, but also avoids the waves and bubbles running outside the grid.

The inside of clip is a path shape. The specific drawing is not much to say, previously written. Interested classmates look here:http://www.cnblogs.com/tsliwei/p/5609035.html

the liquid effect that represents the charge

The whole liquid is divided into two parts, the top of which is the wave, and the rectangle below. The progress value actually controls the height of the rectangle. Two controls are placed in the StackPanel, leaving the following rectangle above the top. Finally, the margin value of the bottom of the wave is 1, making it appear to have no gaps.

The waves are implemented with Bezier curves, and the following Bezier curves are introduced first

A Bezier curve has 4 points, a start point, and two control points. (This is not the case: the drawing is not accurate, because the control points are not necessarily on the curve). The path of the curve is determined by two control points.

Obviously this is a wave in itself. Using point animation to control the movement of two points up and down pointanimation the dynamic effect of the waves. Note Two animation time not the same, otherwise it looks too fake animation. Two time stagger a little bit just fine.

The wave part width is 50, the height is 5

Bubble Effect

The bubble effect here is a typical particle effect, and is the simplest one, and does not involve any complex formula calculations.

A brief introduction to the principle: here the bubbles can be seen as a circle at a certain rate of continuous rise (change the y-axis coordinates). So specify a rate, specify a distance, use frame animation compositiontarget.rendering, At each frame, add this rate to the y-axis at a distance of one frame. Then the judgment did not reach the specified distance. If it is reached, remove the circle, or continue to rise.

A bubble can be divided into three parts:

1. The inside of the battery bubbles, the size is moderate, the movement speed is slowest, the movement distance is shortest.

2. The air bubbles at the bottom of the screen are bigger, the movement is slow and the moving distance is short.

3. Small bubbles at the bottom of the screen, the smallest, moving faster, moving farther away.

Create a new class to represent the bubble information

One of the two important properties, one is the rate, and the other is the distance the bubble needs to move. These two properties determine the motion trajectory of the bubble. The third attribute is used to determine if the bubble is complete, and the fourth attribute is to add a reference to the bubble, so that it is convenient to control the bubbles in the background.

Defines three sets that hold three-part bubble information.

Within the frame rendering event, traverse three collections. Let each bubble in the collection Move up (canvas.settop) to determine if the bubble has moved the specified distance, yes, the bubble is removed from the page, and the collection also removes the bubble information. Determines whether the collection count is less than the specified number, If it is less than, add bubbles to the page, and the collection adds the bubble information.

Draw Bubbles

For the sake of beauty, I drew a bubble model myself and used it on a large bubble. Small bubbles are used directly by the ellipse, because even with the model, because it is too small, it can not be seen. In fact, large bubbles are not really visible. But since it's written, it's not very nice.

First, the bubble is a viewbox. Easy to scale.

The contour is a positive circle, fill gives a gradient brush, outward deepening, in the most outer ring 0.85-1 part is the deepest. Three points of R are all 20,b are 10, the green part of the G is reduced in turn, respectively 240,150,100.

The crescent on the right is a path, giving a blurring effect with a radius of 10. Fill is translucent white. The drawing of a crescent is two arcs, with the same starting and ending points, with different radii.

The highlight in the upper left corner is the two ellipse, just like a crescent. The radius is a blur effect of 10. Fill is translucent white.

SOURCE Download: Samsung mobile phone battery charging effect. rar

code word is not easy, welcome reprint, but please indicate this article link

Recommend a good BLEND,WPF,SL exchange group

Group number: 152049269

Welcome to the Great God, Meng new enthusiastic to join, exchange discussion, common progress!

WPF implements Samsung phone charging interface