This article is published by Netease Cloud Community authorized by Zou Qiwen.
In the PC version of MailMaster, the designer came up with a nice idea: when you send a letter, a plane will appear and fly from the writing center to the progress destination.
Additional requirements: 1, flight curve, the aircraft first accelerate, then decelerate to reach the end 2, mid-flight, need to change the aircraft to 3, mid-flight, the aircraft gradually smaller experience
Implementation method:
1. Flight curve
We chose a quadratic Bessel curve because it’s simple and computable.
Mathematical formula: B (t) = (1 – t) ^ 2 + 2 * * P0 t * (1 – t) * (P1 + t ^ 2 * (P2), t = [0, 1]
(The picture is from the network, here is to explain clearly)
Given takeoff point P0, destination point P2, takeoff Angle (or slope, tangent line P0P1), landing Angle (or slope, tangent line P1P2), find P1 to convert the takeoff Angle (k=tan(θ)) into slope K1, landing Angle into slope k2, P0.y = k1 * p0.x + b1; P1.y = k1 * P1.x + b1; P2.y = k2 * P2.x + b2; P1.y = k2 * P1.x + b2; At this point, we have P1 coordinates. (Adjustable Angle (or K1, K2) to meet the actual requirements)
The curve is derived, but how does the plane speed up and then slow down?
Notice that the formula for t ranges from 0 to 1, and we can do that by having the plane cover most of the distance in a fraction of the time ahead and a fraction of the distance in a fraction of the time behind. In order to adjust flexibly and the total time is fixed, we choose a simple method to divide time and artificially construct a time curve with acceleration at the front and deceleration at the back.
Example: const int kPiece [] = 10,20,30,45,65,90,70,45,40,35,30,25,22,20,19,18,17,16,15 {}; Set the timer to 10ms and calculate t=kPiece(0~ I)/kPiece(0~N) * t every 10ms. KPiece (0 to I) is the sum of the preceding I items, kPiece(0 to N) is the sum, and T is the fixed total time
2. Aircraft orientation
The nose of the plane should change direction with the curve. Obviously, this orientation is the tangent of the curve. The right way to find a tangent line is to take a derivative. In this case, we chose a simple method: remember the current point and the previous point, then calculate the slope at point 2 and convert it to an Angle.
3. Plane size
There are no strict requirements for aircraft size change, which can take a linear change from 1.0 to 0.25 (depending on the size of the material) within the total time T, and end up changing at the same time with the curve.
Pay special attention to, I take off into the slope Angle, in the computer world, the coordinate system and the mathematical inconsistencies, X, and Y instead, so the Angle may be negative (such as when the initial flight left) II, the plane toward, slope into perspective, from A to B, B relative to A position is available in four quadrant, Therefore, the Angle may have a negative Angle, and at the same time, the plane in the material also has an Angle, so when drawing, pay attention to correct Angle III, the Angle of the plane landing may be incorrect (such as landing from above). In practice, this problem is not obvious because the aircraft is smaller and faster, and the landing Angle is adjusted. The cubic Bezier curve can be considered to ensure that the landing Angle of the aircraft is constant
Gdiplus draws aircraft
Gdiplus::Graphics g(dc); Gdiplus::PointF center(cx / 2, cy / 2); G ranslateTransform(center.x, center.y); G.rotatetransform (angle_); / / rotation Angle g.S etInterpolationMode (Gdiplus: : InterpolationModeHighQualityBilinear); g.ScaleTransform(scale_, scale_); // zoom g.ranslateTransform (-center.x, -center.y); g.DrawImage(plane_.get(), 0, 0); // Draw a pictureCopy the codeFree access to verification code, content security, SMS, live on demand experience package and cloud server packages
For more information about netease’s technologies, products and operational experience, please visit netease Cloud Community.
What is a DDoS attack? [Recommended] Foxman, a Mock solution based on microcore architecture