Andorid: Book-turning effect; andorid: Book-turning Effect

Andorid: Book-turning effect; andorid: Book-turning Effect
Content

• Project Structure
• Environment
• Demo
• References

 
The book turning effect mainly uses the method of drawing the besell curve. This article has three demos:
 
 
 
 
  
  
Simple book flip. After the next page is turned over, the current page will not disappear.
  
  
The beiser curve during book turning. Demonstrate the path and elements of the besell curve during book turning.
  
  
Complete Book turning effect.
 
 

Download Demo (To run the source code, copy the test.txt file in the compressed package to the SD root directory)Project Structure

Figure 1 project structure figure 2 Main Program Interface

 

Environment

• Windows 2008 R2 64-bit
• Eclipse ADT V22.6.2, Android 4.4.2 (API 19)
• SAMSUNG GT-8618, 3.5 inch screens (7.5x5 cm, same as Apple), Android OS 4.1.2

Demo

The book turning effect is the process of cutting and combining the current page and the next page. 3. You can see three parts: visible (green) of the current page, invisible (yellow) of the current page, that is, the back of the current page; next page (in blue ).

If you do not know the besell curve, first check the information and try the besell curve separately. In this example, from the point on the touch screen, it is basically a mathematical problem to determine the elements of the besell curve. Finally, add the effect.

Figure 3 Identification of vertices in a program

Note:

1. When you flip a book, there are two parts on the back of the page. One is to flip the source image and use Matrix mMatrix and float [] mMatrixArray to implement it. Instead, the light and shadows after the original image is flipped, colorMatrixFilter is required.

2. shadow on the edge of the book.

Figure 4 simple book flip (left: Current page; medium: Next page; Right: Previous Page)

Figure 5 guide to the learning curve (left: Current page; medium: Next page; Right: Previous Page)

In Figure 5, you can see the regions and elements of the besell curve.

Figure 6 complete book turning effect (First: current book page; Second: Next page turning; third: the next page turning disappears, the second page of the book appears; Fourth: Previous Page turning)

Besell Curve
In the field of numerical analysis, the berserx curve is a very important parameter curve in computer graphics. A higher dimension is called the besell curve. The besell triangle is a special example.
In 1962, the beiser curve was widely published by French engineer Pierre béserz, who used the beiser curve to design the car's main body. The beiser curve was initially developed by Paul de Casteljau in 1959 using the de Casteljau algorithm and obtained by using a stable numerical method.
 
 
 
  
  
Linear besell Curve
 
 
 
The path consists of the given point P0 and P1. The linear besell curve is only a straight line between two points. Its bésel Curve B (t ):
  
 
Linear besell curve demo animation, t in the range of [0, 1]  
Therefore, the linear besell curve is equivalent to linear interpolation.
 
 
 
  
  
Bizell Curve
 
 
 
The path consists of the following ):
  
 
The second presentation animation of the beiser curve, t in the range of [0, 1]
 
The TrueType shape uses a quadratic besell curve composed of the besell spline.
 
 
 
  
  
Cubic besell Curve
 
 
 
P0, P1, P2, and P3 point on a plane or in a three-dimensional space, a cubic besell curve is defined. The curve starts from P0 to P1 and starts from P2 to P3. It generally does not pass through P1 or P2; these two points only provide direction information there. The spacing between P0 and P1 determines the "length" of the curve toward P2 before it is switched to P3 ". Its bésel Curve B (t ):
  
 
Three-time besell curve demonstration animation, t in the range of [0, 1]  
Modern imaging systems, such as PostScript, Asymptote, and Metafont, use cubic besell curves composed of besell splines to describe the Curve Contour.
 
Four or five presentation animations of the besell curve, t in the range of [0, 1]  
 
 
 
  
  
Generalization
 
 
 
The n-order besell curve can be inferred as follows. To point P0, P1 ,... , Pn, and its besell Curve B (t ):
  
  
Assume n = 5, then
  
The above formula can be recursively expressed.
Expressed by point P0, P1 ,... And the bersel curve determined by Pn. Then,
  
In other words, the rank-n besell curve, that is, the interpolation between n-1 n besell curves.

References

• Wiki besell Curve
• How to calculate each element in another blog

 

Download Demo

The Android page switching effect is similar to the switching effect of pages or books to the source code or demo.

I will give you a demo in my community [Open Source China]. It integrates a lot of special effects, which have a lot of results you want, hoping to help you
Www.oschina.net/code/snippet_5597011611192

In android, the book flip effect is switched to view (that is, it is the same as the mobile phone novel reading software, but the page flip is the view)

JazzyViewPager supports the ViewPager of Fragment switching animations, including turntable, fade-in and fade-out, flip, cascade, rotation, square, flip, zoom-in and zoom-out, etc.
Project address: github.com/jfeinstein10/JazzyViewPager
Demo address: github.com/jfeinstein10/JazzyViewPager/blob/master/JazzyViewPager.apk? Raw = true
The effects are similar to those of the desktop switch between left and right, but the desktop is not implemented by ViewPager.
This is open-source. You can take a look.