Study notes, not original, I do not know where original

Through the custom View+ property animation to achieve a moving fish

Analysis: 1. Draw a fish 2. The fish moves in place 3

Draw a fish

Fish is divided into: head (round) + body (two straight lines + two Bezier curves) + fin (one straight line + one Bezier) + tail (two triangles) + arthropod *2 (trapezoid + two circles)

Let’s draw a frame with the center of mass of the fish as the center of the frame

  1. Let’s set the coordinates of the center of mass of the fish

4.19 times the radius of the head circle, this is actually self-determined, 5f, 6F is fine, just changing the length of the fish, using the radius of the head as the initial unit helps to change the size of the whole fish.

  1. Since the center of gravity coordinates are set, the entire fish’s mother layout ImageView is twice the height, width and center of gravity.

  1. The point! Find the coordinates of a point. I have a point, I have an Angle, I have a length. Find the coordinates of a point

Junior High School Knowledge:

Therefore, it can be concluded that the input point, the length of the two points, and the Angle to the X-axis. Returns the value of a coordinate

  1. Solve each fish body according to this equation.

Define brush

mPaint.setDither(true); shake

mPaint.setAntiAlias(true); anti-aliasing

Draw the head of the fish: find the center of the head, enter: center of gravity, half of the body length, the direction of the fish (default 180 with the center of gravity direction)

Painting fin

The fin is a straight line + a second order Bezier curve, so the key is to find three points: left fin point, right fin point, Bezier control point

Through the center of the fish head, the distance is 0.9 * R and the Angle is 110. = Right fin point, left fin point = right fin point, distance, Angle -180 Bezier control point = (this is completely on your own, only affect the size of the fin) Right fin point, distance * 1.8f, Angle 115 Cubic-bezier.com/#.17,. 67, 8…

Now that you have all three points, draw the fin: reset the other drawings before drawing: mpath.reset (); Then mpath.moveto () moves to the first point mpath.lineto () draws the line mpath.quadto () draws the second order Bezier curve, takes the second point, the third point and finally Canvas. DrawPath (mPath,mPaint); I can just draw that last point and I don’t have to close it, the system closes it.

The other parts are pretty much the same, so based on that formula, you figure out another point from the reference point, and then you figure out the points of each part, and then you just draw the line

Let’s figure out the points

Then mpath.reset (), mpath.moveto, mpath.lineto, canvas. DrawPath

Draw the body

We just have to figure out these 6 points

Fish bobbing in place

Fish wiggle in place requires the property animation ValueAnimator

ValueAnimator

Attribute animation that gives a value that changes all the time, e.g. : ValueAnimator.offloat (0,1f); I’m going to change a float from 0f to 1f

SetRepeatCount sets the number of times to be repeated. SetRepeatMode sets the repeating pattern. SetInterpolator sets Interpolator Interpolator. Acceleration in deceleration, acceleration, uniform velocity, periodic motion, first retreat and then acceleration, last bounce, etc. You can customize it if you don’t have enough.

To get the current value from the listener, run invalidateSelf(); Set redraw

By changing the Angle of the head by this value, the fish can swing (for example, head 5 degrees, arthropod 1 10 degrees, arthropod 2 20 degrees) so that the different magnitudeof the fish will move. The tail is done by changing the size of the triangle, and the amplitude pattern should be the same as arthropod 2. The tail is driven by the upper segment (arthropod 1) to move (arthropod 2), and it moves in a periodic manner and in terms of periodic motion, it’s smooth. Sines and cosines look exactly like this

So instead of animating 0 to 1f, I can do sine, which is smoother. Cos theta is just one more quadrant than sine theta, so arthropod two can just be carried by arthropod one.

Fish swimming

The entire fish is defined in the FishDrawable. Use FishRelativeLayout, addView to add the ImageView into the FishDrawable

Click the water ripple

Record the clicks (X,Y) in onTouchEvent, and then animate the circle radius and transparency according to the properties

ObjectAnimator

ObjectAnimator extends ValueAnimator Has the same effect. It changes an property from an X value to a Y value. Can not write listening addListener input parameter 1. To change the object, 2. Value to change (must implement set method), 3. initial value, 4. end value — (or Path)

In essence, the set and get methods of the second parameter are changed using reflection. So make sure you implement set and get, or you get an error



The trajectory of the fish

The fish’s trajectory is a third-order Bessel curve, so the key is to identify four points

Given three points to find the Angle:

The point is the Angle of control point two

And to figure out the Angle between them, we also have to figure out the Angle between them and the X-axis is equal to 1

Float direction = (a.y-b.y)/(A.x-b.x) - (O.y-b.y)/(O.x-b.x); float direction = (a.y-b.y)/(A.x-b.x) - (O.y-b.y)/(O.x-b.x);

Complete each point:

Last swim:

Path.cubicto () third-order Bessel curve formula

Change the XY coordinates of the ImageView by animating the ObjectAnimator property.

Through fishDrawable. SetFrequence (3 f) fish at the time of swimming exercise faster

The orientation of the head, turn around

The direction of the head is equal to the direction of the tangent to the trajectory, so that it turns smoothly. The pathMeasure.getPostan () tanα value is obtained by taking the percentage of the curve executed, and then converted to the Angle

complete