Happy New Year. First of all, I give you a red envelope.
Please close your eyes and get the red envelope with your mind.
This post was synchronized from Wing’s local tavern
It’s 2017, and it’s time for a wave of basic special effects tutorials!
If I’m not lazy, maybe I can make a series of basic tutorials. Of course, if it becomes a series, the series, as the title says, is the basic special effects. So the content will be relatively simple, if you are an old driver, you can just float through (incidentally take me to the car! .
The project address: github.com/githubwing/…
This time again, I’m going to start with Ele. me. Take a paoding search bar for the overdone effect, as shown below:
Well, the picture is still relatively large, in order not to waste typesetting space, this time I will not go on the original picture, directly on the effect picture. It’s still pretty much the same.
As you can see, this is an overkill effect. In the words of a group of friends, it is too slippery to recognize two activities.
One Activity or two?
These are two activities that look streamlined because they use a concept called shared elements. Android 5.0 has its own implementation of shared elements, but there are some disadvantages such as not being able to resize, not being compatible with 4.x, etc.
How to do that?
In fact, this effect in high imitation wechat slide back PhotoView has been used and introduced. But because the space did not do a detailed introduction, now to introduce to you the idea of achieving this effect.
First, since it is called a shared element, it is conceivable that two activities must have an element in common, perhaps a picture, a TextView, an EditText, and so on. As in renderings, it shares an entire EditText. More specifically, a set of elements that make up what looks like an EditText.
To achieve this effect, we need to place the same search bar element in both activities.
<FrameLayout android:layout_width="match_parent" android:layout_height="150dp" android:background="#0096FF" android:padding="10dp"> <TextView android:layout_marginLeft="10dp" android:layout_marginTop="20dp" Android :layout_width="wrap_content" Android :layout_height="wrap_content" Android :text=" Guangzhou Pyu android:textColor="#fff" android:textSize="16sp" /> <TextView android:id="@+id/tv_search_bg" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:background="@drawable/ele_search_bg" android:gravity="center" android:padding="10dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" Android :gravity="center" android:gravity=" # FFF "android:gravity=" # FFF" Android :layout_gravity="bottom" android:layout_width="match_parent" android:layout_width="match_parent" android:layout_width="match_parent" android:layout_height="wrap_content" /> </FrameLayout>Copy the codeWe now have this element for both activities. There is only one step left to do: that is startActivity.
Haha, I’m not kidding you, because all the animations you see are actually done in the second Activity. As you can see from the renderings, the previous Activity is still visible during animation execution, so we need to make the second Activity special “transparent”.
Add a new transparent theme to style.xml and apply it to the second Activity.
<style name="Translucent" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>
Copy the codeNext, just do some animation when the second Activity starts. So first we pass the coordinates of the elements in the first Activity to the second Activity.
Intent intent = new Intent(EleActivity.this,EleSearchActivity.class); int location[] = new int[2]; mSearchBGTxt.getLocationOnScreen(location); intent.putExtra("x",location[0]); intent.putExtra("y",location[1]); startActivity(intent); OverridePendingTransition (0, 0);Copy the codeNotice that we’re getting coordinates on the screen here. So in the second Activity, the coordinates of the second element are also retrieved using on-screen coordinates.
Once you get it, you shift it by the difference between the two coordinates, so you don’t have to worry about any other coordinates at all. As for why, here’s an assignment (squint) :
float originY = getIntent().getIntExtra("y", 0);
int location[] = new int[2];
mSearchBGTxt.getLocationOnScreen(location);
float translateY = originY - (float) location[1];
Copy the codeIf you want to preview the position effect, you can just view. SetTranslateY (translateY);
The next step is to turn the animation over to ValueAnimator, where the background of the search bar is separated into a View for X scaling. So now the animations to do are:
- The Y axis of the left arrow moves.
- The Y-axis pan animation searched on the right.
- Middle text and Y axis translation animation of the background.
- X-scaled animation of the middle background.
- Transparent animation of the lower View content.
translateVa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { mSearchBGTxt.setY((Float) valueAnimator.getAnimatedValue()); mArrowImg.setY(mSearchBGTxt.getY() + (mSearchBGTxt.getHeight() - mArrowImg.getHeight()) / 2); mHintTxt.setY(mSearchBGTxt.getY() + (mSearchBGTxt.getHeight() - mHintTxt.getHeight()) / 2); mSearchTxt.setY(mSearchBGTxt.getY() + (mSearchBGTxt.getHeight() - mSearchTxt.getHeight()) / 2); }});Copy the codeAfter the animation is completed, you just need to classify the View correctly!
When you start or stop the Activity, you need to call the following code to turn off the toggle animation.
overridePendingTransition(0, 0);
Copy the codeFeel this effect although simple, but the application scene is still quite wide.
The project address: github.com/githubwing/…
If you like to welcome Star, you can also join me at Android Tavern: 425983695
See article: Lower versions implement shared element animations