I need to create animation where I will display 3 images. Each image should completely fade in and fade out (slow blink) and then next image should be shown. I have done it by creating 3 animations. Each animation starts the next animation in onAnimationEnd listener:
private void startAnimation() {
final Animation aniIn = AnimationUtils.loadAnimation(this,
R.anim.fade_in_out);
final Animation aniIn1 = AnimationUtils.loadAnimation(this,
R.anim.fade_in_out);
final Animation aniIn2 = AnimationUtils.loadAnimation(this,
R.anim.fade_in_out);
aniIn.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
ivRandom0.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
ivRandom0.setVisibility(View.INVISIBLE);
ivRandom1.startAnimation(aniIn1);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
aniIn1.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
ivRandom1.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
ivRandom1.setVisibility(View.INVISIBLE);
ivRandom2.startAnimation(aniIn2);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
aniIn2.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
ivRandom2.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
showFinal();
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
ivRandom0.startAnimation(aniIn);
}
For that animation I have this xml which sets alhpa from 0 to 1 and back to 0:
fade_in_out.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<alpha
android:duration="300"
android:fromAlpha="0"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:toAlpha="1"
android:repeatCount="1"
android:repeatMode="reverse"
/>
</set>
here is my layout:
<RelativeLayout
android:id="#+id/images_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/iv_image_random_0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/img_generator0"
android:visibility="visible" />
<ImageView
android:id="#+id/iv_image_random_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/img_generator1"
android:visibility="invisible" />
<ImageView
android:id="#+id/iv_image_random_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/img_generator2"
android:visibility="invisible" />
</RelativeLayout>
Although this is working, I don't like the nested callbacks. It is also causing memory leak as it is holding reference to imageviews in calbacks.
Is there a better way how to create this kind of animation? Or at least avoid the memory leak? I was trying imageswitcher, but it is causing cross fading of images which I don't want.
Thank you!
you can use ObjectAnimator , it has methods to setDuration and start delays , which you can calculate according to your need.
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(imageView, "alpha",0, 1);
objectAnimator.setDuration(DEFAULT_ANIMATION_DURATION);
objectAnimator.setStartDelay(milliseconds);
objectAnimator.start();
you can create three different object animators to set accordinglt . for more refer this link
You can use viewswitcher to implement this behaviour. Please see the code below:
layout
<ViewSwitcher
android:id="#+id/switcher"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:inAnimation="#anim/fade_in"
android:outAnimation="#anim/fade_out" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/sunset" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/clouds" />
</ViewSwitcher>
code
((ViewSwitcher) findViewById(R.id.switcher)).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
ViewSwitcher switcher = (ViewSwitcher) v;
if (switcher.getDisplayedChild() == 0) {
switcher.showNext();
} else {
switcher.showPrevious();
}
}
});
Please refer this link
Related
I want to resize views with animation android without deforming the content inside the view. Specifically, I want to press a cluster icon in google maps and resize the map fragment and show a listview, here is my code
public void showDataView(){
RelativeLayout dataLinearLayout = getView().findViewById(R.id.dataLinearLayout);
View map = getView().findViewById(R.id.map);
if(isAnimationOn == 0) {
isAnimationOn = 1;
Animation anim = AnimationUtils.loadAnimation(getContext(), R.anim.minimize_maps);
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
map.startAnimation(anim);
Animation anim2 = AnimationUtils.loadAnimation(getContext(), R.anim.maximize_maps);
anim2.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
isAnimationOn = 1;
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
dataLinearLayout.startAnimation(anim2);
}
}
here is the animation XML
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false"
android:fillAfter="true">
<scale android:fromXScale="1.0" android:toXScale="1.0"
android:fromYScale="1.0" android:toYScale="0.5"
android:pivotX="50%p" android:pivotY="0%p"
android:duration="250" />
</set>
the view code
<LinearLayout 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:weightSum="100"
android:orientation="vertical">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="100"
tools:context="com.viralandroid.googlemapsandroidapi.MapsActivity" />
<RelativeLayout
android:id="#+id/dataLinearLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50">
</RelativeLayout>
</LinearLayout>
And this is how it works
please if you know anything please help me!
i'm having troubles creating a scanning animation on my android application.For instance, i have come across this application 'Fingerprint love scanner prank' which has the scanning animation and i would like to implement the same on my android app. I have tried to implement the same on my android application but in vain. This is my android code snippet.
Animation.Java Activity
scan.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
final CountDownTimer start = new CountDownTimer(4000, 1000) {
public void onTick(long millisUntilFinished) {
scanner.setVisibility(View.VISIBLE);
anim1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.progress);
scanner.startAnimation(anim1);
}
public void onFinish() {
scanner.setVisibility(View.INVISIBLE);
}
}.start();
return false;
}
});
Animation.xml
Contains the scanner image defined by the imageView as shown below
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:id="#+id/scan"
android:background="#drawable/bgscanner">
<ImageView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:src="#drawable/scanner"
android:id="#+id/scanner1"
android:layout_marginTop="20dp"
android:visibility="invisible"
/>
</LinearLayout>
My Animation drawable
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromYDelta="0%p"
android:toYDelta="75%p"
android:duration="800"
/>
</set>
My big issue is, on touch event, the animation does not execute. That is, the image bar does not oscillate along the vertical axis. I kindly request any assistance from stackoverflow
Edited
This problem can be solved with a very small code.
First, change your XML animation code to this:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fillAfter="false">
<translate
android:fromYDelta="0%p"
android:toYDelta="100%p"
android:duration="1000"
android:repeatCount="infinite"
android:repeatMode="restart"
/>
</set>
Your layout should be something like this:
<LinearLayout
android:id="#+id/image"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#mipmap/ic_launcher">
<View
android:id="#+id/bar"
android:layout_width="200dp"
android:layout_height="6dp"
android:visibility="gone"
android:background="#android:color/black"
android:src="#mipmap/ic_launcher"/>
</LinearLayout>
And in your activity, the code can be like this:
LinearLayout imageView = (LinearLayout) findViewById(R.id.image);
final View bar = findViewById(R.id.bar);
final Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.anim);
animation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
bar.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {}
});
imageView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
bar.setVisibility(View.VISIBLE);
bar.startAnimation(animation);
return false;
}
});
And this way you are going to have this result:
I used a View instead of a ImageView to make the scan bar, but you can change the code to your needs.
I hope it helps!
EDIT 2:
If you want the animation to happen only if your image is pressed, change the code to this:
imageView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
if(motionEvent.getAction() == MotionEvent.ACTION_DOWN){
bar.setVisibility(View.VISIBLE);
bar.startAnimation(animation);
} else if(motionEvent.getAction() == MotionEvent.ACTION_UP){
bar.setVisibility(View.GONE);
animation.cancel();
}
return false;
}
});
It you trigger the animation when the image is pressed (MotionEvent.ACTION_DOWN) and it is going to stop the animation when the image is released (MotionEvent.ACTION_UP)
Instead of countDownTimer use value animator for the animation in onTouch listner.
scan.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
if(motionEvent.getAction==MotionEvent.ACTION_DOWN){
ValueAnimator valueAnimator=ValueAnimator.ofFloat(0,75);
valueAnimator.setDuration(4000);
valueAnimator.setInterpolator(new DecelerateInterpolator());
valueAnimator.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
scanner.setVisibilty(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animator animation) {
scanner.setVisibilty(View.INVISIBLE);
}
#Override
public void onAnimationCancel(Animator animation) {
scanner.setVisibilty(View.INVISIBLE);
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float translate= (float) animation.getAnimatedValue();
scanner.setTranslationY(translate);//translate scanner in Y direction
}
});
valueAnimator.start();
}
return true;
}
For animation on android , i advice you to use Animation Drawable , it's simple to implement : https://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html
First steps to display a animation (Gif by example) , we split it to pngs (online by example i have use http://ezgif.com/ , then i apply the initialisation on xml drawable :
<!-- Animation frames are wheel0.png through wheel5.png
files inside the res/drawable/ folder -->
<animation-list android:id="#+id/selected" android:oneshot="false">
<item android:drawable="#drawable/wheel0" android:duration="50" />
<item android:drawable="#drawable/wheel1" android:duration="50" />
<item android:drawable="#drawable/wheel2" android:duration="50" />
<item android:drawable="#drawable/wheel3" android:duration="50" />
<item android:drawable="#drawable/wheel4" android:duration="50" />
<item android:drawable="#drawable/wheel5" android:duration="50" />
</animation-list>
Finally i load it on my defined class :
// Load the ImageView that will host the animation and
// set its background to our AnimationDrawable XML resource.
ImageView img = (ImageView)findViewById(R.id.spinning_wheel_image);
img.setBackgroundResource(R.drawable.spin_animation);
// Get the background, which has been compiled to an AnimationDrawable object.
AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();
// Start the animation (looped playback by default).
frameAnimation.start();
change your animation to this
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
duration="4000"
android:repeatMode="reverse"
android:fillAfter="false">
<translate
android:fromYDelta="0%p"
android:toYDelta="75%p"
android:duration="800"/>
</set>
and your code
scan.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
scanner.setVisibility(View.VISIBLE);
anim1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.progress);
anim1.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
scanner.setVisibility((View.INVISIBLE)
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
scanner.startAnimation(anim1);
}
});
Try this:
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
final CountDownTimer start = new CountDownTimer(4000, 1000) {
anim1 = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.progress);
// set animation listener
anim1.setAnimationListener(this);
// button click event
scan.setOnClickListener(new View.OnClickListener() {
#Override
public void onTick(View v) {
scanner.setVisibility(View.VISIBLE);
// start the animation
scanner.startAnimation(anim1);
}
});
}
#Override
public void onAnimationEnd(Animation animation) {
// Take any action after completing the animation
// check for fade in animation
if (animation == anim1) {
Toast.makeText(getApplicationContext(), "Animation Stopped",
Toast.LENGTH_SHORT).show();
}
}
I'm trying to reproduce this animation from an iOS app in Android. and I'm stuck
If anyone knows how to create them will be deeply grateful. Don't mind the logo in the center, just those rings pulsating. (is possible 3 at a time, short break, repeat)
Here's a possible solution, but it's quite ugly and I'm sure something nicer can be made
3 imageviews one on top of eachother
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<ImageView
android:id="#+id/imageView_circle1"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:srcCompat="#drawable/circle"
/>
<ImageView
android:id="#+id/imageView_circle2"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:srcCompat="#drawable/circle"
/>
<ImageView
android:id="#+id/imageView_circle3"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:srcCompat="#drawable/circle"
/>
<ImageView
android:id="#+id/imageView_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:scaleType="fitCenter"
app:srcCompat="#drawable/logo"
/>
</RelativeLayout>
a drawable circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#DDDDDD"/>
</shape>
an animation zoom_and_fade.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="false">
<alpha
android:duration="3500"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
<scale
android:duration="3500"
android:fromXScale="0"
android:fromYScale="0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="50"
android:toYScale="50" />
</set>
on Activity:
imageView_circle1 = (ImageView) findViewById(R.id.imageView_circle1);
imageView_circle2 = (ImageView) findViewById(R.id.imageView_circle2);
imageView_circle3 = (ImageView) findViewById(R.id.imageView_circle3);
anim1 = AnimationUtils.loadAnimation(this, R.anim.zoom_and_fade);
anim2 = AnimationUtils.loadAnimation(this, R.anim.zoom_and_fade);
anim3 = AnimationUtils.loadAnimation(this, R.anim.zoom_and_fade);
anim2.setStartOffset(800);
anim3.setStartOffset(1600);
imageView_circle1.startAnimation(anim1);
imageView_circle2.startAnimation(anim2);
imageView_circle3.startAnimation(anim3);
anim2.setAnimationListener(new Animation.AnimationListener() {
#Override public void onAnimationStart(Animation animation) {
}
#Override public void onAnimationEnd(Animation animation) {
imageView_circle1.startAnimation(anim1);
imageView_circle2.startAnimation(anim2);
imageView_circle3.startAnimation(anim3);
}
#Override public void onAnimationRepeat(Animation animation) {
}
});
I don't think you can achieve same result with only XML.
This is really rough code (Literally 5 minutes) using canvas. But I think with some minor changes you can get really nice Animation.
Check out the video. https://www.youtube.com/watch?v=378Jjc4amD8.
I'll improve if you like it.
public class CircleAnimationView extends View {
private Paint[] paints = new Paint[3];
private int[] colors = new int[3];
private float[] circleRadius = new float[3];
public CircleAnimationView(Context context) {
super(context);
init();
}
public CircleAnimationView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
colors[0] = ContextCompat.getColor(getContext(), R.color.gray1);
colors[1] = ContextCompat.getColor(getContext(), R.color.gray2);
colors[2] = ContextCompat.getColor(getContext(), R.color.gray3);
for (int i = 0; i < paints.length; i++) {
paints[i] = new Paint();
paints[i].setAntiAlias(true);
paints[i].setStyle(Paint.Style.FILL);
paints[i].setColor(colors[i]);
}
}
public void startCircleAnimation() {
CircleRadiusAnimation animation = new CircleRadiusAnimation();
animation.setDuration(1500);
animation.setRepeatCount(Animation.INFINITE);
startAnimation(animation);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, circleRadius[0], paints[0]);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, circleRadius[1], paints[1]);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, circleRadius[2], paints[2]);
}
private class CircleRadiusAnimation extends Animation {
public CircleRadiusAnimation() {
setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
reset();
}
});
}
public void reset() {
circleRadius[0] = 0;
circleRadius[1] = 0;
circleRadius[2] = 0;
CircleAnimationView.this.requestLayout();
CircleAnimationView.this.invalidate();
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation transformation) {
circleRadius[0] += 10;
if (interpolatedTime > 0.3) {
circleRadius[1] += 10;
Log.d("animate", "2nd circle");
}
if (interpolatedTime > 0.6) {
circleRadius[2] += 10;
Log.d("animate", "3nd circle");
}
CircleAnimationView.this.requestLayout();
CircleAnimationView.this.invalidate();
}
}
}}
I'm trying to go around different functionality integrated with Android Material Design but I can't to do this type of animation when a view fill another like that :
Do you know how to do it or a library/project an example that does this?
I tried to implement this below API 21
add gradle dependancy
dependencies {
compile 'com.github.ozodrukh:CircularReveal:1.0.6#aar'
}
My activity xml is
activity_reval_anim.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".RevalAnimActivity">
<ImageView
android:id="#+id/img_top"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#color/color_primary"
android:src="#drawable/ala"/>
<io.codetail.widget.RevealLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="#+id/img_top"
android:background="#color/color_primary">
<LinearLayout
android:visibility="invisible"
android:id="#+id/ll_reveal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_accent"
android:orientation="horizontal"
></LinearLayout>
</io.codetail.widget.RevealLinearLayout>
<ImageButton
android:id="#+id/img_floating_btn"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentRight="true"
android:layout_marginRight="40dp"
android:layout_marginTop="170dp"
android:background="#drawable/expand_btn"/>
</RelativeLayout>
My Activity java is
RevalAnimActivity.java
public class RevalAnimActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_reval_anim);
final ImageButton mFloatingButton = (ImageButton) findViewById(R.id.img_floating_btn);
mFloatingButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
animateButton(mFloatingButton);
}
});
}
private void animateButton(final ImageButton mFloatingButton) {
mFloatingButton.animate().translationXBy(0.5f).translationY(150).translationXBy(-0.9f)
.translationX(-150). setDuration(300).setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
animateReavel((int) mFloatingButton.getX(), 150,mFloatingButton);
}
});
}
private void animateReavel(int cx, int cy, final ImageButton mFloatingButton) {
final View myView = findViewById(R.id.ll_reveal);
// get the final radius for the clipping circle
float finalRadius = hypo(myView.getWidth(), myView.getHeight());
SupportAnimator animator =
ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
animator.addListener(new SupportAnimator.AnimatorListener() {
#Override
public void onAnimationStart() {
mFloatingButton.setVisibility(View.INVISIBLE);
myView.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd() {
Toast.makeText(getApplicationContext(), "Done", Toast.LENGTH_LONG)
.show();
}
#Override
public void onAnimationCancel() {
}
#Override
public void onAnimationRepeat() {
}
});
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.setDuration(1000);
animator.start();
}
static float hypo(int a, int b) {
return (float) Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
}
}
The solution to do that is pathInterpolator and the name of this effect is Curved Motion.
Animations in material design rely on curves for time interpolation
and spatial movement patterns. With Android 5.0 (API level 21) and
above, you can define custom timing curves and curved motion patterns
for animations.
You can see how to implement it here :
http://developer.android.com/training/material/animations.html#CurvedMotion
And sample on GitHub HERE :
I have a LinearLayout with some views init (transparent grey background, TextView, View, ...). And I want to animate that with a slideIn, slideOut animation (defined in xml).
When the first animation is finished, the second animation starts. During animation you can see a stuttering.
I nearly checked all posts, no one helped !
There is no complicated code.
Load animation from xml and start animation. If the first stops, the other starts.
here is my layout of the view, which will animated:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/overlay_deal"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="#dimen/spacing_small">
<TextView
android:id="#+id/text_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="2dp"
android:textAppearance="#style/TextAp.Dyn.Fixed.Small"
android:textColor="#color/white"
android:textStyle="bold" />
<TextView
android:id="#+id/text_header_promo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="#string/Corporate_Label_Title"
android:textAppearance="#style/TextAp.Dyn.Fixed.Small"
android:textColor="#color/white" />
</LinearLayout>
<View
android:id="#+id/text_header_underline"
android:layout_width="match_parent"
android:layout_height="3dp" />
<View
android:id="#+id/underline_spacer"
android:layout_width="match_parent"
android:layout_height="15dp"
android:background="#color/white"
android:visibility="gone" />
</LinearLayout>
This is the code:
private void initAnimations(Context context, final View defaultMoodBannerView) {
final int slideInFromTopAnimationId = R.anim.slide_in_from_top;
final int slideOutToTopAnimationId = R.anim.slide_out_to_top;
final int animationDuration = context.getResources().getInteger(android.R.integer.config_mediumAnimTime);
animationDefaultMoodBannerChangeToCorporate = AnimationUtils.loadAnimation(context, slideOutToTopAnimationId);
animationDefaultMoodBannerChangeToCorporate.setDuration(animationDuration);
animationDefaultMoodBannerSlideInFromTop = AnimationUtils.loadAnimation(context, slideInFromTopAnimationId);
animationDefaultMoodBannerSlideInFromTop.setDuration(animationDuration);
animationCorporateMoodBannerChangeToDefault = AnimationUtils.loadAnimation(context, slideOutToTopAnimationId);
animationCorporateMoodBannerChangeToDefault.setDuration(animationDuration);
animationCorporateMoodBannerSlideInFromTop = AnimationUtils.loadAnimation(context, slideInFromTopAnimationId);
animationCorporateMoodBannerSlideInFromTop.setDuration(animationDuration);
animationCorporateMoodBannerSlideOutToTop = AnimationUtils.loadAnimation(context, slideOutToTopAnimationId);
animationCorporateMoodBannerSlideOutToTop.setDuration(animationDuration);
animationDefaultMoodBannerChangeToCorporate.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
if (corporateMoodBannerView != null) {
if (defaultMoodBannerView != null) {
defaultMoodBannerView.setVisibility(View.GONE);
}
corporateMoodBannerView.setVisibility(View.VISIBLE);
corporateMoodBannerView.startAnimation(animationDefaultMoodBannerSlideInFromTop);
}
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
animationCorporateMoodBannerChangeToDefault.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
if (defaultMoodBannerView != null) {
if (corporateMoodBannerView != null) {
corporateMoodBannerView.setVisibility(View.GONE);
}
defaultMoodBannerView.setVisibility(View.VISIBLE);
defaultMoodBannerView.startAnimation(animationDefaultMoodBannerSlideInFromTop);
}
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}