2016-02-27 6 views
8

Ich versuche, den Morphing-Effekt zu erzielen, wenn der Benutzer auf MyButton klickt, sollte das Bild in der ImageView von Pfeil zu Häkchen wechseln. Und wenn er erneut klickt, sollte sich der Prozess umkehren: Das Häkchen sollte in Pfeil umgewandelt werden.Umkehren der Morphing-Animation von Pfeil zu Häkchen

Dies ist, was ich getan habe:

animated_vector.xml:

<?xml version="1.0" encoding="utf-8"?> 
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/vector_upvote"> 

    <target 
     android:name="rotationGroup" 
     android:animation="@anim/rotate_a_to_b" /> 

    <target 
     android:name="upvote" 
     android:animation="@animator/animator_upvote_to_checkmark" /> 
</animated-vector> 

animator_upvote_to_checkmark.xml:

<objectAnimator 
    android:duration="250" 
    android:propertyName="pathData" 
    android:valueFrom="@string/svg_upvote" 
    android:valueTo="@string/svg_checkmark" 
    android:valueType="pathType" 
    android:repeatMode="reverse" /> 

Und das ist, wie ich die Animation spielen:

  Drawable drawable = upVote.getDrawable(); 
      if (drawable instanceof Animatable) { 

       ((Animatable) drawable).start(); 
      } 

Dies verwandelt den Pfeil in ein Häkchen, wie kann ich den Prozess umkehren?

Antwort

16

wenn Ihre Ansicht ist checkable und auch Ihre minsdk > 21 können Sie versuchen, StateListAnimator mit AnimatedVectorDrawable verwenden, aber weil die appcompat jetzt vectorDrawable unterstützt und AnimatedVectorDrawable und hat auch eine Einschränkung alle DrawableContainers zur Verwendung Ich nehme nicht oben Ansatz.

Also lassen Sie mich Ihnen sagen, was funktionieren kann:

DrawableContainers die andere Drawables Ressourcen verweisen, die nur eine Vektor Ressource enthalten. Zum Beispiel eine StateListDrawable, die verweist auf andere Dateien, die einen Vektor enthalten.

von Chris Banes

Um zu erreichen, dass ich benutzerdefinierte ImageView schaffen werde und jedes Mal darauf geklickt wird, müssen Sie morph Funktion aufrufen entsprechende vectorAnimatorDrawable auszuführen.

So Code und Demo:

enter image description here

public class ArrowToCheckMarkMorphingImageView extends ImageView { 

    private AnimatedVectorDrawable mArrowToCheckMark; 
    private AnimatedVectorDrawable mCheckMarkToArrow; 
    private boolean mIsShowingCheckMark; 
    public ArrowToCheckMarkMorphingImageView(Context context) { 
     super(context); 
     init(); 
    } 

    public ArrowToCheckMarkMorphingImageView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     init(); 
    } 

    public ArrowToCheckMarkMorphingImageView(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
     init(); 
    } 

    public ArrowToCheckMarkMorphingImageView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { 
     super(context, attrs, defStyleAttr, defStyleRes); 
     init(); 
    } 

    public void init(){ 
     mIsShowingCheckMark = false; 
     mArrowToCheckMark = 
       (AnimatedVectorDrawable)getContext().getDrawable(R.drawable.arrow_to_checkmark); 
     mCheckMarkToArrow = 
       (AnimatedVectorDrawable)getContext().getDrawable(R.drawable.checkmark_to_arrow); 
     setImageDrawable(mArrowToCheckMark); 
    } 

    public void morph(){ 
     final AnimatedVectorDrawable drawable 
       = mIsShowingCheckMark ? mCheckMarkToArrow : mArrowToCheckMark; 
     setImageDrawable(drawable); 
     drawable.start(); 
     mIsShowingCheckMark = !mIsShowingCheckMark; 
    } 

} 

und MainActivity:

public class MainActivity extends AppCompatActivity { 

    ArrowToCheckMarkMorphingImageView mArrowToCheckMarkImageView; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
     setSupportActionBar(toolbar); 
     mArrowToCheckMarkImageView = (ArrowToCheckMarkMorphingImageView)findViewById(R.id.imageView); 
     mArrowToCheckMarkImageView.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View view) { 
       mArrowToCheckMarkImageView.morph(); 
      } 
     }); 
    } 
} 

