Animación: en android cómo escalar y atenuar una vista que consta de varias líneas de texto desde un punto central

Realmente no he trabajado con las animaciones, así que pensé en darle una oportunidad. Prueba y error condujo a la aplicación de nivel de POC. De ahí el montón de código.

Tenga en cuenta que he utilizado algunas vistas estáticas y repetidas las animaciones en them.That puede ser pulido por la salida esperada mencionado.

Hubo algunos problemas menores en el ejemplo de animación, he arreglado eso. Los fragmentos de código son los siguientes.

Anim / zoom_to_medium.xml

 <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/decelerate_interpolator"> <scale android:duration="1000" android:fromXScale="0" android:fromYScale="0" android:pivotX="50%" android:pivotY="50%" android:repeatMode="restart" android:toXScale="1.0" android:toYScale="1.0" /> <alpha android:duration="50" android:fromAlpha="0.0" android:toAlpha="0.2" /> </set> 

Anim \ zoom_to_full.xml

 <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/decelerate_interpolator"> <scale android:duration="1000" android:fromXScale="1.0" android:fromYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:repeatMode="restart" android:toXScale="2" android:toYScale="2" /> <alpha android:duration="1000" android:fromAlpha="2.0" android:toAlpha="0.0" /> </set> 

Activity_main.xml

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:background="@drawable/border_circle" android:orientation="vertical"> <LinearLayout android:id="@+id/llFish" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center" android:orientation="vertical" android:visibility="gone"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="36%" android:textColor="@android:color/black" android:textSize="42dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:includeFontPadding="false" android:text="Cat \n owners" android:textColor="@android:color/black" android:textSize="42dp" /> </LinearLayout> <LinearLayout android:id="@+id/llDog" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center" android:orientation="vertical" android:visibility="gone"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="54%" android:textColor="@android:color/black" android:textSize="42dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:includeFontPadding="false" android:text="Fish \n owners" android:textColor="@android:color/black" android:textSize="42dp" /> </LinearLayout> </RelativeLayout> <Button android:id="@+id/btnToggle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:text="Click Me" /> </RelativeLayout> 

MainActivity.java

  public class MainActivity extends AppCompatActivity implements View.OnClickListener { private LinearLayout llDog; private LinearLayout llFish; private Animation zoomToMed, zoomToFull; private Button btnToggle; private boolean isRunning; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); llDog = (LinearLayout) findViewById(R.id.llDog); llFish = (LinearLayout) findViewById(R.id.llFish); zoomToMed = AnimationUtils.loadAnimation(this, R.anim.zoom_to_medium); zoomToFull = AnimationUtils.loadAnimation(this, R.anim.zoom_to_full); zoomToFull.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { hideViews(); new Handler().postDelayed(new Runnable() { @Override public void run() { startAnimations(); } }, 1000); } @Override public void onAnimationRepeat(Animation animation) { } }); btnToggle = (Button) findViewById(R.id.btnToggle); btnToggle.setOnClickListener(this); } private void hideViews() { llDog.setVisibility(View.GONE); llDog.setVisibility(View.GONE); } private void startAnimations() { llDog.setVisibility(View.VISIBLE); llFish.setVisibility(View.VISIBLE); llDog.startAnimation(zoomToMed); llFish.startAnimation(zoomToFull); } @Override public void onClick(View view) { isRunning = !isRunning; if (isRunning) { startAnimations(); } else { hideViews(); } } } 

Y la forma de la prima dibujable para el círculo rojo.

Border_circle.xml

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <stroke android:width="2dp" android:color="@android:color/holo_red_dark"></stroke> <size android:width="250dp" android:height="250dp" /> </shape> 

Aplicar estos conjuntos de animaciones simultáneamente en esa vista principal no daría lugar a la animación que está buscando. Si te entiendo correctamente, estás haciendo lo siguiente:

 parentView.startAnimation(animSet1); parentView.startAnimation(animSet2); 

¿Estoy bien? Si es así, usted está haciendo mal! Debe tener la siguiente disposición: (Esto no es un código XML real, es un pseudo código XML)

 <Parent> <Frame1> <TextViews> </Frame1> <Frame2> <TextViews> </Frame2> </Parent> 

Por este diseño usted debe considerar ese elemento del Parent como FrameLayout y que los elementos del Frame pueden ser cualquier disposición que usted desea. Ahora puedes lograr tu animación deseada por:

 frame1.startAnimation(animSet1); frame2.startAnimation(animSet2); 

_{Si algo no está claro, no lo dude, hágamelo saber.}