Android Animation - Scale up und verblassen mit Hintergrund-Übergang

Question

Ich versuche, so etwas zu tun .. Kann mir jemand in die richtige Richtung zeigen?

Gerade jetzt, ich bin ein Maßstab Animation und FadeOut Animation mit. Es sieht wie folgt aus ..

Wie ich auf diese Hintergrundfarbe zu tun .. Auch bitte beachten Sie, dass ich diese von ICS/Jellybean

Mein Code bis jetzt arbeiten wollen .. .

fade_out_animation.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <alpha 
     android:fromAlpha="1.0" 
     android:toAlpha="0.1" 
     android:duration="100" /> 
</set> 

scale_up_animation.xml

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

    <scale 
     android:duration="100" 
     android:fromXScale="0.1" 
     android:fromYScale="0.1" 
     android:pivotX="50%" 
     android:pivotY="50%" 
     android:toXScale="1" 
     android:toYScale="1" /> 
</set> 

activity_main.xml - nur der relevante Teil

<RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:gravity="center"> 

      <TextView 
       android:id="@+id/textView4" 
       android:layout_width="60dp" 
       android:layout_height="60dp" 
       android:layout_centerInParent="true" 
       android:layout_margin="8dp" 
       android:background="@drawable/shape_circle" 
       android:gravity="center" 
       android:text="004" 
       android:textColor="@color/light_gray" 
       android:textSize="18sp" /> 

      <View 
       android:id="@+id/outer_view" 
       android:layout_width="120dp" 
       android:layout_height="120dp" 
       android:layout_centerInParent="true" 
       android:visibility="invisible" 
       android:background="@drawable/shape_circle_yellow"/> 


     </RelativeLayout> 

shape_circle.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_focused="false" android:state_pressed="false" android:state_selected="false"> 
     <shape android:shape="oval"> 

      <solid android:color="@color/ash" /> <!-- Fill color --> 

      <stroke android:width="4dp" android:color="@color/medium_gray" /> <!-- Outerline color --> 

     </shape> 
    </item> 
    <item android:state_selected="true"> 

     <shape android:shape="oval"> 
      <solid android:color="@color/ash" /> <!-- Fill color --> 

      <stroke android:width="4dp" android:color="@color/yellow" /> <!-- Outerline color --> 
     </shape> 
    </item> 
    <item android:state_focused="true"> 

     <shape android:shape="oval"> 
      <solid android:color="@color/ash" /> <!-- Fill color --> 

      <stroke android:width="4dp" android:color="@color/yellow" /> <!-- Outerline color --> 
     </shape> 
    </item> 
    <item android:state_pressed="true"> 

     <shape android:shape="oval"> 
      <solid android:color="@color/ash" /> <!-- Fill color --> 

      <stroke android:width="4dp" android:color="@color/yellow" /> <!-- Outerline color --> 
     </shape> 
    </item> 
</selector> 

shape_circle_yellow.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:shape="oval"> 

    <stroke android:color="@color/yellow" 
     android:width="4dp" /> 
</shape> 

Java-Code:

textView4.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View view) { 

       final View view2 = findViewById(R.id.outer_view); 

       Animation scale_up_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale_up_animation); 
       final Animation fade_out_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade_out_animation); 

       scale_up_animation.setAnimationListener(new Animation.AnimationListener() { 
        @Override 
        public void onAnimationStart(Animation animation) { 
         view2.setVisibility(View.VISIBLE); 
        } 

        @Override 
        public void onAnimationEnd(Animation animation) { 
         view2.startAnimation(fade_out_animation); 
        } 

        @Override 
        public void onAnimationRepeat(Animation animation) { 

        } 
       }); 

       fade_out_animation.setAnimationListener(new Animation.AnimationListener() { 
        @Override 
        public void onAnimationStart(Animation animation) { 

        } 

        @Override 
        public void onAnimationEnd(Animation animation) { 
         view2.setVisibility(View.INVISIBLE); 
        } 

        @Override 
        public void onAnimationRepeat(Animation animation) { 

        } 
       }); 

       view2.startAnimation(scale_up_animation); 
      } 
     }); 

Answer 1