in Layout-Datei es Ihnen gefällt verwenden müssen:

<yourpackage.ArrowToCheckMarkMorphingImageView 
     android:id="@+id/imageView" 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     android:layout_centerInParent="true" 
     /> 

und Ressourcen für diejenigen, die will es zu versuchen:

res/Animator/arrow_to_checkmark

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <objectAnimator 
     android:duration="500" 
     android:propertyName="pathData" 
     android:valueFrom="M7.41,15.41 L12,10.83 l4.59,4.58 L18,14 18,14 l-6,-6 -6,6z" 
     android:valueTo ="M9,16.17 L4.83,12 l-1.42,1.41 L9,19 21,7 l-1.41,-1.41 0,0z" 
     android:valueType="pathType" /> 
    <objectAnimator 
     android:duration="500" 
     android:propertyName="fillColor" 
     android:valueFrom="#FF0000FF" 
     android:valueTo="#FF00FF00" /> 
</set> 

res/Animator/checkmark_to_arrow

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <objectAnimator 
     android:duration="500" 
     android:propertyName="pathData" 
     android:valueFrom="M9,16.17 L4.83,12 l-1.42,1.41 L9,19 21,7 l-1.41,-1.41 0,0z" 
     android:valueTo ="M7.41,15.41 L12,10.83 l4.59,4.58 L18,14 18,14 l-6,-6 -6,6z" 
     android:valueType="pathType" /> 
    <objectAnimator 
     android:duration="500" 
     android:propertyName="fillColor" 
     android:valueFrom="#FF00FF00" 
     android:valueTo="#FF0000FF" /> 
</set> 

res/ziehbar/arrow_to_checkmark

res/ziehbare/checkmark_to_arrow

<?xml version="1.0" encoding="utf-8"?> 
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/ic_checkmark_24dp"> 
    <target 
     android:animation="@animator/checkmark_to_arrow" 
     android:name="checkmark"/> 
</animated-vector> 

res/ziehbare/ic_arrow_up_24dp

<vector xmlns:android="http://schemas.android.com/apk/res/android" 
     android:width="24dp" 
     android:height="24dp" 
     android:viewportWidth="24.0" 
     android:viewportHeight="24.0"> 
    <path 
     android:name="arrow" 
     android:fillColor="#FF0000FF" 
     android:pathData="M7.41,15.41 L12,10.83 l4.59,4.58 L18,14 18,14 l-6,-6 -6,6z"/> 
</vector> 

res/ziehbare/ic_checkmark_24dp

<vector xmlns:android="http://schemas.android.com/apk/res/android" 
     android:width="24dp" 
     android:height="24dp" 
     android:viewportWidth="24.0" 
     android:viewportHeight="24.0"> 
    <path 
     android:name="checkmark" 
     android:fillColor="#FF00FF00" 
     android:pathData="M9,16.17 L4.83,12 l-1.42,1.41 L9,19 21,7 l-1.41,-1.41 0,0z"/> 
</vector> 
+1

Danke für diese Erklärung - In Würfen, genau diese Sache zu tun. Es scheint eine Menge Aufwand, d. H. Code/Dateien für eine ziemlich einfache Animation! –

+0

@MarkKeen wollte nur tun, und die Antwort teilt den Code in mehreren Dateien für Struktur, imho ein wenig übertrieben, wird der Code ein bisschen kleiner, wenn Sie nicht Animation xmls aufteilen. Das Annotieren durch Teilen ist, dass Du die Pfaddaten in der Zeichnungsdatei und der Animation duplizieren musst – Adam

7

Ich werde mit Circular Progress Button gehen, Sie können es nach Ihren Bedürfnissen anpassen oder erweitern Sie die Bibliothek (seit. es ist Open Source). Ich benutze das schon seit einiger Zeit und es ist ziemlich einfach in deine Projekte zu integrieren.

Außerdem können Sie daraus lernen und die eigene Bibliothek erstellen :-)

Hier wird das Git-Repository CircularProgressButton

enter image description here

Sie können aber auch andere ausgezeichnete Open-Source ausprobieren wie Android Morphing Button

enter image description here enter image description here