WPF imitation Samsung mobile phone charging interface Implementation Code _c# tutorial

First on the effect chart

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

Battery background

Because there are several parts inside the battery, this example uses a grid to do the background, using the clip attribute to cut out the contour of a battery, so as not only to show the contour of a battery, but also to avoid water waves and bubbles running out of the grid.

Inside of the clip, is a path shape. The concrete drawing is not much said, has written before. Interested students look here: http://www.cnblogs.com/tsliwei/p/5609035.html

Represents the liquid effect of electricity

The whole liquid is divided into two parts, the above is a wave, the following is a rectangle. The progress value actually controls the height of the rectangle. Two controls are placed in the StackPanel, and the bottom rectangle is top. The margin value of the wave at the end is-1, making it appear to have no clearance.

The wave is implemented with Bezier curves, first introducing the lower Bezier curve

Bezier curves have 4 points, beginning endpoints and two control points. (This bracket does not look: the drawing is not accurate because the control point is not necessarily on the curve). The path of the curve is determined by two control points.

Obviously the image above is a wave in itself. Use Point animation PointAnimation control two points up and down motion has the dynamic effect of the wave. Note that two animation times are not the same, otherwise it looks too fake. Two time to 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 kind, and does not involve any complex formula calculations.

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

Bubbles can be divided into three parts:

1. Air bubbles inside the battery. Moderate size, slowest moving speed, shortest moving distance.

2. The atmosphere bubble at the bottom of the screen is larger, the moving speed is slower, the moving distance is shorter.

3. The small bubble at the bottom of the screen, the smallest, moving faster, moving farther away.

Creates a new class to represent the bubble information

One of the two important properties, one is the rate, and the other is the distance that bubbles need to move. These two properties determine the trajectory of the bubble. The third attribute is used to determine whether the bubble has completed its mission, and the fourth attribute is to add a reference to the bubble so that it is convenient to control the bubbles

Defines three sets for storing three-part bubble information.

Within the frame rendering event, iterate through three sets. Let each bubble in the collection Move up (canvas.settop) to determine if the bubble has moved the specified distance, yes. Removes the bubble from the page, and the collection 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 bubble information.

Draw Bubbles

For the sake of beauty, I drew a bubble model of my own, it's used in big bubbles. The oval is used directly for small bubbles, because even with the model, because it is too small, it is not visible. In fact, the big bubbles are not very visible. But now that you've written it, let's introduce it. It's not very nice.

First of all, this bubble is a viewbox. Easy to scale.

The contour is a positive circle, and fill gives a gradient brush, which is deepened outward and is the deepest part of the 0.85-1 in the outermost ring. The three-point R is all 20,b 10, and the green part G decreases by 240,150,100.

The crescent on the right is a path that gives a blurry effect of a radius of 10. Fill is translucent white. The way the crescent is painted is two arcs, with the same starting and ending points and different radii.

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

SOURCE Download: Samsung mobile phone battery charging effect. rar

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.