I wanna make an animation. It has to fade in and fade out.
Works, but, I have to make it inifinite. The animation works once time.
This is my code:
Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setInterpolator(new DecelerateInterpolator()); //add this
fadeIn.setDuration(1000);
Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setInterpolator(new AccelerateInterpolator()); //and this
fadeOut.setStartOffset(1000);
fadeOut.setDuration(1000);
final AnimationSet animation = new AnimationSet(false); //change to false
animation.addAnimation(fadeIn);
animation.addAnimation(fadeOut);
animation.setRepeatCount(Animation.INFINITE);
animation.setRepeatMode(Animation.REVERSE);
linearLayout.setAnimation(animation);
I'm trying to solving like this:
Click here
But is not the same case. I'm doing everything programatically.
Somebody can help me?
Thanks!
Try this:
Animation fadeIn , zoomout;
private void setAnimationOnPlayButton(){
fadeIn = AnimationUtils.loadAnimation(getActivity(), R.anim.fadeIn );
fadeOut = AnimationUtils.loadAnimation(getActivity(), R.anim.fadeOut );
btnPlayVideoInPlayer.setAnimation(fadeIn);
btnPlayVideoInPlayer.setAnimation(fadeOut);
btnPlayVideoInPlayer.startAnimation(fadeIn);
fadeIn .setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation arg0) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation arg0) {
btnPlayVideoInPlayer.startAnimation(zoomout);
}
});
fadeOut.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation arg0) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation arg0) {
btnPlayVideoInPlayer.startAnimation(fadeIn );
}
});
}
Where R.anim.fadein and R.anim.fadeout is animation file in anim folder
I just tested this code and it works exactly how you want it to.
First of all make a new android resource directory under src>main>res called anim.
Then make a new animation resource file and call it anim_fade.xml.
Paste the following code in it.
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="1000" android:repeatMode="reverse"
android:repeatCount="infinite"/>
After you do that go to your java file and start the animation in your class. If you want it to start on app launch then paste it in your onCreate method, and if you want it to start onClick or anywhere else paste it in that class.
public void example{
//Major Animation code here
Animation fade = AnimationUtils.loadAnimation(this, R.anim.anim_fade);
linearlayout.startAnimation(fade);
}
Related
I'm having a trouble with animations in android. I have my animation_char.xml:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="300"
android:fromAlpha="0.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toAlpha="1.0"/>
</set>
That is ok, but in my MainActivity I want to start an animation one after one. So I created a method to make it more easy and just change the ImageView
public void animation(ImageView imageView){
animation = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.animation_char);
imageView.startAnimation(animation);
}
And for make consecutives animations, I'm trying to use AnimatorSet. But as I read AnimatorSet works with Animator, not with Animation. So my question is:
is there a way to load an animation in a animator?? Or should I use another way in order to achieve what I want to do? Thanks in advance!
EDIT
I changed my method and now Im trying with this but the problem is that all the images appear at the same time, how can I add some delay between animations?
public void animation() {
animation= AnimationUtils.loadAnimation(getApplicationContext(),R.anim.animation_char);
w.startAnimation(animation);
a.startAnimation(animation);
r.startAnimation(animation);
}
Actually I've answered on this question here. You should start your second animation in onAnimationEnd of AnimationListener of first animations. The same for second one.
You should use AnimationSet class instead of AnimatorSet.
For instance
AnimationSet as = new AnimationSet(true);
as.setFillEnabled(true);
as.setInterpolator(new BounceInterpolator());
as.addAnimation(firstAnim);
as.addAnimation(secondAnim);
as.setDuration(1000);
imageView.startAnimation(as);
I put this here maybe it helps someone...
I did something like this. I have 3 images that I want to fall one after the other.
note1 = findViewById(R.id.note1);
note1.setVisibility(View.INVISIBLE);
note2 = findViewById(R.id.note2);
note2.setVisibility(View.INVISIBLE);
note3 = findViewById(R.id.note3);
note3.setVisibility(View.INVISIBLE);
Setting visibility so that they are not shown initially
And then create 3 animations
Animation slideDown = AnimationUtils.loadAnimation(this, R.anim.slide_down);
note1.startAnimation(slideDown);
final Animation slideDown2 = AnimationUtils.loadAnimation(SplashScreen.this, R.anim.slide_down);
final Animation slideDown3 = AnimationUtils.loadAnimation(SplashScreen.this, R.anim.slide_down);
Next step is to add the event listeners that #Divers added:
slideDown.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
note1.setVisibility(View.VISIBLE);
note2.startAnimation(slideDown2);
slideDown2.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
note3.startAnimation(slideDown3);
note2.setVisibility(View.VISIBLE);
slideDown3.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
note3.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
And that's all
My animation xml is something like
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="800"
android:fromXDelta="0%"
android:fromYDelta="-50%p"
/>
<alpha
android:duration="500"
android:fromAlpha="0.1"
android:toAlpha="1.0"
/>
</set>
If you use Kotlin, you can use this way:
doOnEnd {startDelay = 1000L
start() }
Where repeatCount = 1
look at this example:
val animations = arrayOf(-140f).map { translation ->
ObjectAnimator.ofFloat(binding.viewYatch, "translationX", translation).apply {
//Update
duration = 800
repeatCount = 1
repeatMode = ObjectAnimator.RESTART
doOnEnd {
startDelay = 1000L
start()
}
}
}
val set = AnimatorSet()
set.playTogether(animations)
set.start()
I'm doing some translate animations with a view. I'm trying both ways: By xml and programmatically.
This is how I have defined the translation by xml:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0%" android:toYDelta="-70%" android:duration="1000"/>
</set>
This way it works fine, but I've realized that I better need the programmatically way as using the animationListener I can define actions to occurr when the animation finishes.
This is how I do it programmatically:
slide_up = new TranslateAnimation(valuesContainer.getX(),
valuesContainer.getX(),
valuesContainer.getY(),
valuesContainer.getY() - 70);
slide_up.setDuration(1000);
slide_up.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
//SOMETHING HAPPENS
}
});
The problem comes when defining the fromYDelta and toYDelta values (the image just moves in the Y axis). In the xml, I do it using percentages (%) and it works the way I need, but I don't know how to set the values this same way but programmatically.
I have come to a solution combining both of this methods.
I define the animation in a xml like this, called f.e. slide_up_anim.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0%" android:toYDelta="-70%" android:duration="1000"/>
</set>
And then, I set the AnimationListener for this animation this way:
slide_up = AnimationUtils.loadAnimation(getActivity(), R.anim.slide_up_anim);
slide_up.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
});
This way I can define the fromYDelta and toYDelta in percentage, and also listen for animation events.
i'd like to make a translateAnimation in my Android app with the code below :
TranslateAnimation anim = new TranslateAnimation(0,0,-400,0);
anim.setDuration(400);
anim.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation animation) {
mlLinearLayout.clearAnimation();
mlLinearLayout.requestLayout();
mlLinearLayout.layout(mlLinearLayout.getLeft(), mlLinearLayout.getTop()+400, mlLinearLayout.getRight(), mlLinearLayout.getBottom());
}
});
anim.setInterpolator(new AccelerateInterpolator());
anim.setFillEnabled(true);
anim.setFillAfter(true);
anim.setFillBefore(false);
mlLinearLayout.startAnimation(anim);
active=false;
but when this animation was done, the LinearLayout back to his start place even if I rebuild my view with the new position. How can I change it please ?
I finally found solution :
TranslateAnimation anim = new TranslateAnimation(0,0,0,400);
anim.setDuration(400);
anim.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation animation) {
mlLinearLayout.layout(mlLinearLayout.getLeft(), mlLinearLayout.getTop()+400, mlLinearLayout.getRight(), mlLinearLayout.getBottom());
}
});
anim.setFillEnabled(true);
anim.setFillAfter(false);
anim.setFillBefore(false);
mlLinearLayout.startAnimation(anim);
active=false;
As i rebuild my view after translation, fillafter isn't usefull, Now it's working perfect without lag and jump !
Ok, so I have a View where its being animated with the following code:
RelativeLayout rl = (RelativeLayout) findViewById(R.id.productPage_parentLayout_RL);
ImageView iv = new ImageView( ProductPage.this );
imageLoader.DisplayImage(FULL_PRODUCT_INFO.getFirstImage(), iv);
Animation animation = new TranslateAnimation(0, helper.getDeviceWidth() - 100,0, 0);
animation.setDuration(1000);
animation.setFillAfter(true);
rl.addView(iv);
With this code, the view starts from the left side of the screen and moves to almost the end of the screen, but I also want to fade-out the view and hide/destroy it in the end. I tried to search anything related to this, but couldn't find any.
Any help is appreciated.
Try this
ObjectAnimator move=ObjectAnimator.ofFloat(iv, "translationY",100f);
move.setDuration(3000);
ObjectAnimator alpha1=ObjectAnimator.ofFloat(iv, "alpha",0.5f);
alpha1.setDuration(1000);
ObjectAnimator alpha2=ObjectAnimator.ofFloat(iv, "alpha",0);
alpha2.setDuration(2000);
AnimatorSet animset=new AnimatorSet();
animset.play(alpha2).before(alpha1).with(move);
animset.start();
Animation a = new AlphaAnimation(1.0f, 0.0f);
a.setDuration(1000);
a.setFillAfter(true);
iv.startAnimation(a);
AnimationSet set = new AnimationSet(true);
set.addAnimation(animation)
set.addAnimation(a)
set.setFillAfter(true);
iv.startAnimation(set);
set.setAnimationListener(new AnimationListener() {
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
public void onAnimationEnd(Animation animation) {
iv.setVisibility(View.INVISIBLE);
}
});
I have an ImageView image. I need to rotate this image 90 degrease right and after that to move this image from left to right. I managed how to do that. I used AnnimationListener and after rotation finished I started moveAnimation(). But before moving image returns to it original look(before rotation).
xml code for rotation rotation.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:interpolator="#android:anim/linear_interpolator"
android:toDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
android:startOffset="0"
/>
rotateAnimation()
private void rotateAnimation(){
Animation rotation = AnimationUtils.loadAnimation(getContext(), R.anim.rotate);
rotation.setRepeatCount(0);
rotation.setFillAfter(true);
rotation.setAnimationListener(new AnimationListener() {
public void onAnimationEnd(Animation animation) {
moveAnnimation();
}
});
moveAnnimation()
private void moveAnnimation(){
TranslateAnimation moveLefttoRight = new TranslateAnimation(0, 2000, 0, 0);
moveLefttoRight.setDuration(1000);
moveLefttoRight.setFillAfter(true);
moveLefttoRight.setAnimationListener(new AnimationListener() {
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
}
});
image.startAnimation(moveLefttoRight);
}
You need to setFillAfter(true) for both the rotation and translation Animation object.
Animation.html#setFillAfter(boolean)
If fillAfter is true, the transformation that this animation performed will persist when it is finished. Defaults to false if not set. Note that this applies to individual animations and when using an AnimationSet to chain animations.
Following is my code, you need AnimationSet to achieve the chaining Animation Effect.
public class MainActivity extends Activity {
ImageView image = null;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
image = (ImageView)findViewById(R.id.imageview);
animateImageView();
}
private void animateImageView() {
AnimationSet set = new AnimationSet(true);
set.setFillAfter(true);
Animation rotation = AnimationUtils.loadAnimation(this, R.anim.rotation);
TranslateAnimation moveLefttoRight = new TranslateAnimation(0, 200, 0, 0);
moveLefttoRight.setDuration(1000);
moveLefttoRight.setStartOffset(1000);
set.addAnimation(rotation);
set.addAnimation(moveLefttoRight);
image.startAnimation( set );
}
}