Invertir la animación de transformación de flecha a marca de verificación
Estoy tratando de lograr el efecto de morphing, cuando el usuario hace clic en myButton, la imagen dentro de ImageView debe morph de flecha a marca de verificación. Y cuando haga clic de nuevo, el proceso debe invertir: la marca de verificación debe morph a flecha.
Esto es lo que he hecho:
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" />
Y así es como juego la animación:
Drawable drawable = upVote.getDrawable(); if (drawable instanceof Animatable) { ((Animatable) drawable).start(); }
Esto transforma la flecha en marca de verificación, ¿cómo puedo invertir el proceso?
Si su opinión es checkable y también su minsdk > 21 usted puede intentar usar StateListAnimator con AnimatedVectorDrawable pero porque el appcompat ahora apoya vectorDrawable y AnimatedVectorDrawable y también tiene una limitación en usar todos DrawableContainers que no tomo por encima del acercamiento.
Así que permítanme decirles lo que puede funcionar:
DrawableContainers que hacen referencia a otros recursos desplegables que contienen sólo un recurso vectorial. Por ejemplo, un StateListDrawable que hace referencia a otros archivos que contienen un vector.
De Chris Banes
Con el fin de lograr que voy a crear personalizado ImageView y cada vez que se hace clic en usted debe llamar morph función para ejecutar vectorAnimatorDrawable adecuado.
Así código y demo:
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; } }
Y 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(); } }); } }
En el archivo de diseño debe utilizarlo como:
<yourpackage.ArrowToCheckMarkMorphingImageView android:id="@+id/imageView" android:layout_width="50dp" android:layout_height="50dp" android:layout_centerInParent="true" />
Y recursos para aquellos que quieran darle una oportunidad:
Res / animador / 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 / drawable / arrow_to_checkmark
<?xml version="1.0" encoding="utf-8"?> <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/ic_arrow_up_24dp"> <target android:animation="@animator/arrow_to_checkmark" android:name="arrow"/> </animated-vector>
Res / drawable / 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 / drawable / 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 / drawable / 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>
Voy a ir con el botón de progreso circular, se puede personalizar en función de su necesidad o ampliar la biblioteca (ya que es de código abierto). He estado usando eso por un tiempo y es bastante fácil de integrar en sus proyectos.
Además, puedes aprender de eso y crear tu propia biblioteca 🙂
Aquí el repositorio de Git CircularProgressButton
Además, puede probar otro excelente código abierto, como Android Morphing Button
