Table of contents
What is Interpolator?
In layman's terms, Interpolator (interpolator) is responsible for controlling the rate of animation change, so that basic animation effects can change at various rates such as constant speed, acceleration, deceleration, and parabolic rate.
Entry: Android Property Animation (Property Animation) Use detailed
entry: android animation - Property Animation (Property Animation)
In the animation development process, we often need to use interpolators to meet our animation design needs. However, the official interpolator does not meet all needs, so we need a custom interpolator.
What are the official interpolators?
The official built-in 9 interpolators: LinearInterpolator (linear interpolator: constant speed), AccelerateInterpolator (acceleration interpolator: the initial speed is slow, and then faster and faster), DecelerateInterpolator (deceleration interpolator: the initial speed is fast, and then more and more slow) and so on.
If you want to know more about the official interpolators, you can go to the blogs of the following brothers.
Let’s talk about attribute animation again——Introduction and custom Interpolator Interpolator
Android attribute animation common methods and interpolator
android animation series (2) - interpolator Interpolator
The animation effects of several commonly used Interpolators (interpolators)
are simply carried here The first four:
1.Linear Interpolator / linear interpolator
Formula: y=kt
(1) The derivative of any physical quantity with respect to time is the rate of change of the physical quantity with time . The derivative of displacement with respect to time is velocity, and the derivative of velocity with respect to time is acceleration.
(2) The geometric meaning of the derivative f'(x0) of the function y=f(x) at the point x0: it indicates the slope of the tangent line of the function curve at the point P0(x0, f(x0)) (the geometric meaning of the derivative is the The slope of the tangent line of the function curve at this point).
According to the above, you can directly derive the derivative, the slope = k, and it will always remain unchanged, driving at a constant speed.
It is also possible to observe the slope of the tangent to the image at each point.
2.Accelerate Interpolator / acceleration interpolator
Formula: y=t^(2f) Description: Acceleration parameter. The larger f is, the slower the initial speed, but the speed is getting faster and faster.
3.Decelerate Interpolator / deceleration interpolator
Formula: y=1-(1-t)^(2f) Description: Acceleration parameter. The larger f is, the faster the initial speed, but the speed is getting slower and slower
4.Accelerate Decelerate Interpolator / Accelerate first and then decelerate the interpolator
Formula: y=cos((t+1)π)/2+0.5
Verification of the official interpolator AccelerateDecelerate Interpolator
1. Code
ValueAnimator mAnimator = ValueAnimator.ofFloat(1.0f, 5.0f).setDuration(800);
mAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
Log.e("Rachel_test", "controlLeft: " + animation.getAnimatedValue());
}
});
mAnimator.start();
2.ctrl+alt copy data
1.0
1.0
1.0772363
1.1739753
1.2324686
1.3029796
1.3819662
1.4690335
1.5582927
1.6597944
1.7679892
1.8758329
1.9954689
2.1201217
2.249169
2.3745017
2.5102313
2.6484075
2.7805316
2.9214802
3.0628214
3.203849
3.3361187
3.4745245
3.6105597
3.7362492
3.8657446
3.9909172
4.1111403
4.219599
4.328505
4.430776
4.520812
4.6087513
4.688656
4.7601266
4.8195605
4.8736496
4.9183817
4.9518337
4.9777727
4.9938345
4.9999385
5.0
3. Copy data to excel
=A2-A1
4. Results
It is obvious that this is an interpolator that accelerates and then decelerates
Practice: Project Background
Miss UI let me realize an animation similar to the animation below.
The rate requirements for animation changes are as follows. Obviously, the rate of change with clear requirements cannot use the official interpolator.
PCR Animation Instructions
Draw an animation curve that satisfies the design
Interpolator based on cubic Bezier curves
public class AnimationActivity extends Activity {
........
/**
* 组合动画
*/
private void bine() {
//welcomeTv
PropertyValuesHolder welcomeTv_1 = PropertyValuesHolder.ofFloat("scaleX", 0.98f, 1f);
PropertyValuesHolder welcomeTv_2 = PropertyValuesHolder.ofFloat("scaleY", 0.98f, 1f);
ObjectAnimator welcomeAnimator1 = ObjectAnimator.ofPropertyValuesHolder(welcomeTv, welcomeTv_1, welcomeTv_2);
//设置自定义插值器
welcomeAnimator1.setInterpolator(new EaseCubicInterpolator(0.33f, 0f, 0.67f, 1f));
welcomeAnimator1.setDuration(1100);
ValueAnimator welcomeAnimator2 = ObjectAnimator.ofFloat(this.welcomeTv, "alpha", 0f, 1f);
welcomeAnimator2.setInterpolator(new EaseCubicInterpolator(0.63f, 0f, 0.76f, 1f));
welcomeAnimator2.setDuration(1100);
//pcrTv
ValueAnimator pcrAnimator = ObjectAnimator.ofFloat(this.pcrTv, "alpha", 0f, 1f);
pcrAnimator.setInterpolator(new EaseCubicInterpolator(0.76f, 0f, 0.8f, 1f));
pcrAnimator.setDuration(500);
pcrAnimator.setStartDelay(1100);
//blueImg
ValueAnimator blueAnimator = ObjectAnimator.ofFloat(this.blueImg, "alpha", 0f, 1f);
blueAnimator.setInterpolator(new EaseCubicInterpolator(0.76f, 0f, 0.8f, 1f));
blueAnimator.setDuration(500);
blueAnimator.setStartDelay(1200);
//grayImg
ValueAnimator grayAnimator1 = ObjectAnimator.ofFloat(this.grayImg, "alpha", 0f, 1f);
grayAnimator1.setInterpolator(new EaseCubicInterpolator(0.6f, 0f, 0.52f, 1f));
grayAnimator1.setDuration(1100);
grayAnimator1.setStartDelay(1000);
ValueAnimator grayAnimator2 = ObjectAnimator.ofFloat(this.grayImg, "rotation", -200f, 0f);
grayAnimator2.setInterpolator(new LinearInterpolator());
grayAnimator2.setDuration(1100);
grayAnimator2.setStartDelay(1000);
AnimatorSet animSet = new AnimatorSet();
animSet.play(welcomeAnimator1).with(welcomeAnimator2).with(pcrAnimator).with(blueAnimator).with(grayAnimator1).with(grayAnimator2);
animSet.start();
}
}
/**
* 缓动三次方曲线插值器.(基于三次方贝塞尔曲线)
*/
public class EaseCubicInterpolator implements Interpolator {
private final static int ACCURACY = 4096;
private int mLastI = 0;
private final PointF mControlPoint1 = new PointF();
private final PointF mControlPoint2 = new PointF();
/**
* 设置中间两个控制点.<br>
* <p>
* 在线工具: http://cubic-bezier.com/<br>
*
* @param x1
* @param y1
* @param x2
* @param y2
*/
public EaseCubicInterpolator(float x1, float y1, float x2, float y2) {
mControlPoint1.x = x1;
mControlPoint1.y = y1;
mControlPoint2.x = x2;
mControlPoint2.y = y2;
}
@Override
public float getInterpolation(float input) {
float t = input;
// 近似求解t的值[0,1]
for (int i = mLastI; i < ACCURACY; i++) {
t = 1.0f * i / ACCURACY;
double x = cubicCurves(t, 0, mControlPoint1.x, mControlPoint2.x, 1);
if (x >= input) {
mLastI = i;
break;
}
}
double value = cubicCurves(t, 0, mControlPoint1.y, mControlPoint2.y, 1);
if (value > 0.999d) {
value = 1;
mLastI = 0;
}
return (float) value;
}
/**
* 求三次贝塞尔曲线(四个控制点)一个点某个维度的值.<br>
* <p>
* 参考资料: <em> http://devmag.org.za/2011/04/05/bzier-curves-a-tutorial/ </em>
*
* @param t 取值[0, 1]
* @param value0
* @param value1
* @param value2
* @param value3
* @return
*/
public static double cubicCurves(double t, double value0, double value1,
double value2, double value3) {
double value;
double u = 1 - t;
double tt = t * t;
double uu = u * u;
double uuu = uu * u;
double ttt = tt * t;
value = uuu * value0;
value += 3 * uu * t * value1;
value += 3 * u * tt * value2;
value += ttt * value3;
return value;
}
}
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:background="#FFF4F5F9"
android:layout_height="match_parent">
<TextView
android:id="@+id/welcome_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="384dp"
android:layout_marginLeft="384dp"
android:layout_marginTop="310dp"
android:text="Welcome to"
android:textColor="#ff333333"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:alpha="0"
android:id="@+id/pcr_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Real-time PCR System"
android:textColor="#80666666"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="@id/welcome_tv"
app:layout_constraintTop_toBottomOf="@id/welcome_tv" />
<ImageView
android:alpha="0"
android:id="@+id/blue_img"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="628dp"
android:layout_marginTop="278dp"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/circle_blue" />
<ImageView
android:id="@+id/gray_img"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="484dp"
android:layout_marginTop="260dp"
android:layout_width="190dp"
android:alpha="0"
android:layout_height="190dp"
android:src="@mipmap/circle_grey" />
</android.support.constraint.ConstraintLayout>
The little water monster with poor Java foundation is learning. Please point out any mistakes, let's work together.