Animation: in android, how to scale and fade a view consisting of several lines of text from a central point

Question

I want to animate a presentation consisting of several lines of text, as shown in the link https://dl.dropboxusercontent.com/u/8003415/animation.gif . This view consists of two TextViews enclosed in a parent view.

This parent view contains two sets of animations.

1) the first set of views contains several lines of text that scale from normal to large, and then disappear.

2) the second set of representations contains another set of plural text, which disappears and scales from small to normal.

note that scaling and fading must occur at the same time.

for the first set, I developed the following set of animations. This animation sets the scales ((1,1) - (1,5,1,5))) and fades the text block from the center.

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@anim/custom_decelerator" > <scale android:duration="50" android:fromXScale="1.0" android:fromYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:toXScale="1.5" android:toYScale="1.5" /> <alpha android:duration="2000" android:fromAlpha="2.0" android:toAlpha="0.0" /> </set> 

and for the second set, it also scales ((-1, -1) - (1,1))) and the text block from the center fades out

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@anim/custom_decelerator" > <alpha android:duration="50" android:fromAlpha="0.0" android:toAlpha="0.2" /> <scale android:duration="3000" android:fromXScale="-1" android:fromYScale="-1" android:pivotX="50%" android:pivotY="50%" android:toXScale="1.0" android:toYScale="1.0" /> </set> 

The problem is that the two sets of animation do not exactly match the animation specified in the link above.

Animation doesn't seem to come from the dead center of text blocks.

Answer 1

I really did not work with animation, so I decided to give it a try. The test and error led to the POC application. Hence a bunch of code.

Please note that I used some static views and repeated the animation on them. This can be polished for the expected output.

There were some minor issues in the animation example, I fixed this. The following are snippets of code.

Anit / 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> 

anime \ 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(); } } } 

and a bonus form suitable for the red circle.

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> 

Answer 2

Applying these sets of animations simultaneously on this parent view will not result in the animation you are looking for. If I understand you correctly, you do:

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

I'm right? If so, you are doing wrong! instead, you should have the following layout: (This is not real XML, this is pseudo-XML)

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

In this design, you should consider that the Parent element is like a FrameLayout and that the Frame elements can be any layouts you want. Now you can achieve your wish animation:

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

_{If something is unclear, feel free to let me know.}