Android Left to Right slide animation

2018-12-31 12:40发布

问题:

I have three activities whose launch modes are single instance.
Using onfling(), I swing them left and right.

The problem is when I swipe right to left the slide transition is okay but when I swipe left to right, I get the transition of swiping right to left.

I know why this is happening its because I am always sending new intents. But, now I need to change the animation of sliding left to right.

I know there is a method named overridingTransitionPending(), but I do not know how to define my animation in XML.

回答1:

Use this xml in res/anim/

This is for left to right animation:

<set xmlns:android=\"http://schemas.android.com/apk/res/android\"
     android:shareInterpolator=\"false\">
  <translate android:fromXDelta=\"-100%\" android:toXDelta=\"0%\"
             android:fromYDelta=\"0%\" android:toYDelta=\"0%\"
             android:duration=\"700\"/>
</set>

This is for right to left animation:

<set xmlns:android=\"http://schemas.android.com/apk/res/android\"
     android:shareInterpolator=\"false\">
  <translate
     android:fromXDelta=\"0%\" android:toXDelta=\"100%\"
     android:fromYDelta=\"0%\" android:toYDelta=\"0%\"
     android:duration=\"700\" />
</set>

In your coding use intent like for left to right:

this.overridePendingTransition(R.anim.animation_enter,
                   R.anim.animation_leave);

In your coding use intent like for right to left

this.overridePendingTransition(R.anim.animation_leave,
                               R.anim.animation_enter);


回答2:

If you want the transition work for whole application you can create a rootacivity and inherit it in the activity you need. In Root Activity\'s onCreate call overridePendingTransition with desired direction. And onStart call overridePendingTransition with other direction if activity is resumed. Here I am giving full running code below.Correct me if I am wrong.

create this xml file on your anim folder

anim_slide_in_left.xml

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<set xmlns:android=\"http://schemas.android.com/apk/res/android\" >
    <translate
        android:duration=\"600\"
        android:fromXDelta=\"100%\"
        android:toXDelta=\"0%\" >
    </translate>
</set>

anim_slide_in_right.xml

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<set xmlns:android=\"http://schemas.android.com/apk/res/android\" >
    <translate
        android:duration=\"600\"
        android:fromXDelta=\"-100%\"
        android:toXDelta=\"0%\" >
    </translate>
</set>

anim_slide_out_left.xml

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<set xmlns:android=\"http://schemas.android.com/apk/res/android\" >
    <translate
        android:duration=\"600\"
        android:fromXDelta=\"0%\"
        android:toXDelta=\"-100%\" >
    </translate>
</set>

anim_slide_out_right.xml

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<set xmlns:android=\"http://schemas.android.com/apk/res/android\" >
    <translate
        android:duration=\"600\"
        android:fromXDelta=\"0%\"
        android:toXDelta=\"100%\" >
    </translate>
</set>

RootActivity

import android.app.Activity;
import android.os.Bundle;

public class RootActivity extends Activity {
    int onStartCount = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        onStartCount = 1;
        if (savedInstanceState == null) // 1st time
        {
            this.overridePendingTransition(R.anim.anim_slide_in_left,
                    R.anim.anim_slide_out_left);
        } else // already created so reverse animation
        { 
            onStartCount = 2;
        }
    }

    @Override
    protected void onStart() {
        // TODO Auto-generated method stub
        super.onStart();
        if (onStartCount > 1) {
            this.overridePendingTransition(R.anim.anim_slide_in_right,
                    R.anim.anim_slide_out_right);

        } else if (onStartCount == 1) {
            onStartCount++;
        }

    }

}

FirstActivity

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class FirstActivity extends RootActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView tv = (TextView) findViewById(R.id.tvTitle);
        tv.setText(\"First Activity\");
        Button bt = (Button) findViewById(R.id.buttonNext);
        bt.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent i = new Intent(FirstActivity.this, SecondActivity.class);
                startActivity(i);

            }
        });
    }

}

SecondActivity

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class SecondActivity extends RootActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView tv = (TextView) findViewById(R.id.tvTitle);
        tv.setText(\"Second Activity\");
        Button bt = (Button) findViewById(R.id.buttonNext);
        bt.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent i = new Intent(SecondActivity.this, ThirdActivity.class);
                startActivity(i);

            }
        });

    }

}

ThirdActivity

import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class ThirdActivity extends RootActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView tv = (TextView) findViewById(R.id.tvTitle);
        tv.setText(\"Third Activity\");
        Button bt = (Button) findViewById(R.id.buttonNext);
        bt.setText(\"previous\");
        bt.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();

            }
        });
    }

}