Der einfachste Weg, diesen Effekt auf Android zu erreichen ist einige benutzerdefinierte Ansichten zu erstellen. Zum Beispiel können wir Animation teilen in zwei Ansichten (entsprechend zu Regel zu teilen). Erste Sicht lassen Sie uns CircleButton nennen. Es wird Knopf, der in zwei Zuständen sein kann - Standard und ausgewählt.

Zweite Ansicht des CircularRippleEffect lassen nennen, und es wird während der Zustandsänderung Behälter für die Animation sein.

Wenn wir diese Ansichten zusammen kombinieren wir Wirkung wie folgt erhalten:

Also, die Frage, wie CircleButton und CircularRippleEffect Klassen zu schaffen;) Die erste ist einfach. Wir sollten View Klasse und OverrideonDraw Methode erweitern. In der Methode onDraw müssen wir zwei Kreise zeichnen (der erste repräsentiert den Hintergrund der Schaltfläche und der zweite den gelben Rahmen). Unsere OnDraw-Methode wird wie folgt aussehen:

@Override 
protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 
    canvas.drawCircle(getWidth()/2, getHeight()/2, radius, backgroundPaint); 

    canvas.drawCircle(getWidth()/2, getHeight()/2, radius, borderPaint); 
    drawCenter(canvas, textPaint, text); 
} 

Wir müssen uns daran erinnern, dass unsere backgroundPaint sollte Stil eingerichtet haben wie FILL durch Verfahren unter Verwendung von backgroundPaint.setStyle(FILL); und unsere borderPaint sollte STROKE haben Stil. Ich setze auch die richtigen Farben für diese Paint Objekte. Das letzte, was wir in der Methode onDraw machen sollten, ist das Zeichnen von Text in der Mitte der Ansicht. Ich habe drawCenter() Methode für diese Implementierung geschaffen, die in dieser Antwort von Stackoverflow gefunden werden kann https://stackoverflow.com/a/32081250/1722808

Und das ist alles, was wir sollten über CircleButton Klasse kennen. Alles andere ähnelt jeder benutzerdefinierten Ansicht.

Die CircularRippleEffect Klasse ist komplizierter. Wir zeichnen auch zwei Kreise, aber wir müssen sie sanft animieren. Deshalb hängt die Größe jeder Form von einem Fortschrittswert ab.

OnDraw-Methode aus dieser Klasse sieht wie folgt aus:

@Override 
protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 
    tempCanvas.drawColor(Color.WHITE, PorterDuff.Mode.CLEAR); 
    tempCanvas.drawCircle(getWidth()/2, getHeight()/2, outerCircleRadiusProgress * maxCircleSize, circlePaint); 
    tempCanvas.drawCircle(getWidth()/2, getHeight()/2, innerCircleRadiusProgress 
       * (maxCircleSize + ADDITIONAL_SIZE_TO_CLEAR_ANTIALIASING), maskPaint); 
    canvas.drawBitmap(tempBitmap, 0, 0, null); 
} 

Implementierung dieser ein wenig schwierig ist. Ich habe

tempCanvas.drawColor(Color.WHITE, PorterDuff.Mode.CLEAR); 

verwendet, weil ich Kreis mit transparenten Bereich innerhalb erhalten wollte. Um diesen Effekt zu erreichen, müssen wir tempCanvas und tempBitmap erstellen. Ähnliche Implementierung hier: Android canvas: draw transparent circle on image

Der letzte Schritt besteht darin, diese Ansichten zu kombinieren (wir können es in FrameLayout tun) und den Zustand dieser Ansichten in der gleichen Zeit ändern, wenn der Benutzer darauf klickt. Der gesamte Quellcode, den Sie auf meinem GitHub-Konto finden können https://github.com/ljarka/CircleAnimation

Answer 2

Um Hintergrund für die TextView festzulegen, ändern Sie den Selektor android:state_selected wie unten.

<item android:state_selected="true"> 
    <shape android:shape="oval"> 
     <solid android:color="#81fde980" /> <!-- Fill color --> 
     <stroke android:width="2dp" android:color="@color/yellow" /> <!-- Outerline color --> 
    </shape> 
</item> 

Jetzt onAnimationEnd() von scale_up_animation als

