android animation add Easings effect - android

I have one LinearLayout. My layout first time is gone and on button click i visible it with left to right animation.this is my source:
public void ShowSlideMenu(LinearLayout layout)
{
if(layout.getVisibility()==View.GONE)
{
if(LeftSwipe==null)
LeftSwipe=AnimationUtils.loadAnimation(getActivity(),R.anim.slide_menu_lefttoright);
layout.startAnimation(LeftSwipe);
layout.setVisibility(View.VISIBLE);
}
}
this is xml animation code:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="true">
<translate
android:duration="#android:integer/config_mediumAnimTime"
android:fromXDelta="100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%" />
animation working perfect but now i want to add Easing effect. i read material design animation and i try to recive like this easing effect
https://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight
and also like this
http://api.jqueryui.com/easings/
if anyone knows solution please help me thanks everyone

A solution to this should be adding an interpolator to your animation set.
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:interpolator="#android:anim/decelerate_interpolator"
android:shareInterpolator="true">
<translate
android:duration="#android:integer/config_mediumAnimTime"
android:fromXDelta="100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%" />
</set>
The interpolator will take your animation and change its speed over the duration of the animation. In the example I chose a decelerate interpolator that makes the animation starting fast and then getting slower and slower during the time of the animation.

Related

How to make slide animation with a fixed screen and new screen?

I made three xml files for the transition.
enter_from_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="#android:integer/config_mediumAnimTime"
android:fromXDelta="0%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%" />
</set>
none.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="#android:integer/config_mediumAnimTime"
android:fromXDelta="100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%" />
</set>
exit_to_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="#android:integer/config_mediumAnimTime"
android:fromXDelta="0%"
android:fromYDelta="0%"
android:toXDelta="100%"
android:toYDelta="0%" />
</set>
However, It just works fine in Activities not in Fragments.
When I click the back button, the backward transition(pop) works fine. But it doesn't work properly when I call the new fragment. It just blinks when the screen changes.
I tried changing the duration to 50 of none.xml. And I see the new screen comes in from the right side. And also tried with 10000. But it just delays the changing time.
I am using navigation component. And I defined like this:
<action
android:id="#+id/action_initFragment_to_settingFragment"
app:destination="#id/settingFragment"
app:enterAnim="#anim/enter_from_right"
app:exitAnim="#anim/none"
app:popExitAnim="#anim/exit_to_right"
app:popEnterAnim="#anim/none"/>
What's wrong with it?
I think this is because of Z index. Is there any way to give Z index attribute?
This happened because of the z index. Activities have different depth. However, I guess Fragments have the same depth. So, When A Fragment is switched to B Fragment, They are on the same depth and transition is not shown properly.
The solution is giving Z index to the screen programmatically like below:
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
ViewCompat.setTranslationZ(view, 1F)
}
1F in here, it is the index of depth.
The interesting thing is the higher value creates the bigger shadow. If you give 100F, then it creates huge shadow underneath. And I can't see any shadows visibly when the value is 1F.

Android slow down TranslateAnimation over time

I wanted to make my own animations for fragment transitions. I want it to come in from the bottom fast and then slow down as it reaches its position. I have done something similar in the past but i don't have the code anymore and i can't reproduce it either :/ I remember it had something to do with the interpolator.
This is my current animation set
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="200">
<translate
android:fromYDelta="100%"
android:toYDelta="0" />
</set>
Add the interpolator to your <set> like this:
android:interpolator="#android:anim/decelerate_interpolator"
Source: Animation resources

How do I prevent ViewFlipper from changing images erratically

I am using ViewFlipper with Left and Right buttons to switch back and forth between images. After implementing the code below and clicking right button the image will:
It changes instantly to next image > Slide in what was the current image > change back to next image again. I am trying to simply slide current image out left > next image to slide in from the right.
res\anim\in_from_right.xml and res\anim\out_to_left.xml respectively:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:duration="1400"
android:fromXDelta="100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%" />
</set>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:duration="1400"
android:fromXDelta="0%"
android:fromYDelta="0%"
android:toXDelta="-100%"
android:toYDelta="0%" />
</set>
and java:
buttonRight.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
flippy.setOutAnimation(ChestBurner.this, R.anim.in_from_right);
flippy.setInAnimation(ChestBurner.this, R.anim.out_to_left);
flippy.showNext();
}
});
Turns out in all matters of android studio that are complete mysteries either a restart or update will do the trick.
The above error was rectified after updating all API's in the SDK.

android; setting in/out animations on AdapterViewFlipper: Unknown animator name translate

I have some very simple animations that work perfectly with a ViewFlipper, but if I try setting them on an AdapterViewFlipper in/out, I get a runtime error "Unknown animator name translate". In looking at the respective methods on each, it looks like ViewFlipper expects a ViewAnimation, and AdapterViewFlipper expects an AdapterViewAnimation. The api's are otherwise the same, and both build without error. Here's the xml for one of the animations:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="0%" android:toXDelta="-100%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="800"/>
</set>
and I set it on the flipper like:
vf.setOutAnimation(this, R.anim.out_to_left);
I can guess this might mean that I can't use translate, type, but then how would I accomplish the same animation? Lame...
Found the answer here: https://stackoverflow.com/a/26197426/1534666
It appears that a ViewFlipperAdapter needs a objectAnimator, not a set.
Example left_in.xml, declared in animator folder
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:propertyName="x"
android:valueType="floatType"
android:valueFrom="-1500"
android:valueTo="0"
android:duration="600"/>

Android animation startOffset makes the target view blink and not animate

I'm trying to create an animation which will slide a textview out to the left and slide in again from the right. Essentially, this would be the same text effect used in the Stopwatch & Timer app (sportstracklive is the developer).
I can use either of these animation sets exclusive of the other and it works fine, does exactly what I want. But as soon as I try using them together, the TextView just blinks over the course about around 1 second. Removing the startOffset works as expected. Both animation sets run simultaneously.
Here's the XML:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0%"
android:toXDelta="-25%"
android:fromYDelta="0%"
android:toYDelta="0%"
android:duration="#android:integer/config_shortAnimTime"
/>
<alpha
android:interpolator="#android:anim/decelerate_interpolator"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="#android:integer/config_shortAnimTime"
/>
<set>
<translate
android:fromXDelta="25%"
android:toXDelta="0%"
android:fromYDelta="0%"
android:toYDelta="0%"
android:startOffset="#android:integer/config_shortAnimTime"
android:duration="#android:integer/config_shortAnimTime"
/>
<alpha
android:interpolator="#android:anim/decelerate_interpolator"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:startOffset="#android:integer/config_shortAnimTime"
android:duration="#android:integer/config_shortAnimTime"
/>
</set>
</set>
And here's the lengthy Java code that runs it:
AnimationSet mSlideRightToLeft =
(AnimationSet) AnimationUtils.loadAnimation(this, R.anim.slide_right_to_left);
mMyTextView.startAnimation(mSlideRightToLeft);
Justinl's comment is correct. I had the exact same problem a couple months ago. Remove the set tags around the other animations, and keep the startOffsets.
Next remove the animation set in your code and just do a normal load animation:
Animation a = AnimationUtils.loadAnimation(this, R.anim.slide_right_to_left);
mMyTextView.startAnimation(a);
Edit: Yea, it looks like Android simply doesn't like this setup when there are multiple animations at the same time. I think you might have to create separate files for each set of animations and then configure them via an AnimationSet inside your program.

Categories

Resources