and finally Manifest

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"
    package=\"com.example.transitiontest\"
    android:versionCode=\"1\"
    android:versionName=\"1.0\" >

    <uses-sdk
        android:minSdkVersion=\"8\"
        android:targetSdkVersion=\"18\" />

    <application
        android:allowBackup=\"true\"
        android:icon=\"@drawable/ic_launcher\"
        android:label=\"@string/app_name\"
        android:theme=\"@style/AppTheme\" >
        <activity
            android:name=\"com.example.transitiontest.FirstActivity\"
            android:label=\"@string/app_name\" >
            <intent-filter>
                <action android:name=\"android.intent.action.MAIN\" />

                <category android:name=\"android.intent.category.LAUNCHER\" />
            </intent-filter>
        </activity>
        <activity
            android:name=\"com.example.transitiontest.SecondActivity\"
            android:label=\"@string/app_name\" >
        </activity>
        <activity
            android:name=\"com.example.transitiontest.ThirdActivity\"
            android:label=\"@string/app_name\" >
        </activity>
    </application>

</manifest>


回答3:

Made a sample code implementing the same with slide effects from left, right, top and bottom. (For those who dont want to make all those anim xml files :) )

Checkout out the code on github



回答4:

Also, you can do this:

FirstClass.this.overridePendingTransition(android.R.anim.slide_in_left, android.R.anim.slide_out_right);

And you don\'t need to add any animation xml



回答5:

You can overwrite your default activity animation. Here is the solution that I use:

Create a \"CustomActivityAnimation\" and add this to your base Theme by \"windowAnimationStyle\".

<!-- Base application theme. -->
<style name=\"AppTheme\" parent=\"Theme.AppCompat.Light.NoActionBar\">
    <!-- Customize your theme here. -->
    <item name=\"colorPrimary\">@color/colorPrimary</item>
    <item name=\"colorPrimaryDark\">@color/colorPrimaryDark</item>
    <item name=\"colorAccent\">@color/colorPrimary</item>
    <item name=\"android:windowAnimationStyle\">@style/CustomActivityAnimation</item>

</style>

<style name=\"CustomActivityAnimation\" parent=\"@android:style/Animation.Activity\">
    <item name=\"android:activityOpenEnterAnimation\">@anim/slide_in_right</item>
    <item name=\"android:activityOpenExitAnimation\">@anim/slide_out_left</item>
    <item name=\"android:activityCloseEnterAnimation\">@anim/slide_in_left</item>
    <item name=\"android:activityCloseExitAnimation\">@anim/slide_out_right</item>
</style>

Create anim folder under res folder and then create this four animation files:

slide_in_right.xml

<?xml version=\"1.0\" encoding=\"utf-8\"?>

<set xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <translate android:fromXDelta=\"100%p\" android:toXDelta=\"0\"
        android:duration=\"@android:integer/config_mediumAnimTime\"/>
</set>

slide_out_left.xml

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<set xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <translate android:fromXDelta=\"0\" android:toXDelta=\"-100%p\"
        android:duration=\"@android:integer/config_mediumAnimTime\"/>
</set>

slide_in_left.xml

<?xml version=\"1.0\" encoding=\"utf-8\"?>

<set xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <translate android:fromXDelta=\"-100%p\" android:toXDelta=\"0\"
        android:duration=\"@android:integer/config_mediumAnimTime\"/>
</set>

slide_out_right.xml

<?xml version=\"1.0\" encoding=\"utf-8\"?>

<set xmlns:android=\"http://schemas.android.com/apk/res/android\">
    <translate android:fromXDelta=\"0\" android:toXDelta=\"100%p\"
        android:duration=\"@android:integer/config_mediumAnimTime\"/>
</set>

This is my sample project in github.

That\'s all... Happy coding :)



回答6:

I was not able to find any solution for this type of animation using ViewPropertyAnimator.

Here\'s an example:

Layout:

<FrameLayout
android:id=\"@+id/child_view_container\"
android:layout_width=\"match_parent\"
android:layout_height=\"wrap_content\">

    <EditText
        android:layout_width=\"match_parent\"
        android:layout_height=\"wrap_content\"
        android:id=\"@+id/child_view\"
        android:gravity=\"center_horizontal\"
        android:layout_gravity=\"center_horizontal\"
    />
</FrameLayout>

Animate - Right to left and exit view:

final childView = findViewById(R.id.child_view);
View containerView = findViewById(R.id.child_view_container);
childView.animate()
  .translationXBy(-containerView.getWidth())
  .setDuration(TRANSLATION_DURATION)
  .setInterpolator(new AccelerateDecelerateInterpolator())
  .setListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        childView.setVisibility(View.GONE);
    }
});

Animate - Right to left enter view:

final View childView = findViewById(R.id.child_view);
View containerView = findViewById(R.id.child_view_container);
childView.setTranslationX(containerView.getWidth());
childView.animate()
    .translationXBy(-containerView.getWidth())
    .setDuration(TRANSLATION_DURATION)
    .setInterpolator(new AccelerateDecelerateInterpolator())
    .setListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationStart(Animator animation) {
            childView.setVisibility(View.VISIBLE);
        }
    });


回答7:

If your API level is 19+ you can use translation as above. If your API level is less than 19, you can take a look at similar tutorial: http://trickyandroid.com/fragments-translate-animation/