Relevant laws of animation movement (judge where to move according to parameters)

When writing animation related requirements , I always forget the rules of animation movement , Write how many positions to move , But the effect is not the same as expected . The reason is that I don't know much about the coordinate system and some rules .
First, understand the coordinate rules in the animation world :
First, the coordinate system of the animation is based on the upper left corner , Whether it's the upper left corner of the screen or the upper left corner of the layout itself , Anyway, it's the upper left corner . Then go down , To the right , The values are all plus one . I want to see here that you have silently mapped out a correct coordinate system .

• Absolute coordinates
  Obviously, it is based on the upper left corner of the screen , Absolute coordinates . For example, the upper left corner of a layout is （50, 50）, Let it move –> [100, 100]–>[-30, -30] Such a track （ Abbreviated ha , It means to X towards Y Move 100, 100, Again to X towards Y Move -30,-30. Move [100, 100], Move another [-30, -30], Remember to move to a certain position of the origin every time ,, For example, the first time [100, 100] It is moved to the position relative to the upper left corner of the screen 100, 100 Location , And so on , The final position is the whole screen -30,-30.
• Relative to oneself
  Relative to oneself , That is, relative to the upper left corner of your layout , The above one is an example , The same layout , The origin is (50, 50), Let it move [100, 100]–>[-30,-30], The result will be (150, 150) , Then the coordinates of the upper left corner of the layout at this time actually become 150,150. Then move （-30, -30） The result is （120,120）.
• Relative to the parent layout
  Relative to the parent layout , It's also very simple. . Suppose that the upper left coordinate of the parent layout of the current control is （20,20）, Then take the origin of the parent layout as the standard , Also move [100,100]–> [-30,-30] The result will be (120,120), (-10, -10)

See? , The coordinate system of comparison is different , The results are very different . So even if you don't know the specific rules , As long as you remember the characteristics of these three coordinate systems , When writing code , Even if the phenomenon is abnormal , It can also be pushed back , What kind of relative calculation is based on

It would be better if there were any way to let us see the basis at a glance . However, I haven't found out the rules yet ！

Attribute animation

xml Attribute animation in

First of all, there is a simple way to see the kind of relative basis used ：
The duty of "50", Indicates the use of absolute position positioning
The duty of "50%", Indicates that the use is positioned relative to the control itself
The duty of "50%p", Indicates to use the parent control positioning relative to the control

But sometimes you can't see anything , For example, below xml, Tell the truth , In this case , Have a try , Then we can deduce it in the previous way .

1

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="200">
    <objectAnimator android:propertyName="translationY" android:duration="200" android:valueFrom="500dp" android:valueTo="0dp" android:interpolator="@android:anim/bounce_interpolator" />
</set>

This situation , I also deduced it , At this time value In fact, it is relative to View Own coordinates .500 It is downward relative to the upper left corner of the layout 500dp,0 It is relative to the upper left corner of the original layout 0dp Location . In fact, it happens to be a bottom-up animation . I see! ！！

In the future, when there are new needs, we will summarize them again ！

ObjectAnimator This class

When using this kind , We usually write like this ：

ObjectAnimator animator = ObjectAnimator.ofFloat(getmRootView(), "translationX", 0, -rootWidth, -rootWidth + w);
        animator.setDuration(300)
                .setInterpolator(new AccelerateDecelerateInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    
            boolean isInvisibility = false;

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
    
                if (animation.getAnimatedFraction() >= 0.5 && !isInvisibility) {
    
                    mRightBackImage.setVisibility(View.VISIBLE);
                    mContentPanel.setVisibility(View.INVISIBLE);
                    isInvisibility = true;
                }
            }
        });
        animator.start();

No matter which relative path , It is aimed at the top right coordinate at the beginning . There is no process .
First of all, I won't talk about miscellaneous , The attribute parameters , Relative coordinates are used , Is relative to oneself
But I often forget how to write the name of the attribute , But a very convenient way is , Search for RenderNode class nSetTranslationX() Near the method , There are names corresponding to all attributes , type .