Wie Scale-up-Animation auf gemeinsam genutztes Element auf Aktivitätsübergang

Question

implementieren Ich möchte Scale-up-Animation auf gemeinsame Elemente auf Aktivitätsübergänge wie in diesem link implementieren.

Aber konnte keine gute Referenz für diesen spezifischen Effekt finden und wie man es implementiert. Ist das ein benutzerdefinierter Übergang oder ein Standard? Vielleicht könnte jemand helfen oder ein ausführlicheres Tutorial dazu als offizielle Dokumentation posten.

Answer 1

Lassen Sie mich Ihnen eine kurze Anleitung geben hier :)

Was Sie wirklich wollen, ist ein Gemeinschafts-Element Übergang zwischen zwei Aktivitäten. Sie werden keine Ansichten teilen, beide Aktivitäten haben unabhängige View Trees. Aber wir geben die Informationen über das freigegebene Element wie seine Ansicht und seine Größe an die neue Aktivität weiter.

Während des Starts macht die neue Aktivität alle Ansichten transparent und lokalisiert die gemeinsame Ansicht. Er ändert seine Attribute so, dass sie mit den Werten übereinstimmen, die von der Startaktivität übergeben wurden, und macht diese einzelne Ansicht sichtbar. Anschließend werden Animationen ausgeführt, um die freigegebene Ansicht von diesem Status in ihre natürliche Position im Layout zu überführen. Während der Übergang fortschreitet, werden der Fensterhintergrund und der Rest der nicht gemeinsam genutzten Elemente langsam eingeblendet, bis sie vollständig undurchsichtig sind. All dies geschieht automatisch.

<ImageView 
... 
android:transitionName="@string/transition_photo" /> 

sowohl in der Aktivität Layout:

nun eine Ansicht als Shared dieser Eigenschaft zu markieren.

Jetzt, während der neue Aktivität aus alter Aktivität ausgehend definiert eine Übergangsanimation:

Bundle bundle = ActivityOptions.makeSceneTransitionAnimation(
            this, 
            sharedView, 
            sharedView.getTransitionName()) 
           .toBundle(); 
startActivity(intent,bundle); 

Sie können auch mehrere Ansichten für den Übergang geben. Sie können sogar freigegebene Ansichten zwischen verschiedenen Anwendungen wechseln.

die Animation wird standardmäßig verwendet bewegt:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> 
<changeBounds/> 
<changeTransform/> 
<changeClipBounds/> 
<changeImageTransform/> 
</transitionSet> 

Sie können aber auch Ihre benutzerdefinierten Animationen in styles.xml:

<style name="AppTheme.Details"> 
    <item name="android:windowSharedElementEnterTransition">@transition/shared_photo</item> 
</style> 

Hier ist ein funktionierendes Beispiel für gemeinsames Element Übergang wie oben gezeigt: https://github.com/anshchauhan/SharedElementTransition

Answer 2

Erstellen Sie Ihre Animation in xml und Nutzung folgenden Code:

protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
    overridePendingTransition(animation_in, animation_out); 
} 

res/Anim/in.xml

<?xml version="1.0" encoding="utf-8"?> 
    <set xmlns:android="http://schemas.android.com/apk/res/android" 
    android:interpolator="@android:anim/linear_interpolator"> 

    <scale 
     android:duration="700" 
     android:fillBefore="false" 
     android:fromXScale="0.0" 
     android:fromYScale="0.0" 
     android:toXScale="1.0" 
     android:toYScale="1.0" /> 
</set> 

res/Anim/out.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android" 
    android:interpolator="@android:anim/linear_interpolator"> 

    <scale 
     android:duration="700" 
     android:fillBefore="false" 
     android:fromXScale="1.0" 
     android:fromYScale="1.0" 
     android:toXScale="0.0" 
     android:toYScale="0.0" /> 
</set> 

Answer 3

https://www.youtube.com/watch?v=CPxkoe2MraA

In diesem Video wird erläutert, wie Sie dasselbe Ergebnis erzielen. Die Hauptidee ist

1) Benutzerdefinierte Standardanimation zu überschreiben. Hier bedeutet 0, dass standardmäßig keine Animation abgespielt wird.

overridePendingTransition(0, 0); 

2) Übersetzen und die zweite Aktivität Bild auf Ihrem Gridview-Bild skalieren, so dass er sie vollständig überlappt und dann die Animation Aktivität des Imageview gelten in seine ursprüngliche Position und Skala zu bewegen.

Haben Sie auch einen Blick auf Geteilt Element Aktivität Transition - https://guides.codepath.com/android/Shared-Element-Activity-Transition

Answer 4

1: view-Spezifikationen finden:

int[] location = new int[2]; 
view.getLocationOnScreen(location); 

int viewHeight = view.getHeight(); 
int viewWidth = view.getWidth(); 

2: eine transparente Aktivität erstellen und Top-Werte für neue Aktivität passieren

3: fügen Sie Ihre Ansicht zu neuer Aktivität hinzu und machen Sie so etwas:

LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) yourView.getLayoutParams(); 
layoutParams.topMargin = location[1]; 
layoutParams.leftMargin = location[0]; 
layoutParams.height = viewHeight; 
layoutParams.width = viewWidth; 
yourView.setLayoutParams(layoutParams); 

4: eine Animation wie @Neo Antwort verwenden für die Skalierung yourView Bildschirm zu füllen