WPF enables SamSung mobile phone charging interface, while wpf SamSung mobile phone charging

WPF enables SamSung mobile phone charging interface, while wpf SamSung mobile phone charging

First

This effect comes from the charging interface of Samsung S5. Of course, there are some differences in details. The main purpose of this article is to exchange technical information and do not apply the effect directly to commercial products and projects.

 

Battery background

Because there are several parts inside the battery, a Grid is used as the background in this example. The Clip attribute is used to cut the outline of a battery, which not only shows the outline of a battery, it can also prevent the water waves and bubbles from running outside the Grid.

Inside Clip, is a Path shape. The specific painting method is not much said, previously written. Interested students look here: http://www.cnblogs.com/tsliwei/p/5609035.html

 

 

Indicates the liquid effect of power.

The entire liquid is divided into two parts: the above is a wave, and the below is a rectangle. the progress value actually controls the height of the rectangle. place the two controls in the StackPanel to bring the following rectangle to the top. finally, the value of Margin at the bottom of the wave is-1, so that it looks like there is no gap.

Wave is implemented using the besell curve. First, we will introduce the besell curve.

The beiser curve has four points, the start point and the end point, and two control points. (this can be left blank: the painting is not accurate, because the control point is not necessarily on the curve ). two control points are used to determine the curve path.

Obviously, this is a wave. point animation PointAnimation is used to control the up and down movements of two points, and the dynamic effect of the waves is achieved. make sure that the animation time is not the same. Otherwise, the animation looks too fake. it would be nice to stagger the two times a little bit.

The width of the wave part is 50 and the height is 5.

 

Bubble Effect

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

A Brief Introduction of the principle: the bubble here can be seen as the circle rising at a certain speed (changing the Y axis coordinates ). so define a rate, define a distance, and use the Frame Animation CompositionTarget. rendering: the distance at which the speed is moved by one frame on the Y axis of each frame. and then judge whether it has reached the specified distance. if it reaches, remove the circle. Otherwise, it continues to rise.

Bubbles can be divided into three parts:

1. bubbles inside the battery. moderate size, slowest movement speed, and shortest distance.

2. Large bubbles at the bottom of the screen, large heads, slow movement speed, and short moving distance.

3. small bubbles at the bottom of the screen, with the smallest head, fast movement speed, and long distance.

Create a new Class to indicate bubble Information

There are two important attributes: Speed and bubble distance. these two attributes determine the trajectory of bubbles. the third attribute is used to determine whether a bubble has completed its mission. The fourth attribute is to add a reference to the bubble so that you can easily control the bubble in the background.

Defines three sets to store bubble information.

In a frame rendering event, traverse three sets. move every bubble in the set up (Canvas. setTop) to determine whether the bubble has moved the specified distance. If yes, the bubble is removed from the page, and the Set also removes the bubble information. determines whether the Count of the set is smaller than the specified number. If it is smaller than, add bubbles to the page and add bubble information to the set.

 

Draw bubbles

For the sake of beauty, I drew a bubble model and used it on the bubble. small bubbles use an ellipse directly, because the model is used, because it is too small, it cannot be seen. in fact, big bubbles are not quite visible. but now that I have written it, let's introduce it. the painting is not very nice. sorry.

First, this bubble is a ViewBox for convenient scaling.

The contour is a positive circle. Fill provides a gradient painting brush, which deepens outward. the deepest part is in the outermost circle 0.85-1. the R values of the three vertices are 20, B values are 10, and the Green G values are reduced in sequence, respectively 240,150,100.

The crescent in the lower right side is a Path, giving a blur effect with a radius of 10. Fill is translucent white. The Crescent method is two arcs with the same start point and end point and different radius.

The highlight of the upper left corner is two ovans, the same as the crescent moon. The radius is 10 and the Fill is translucent white.

Source code download: Vivo mobile phone battery charging efficiency .rar

The code word is not easy. You are welcome to repost it, but please note the link to this article

We recommend a good Blend, Wpf, and sl Communication Group.

Group number: 152049269

Thank you!