@Override 
public void onAnimationEnd(Animation animation) { 
    view2.startAnimation(fade_out_animation); 
    if(textView4.isSelected()) { 
     textView4.setSelected(false); 
     textView4.setTextColor(getResources().getColor(R.color.light_gray)); 
    } else { 
     textView4.setSelected(true);              
     textView4.setTextColor(getResources().getColor(R.color.yellow)); 
    } 
} 

Answer 3

aktualisieren Implementieren Sie den Code in Ihrer Aktivität einige Animation

private View mContentView; 
private View mLoadingView; 
private int mShortAnimationDuration; 

... 

private void crossfade() { 

    // Set the content view to 0% opacity but visible, so that it is visible 
    // (but fully transparent) during the animation. 
    mContentView.setAlpha(0f); 
    mContentView.setVisibility(View.VISIBLE); 

    // Animate the content view to 100% opacity, and clear any animation 
    // listener set on the view. 
    mContentView.animate() 
      .alpha(1f) 
      .setDuration(mShortAnimationDuration) 
      .setListener(null); 

    // Animate the loading view to 0% opacity. After the animation ends, 
    // set its visibility to GONE as an optimization step (it won't 
    // participate in layout passes, etc.) 
    mLoadingView.animate() 
      .alpha(0f) 
      .setDuration(mShortAnimationDuration) 
      .setListener(new AnimatorListenerAdapter() { 
       @Override 
       public void onAnimationEnd(Animator animation) { 
        mLoadingView.setVisibility(View.GONE); 
       } 
      }); 
} 

Verwenden Sie diesen Code für alle Komponenten in XML verblassen zu machen

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> 

    <fade> 
    <targets> 
    <target android:targetClass="android.widget.TextView" /> 
    <target android:targetClass="android.widget.FrameLayout" /> 
    <target android:targetClass="android.widget.LinearLayout" /> 
    <target android:targetClass="android.widget.ImageView" /> 
    </targets> 
    </fade> 

    </transitionSet> 

Answer 4

Versuchen Sie dies;

Animation fadeOut = new AlphaAnimation(1, 0); 
fadeOut.setDuration(1000); 
AnimationSet animation = new AnimationSet(true); 
animation.addAnimation(sizingAnimation); 
animation.addAnimation(fadeOut); 
this.setAnimation(animation); 

Answer 5

Nette Ansicht Animation Sammlung: https://github.com/daimajia/AndroidViewAnimations

Sie eine Animation wie TakingOffAnimator oder ZoomOutAnimator auf eigener Form oder Ansichten mit weißen Hintergrund auf einem grauen Blick, und mit einer Verzögerung spielt gleiche Animation verwenden können, die in positionierten Mitte der ersten Form oder Ansicht.

Answer 6

Have a look at this,

@Override 
public void onClick(View view) { 
    switch (view.getId()) { 
     case R.id.textView4: 
      ((TextView)findViewById(R.id.textView4)).setBackground(getResources().getDrawable(R.drawable.shape_circle)); 
      ((TextView)findViewById(R.id.textView4)).setTextColor(getResources().getColor(R.color.lightgrey)); 

      scale_up_animation.setAnimationListener(new Animation.AnimationListener() { 
       @Override 
       public void onAnimationStart(Animation animation) { 
        view2.setVisibility(View.VISIBLE); 
       } 

       @Override 
       public void onAnimationEnd(Animation animation) { 
        view2.startAnimation(fade_out_animation); 
       } 

       @Override 
       public void onAnimationRepeat(Animation animation) { 

       } 
      }); 

      fade_out_animation.setAnimationListener(new Animation.AnimationListener() { 
       @Override 
       public void onAnimationStart(Animation animation) { 

       } 

       @Override 
       public void onAnimationEnd(Animation animation) { 
        view2.setVisibility(View.INVISIBLE); 
        ((TextView) findViewById(R.id.textView4)).setBackground(getResources().getDrawable(R.drawable.circle_yellow)); 
        ((TextView) findViewById(R.id.textView4)).setTextColor(getResources().getColor(R.color.yellow_600)); 
       } 

       @Override 
       public void onAnimationRepeat(Animation animation) { 

       } 
      }); 

      view2.startAnimation(scale_up_animation); 
      break; 

circle_yellow.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="oval" 
     android:tint="@color/yellow_100"> 
     <stroke 
      android:width="3dp" 
      android:color="@color/yellow_600" /> 
     <solid android:color="@color/grey_500" /> 
</shape>