Run animation on different views together - android

I need to animate 2 views and I want the animation to start together. Here are my two animations:
ScaleAnimation scaleAnimation1 = new ScaleAnimation(image.getScaleX(), 1.0f, image.getScaleY(), 1.0f,Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(300);
scaleAnimation.setFillAfter(true);
scaleAnimation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
image.startAnimation(scaleAnimation);
ScaleAnimation scaleAnimation2 = new ScaleAnimation(logo.getScaleX(), 1.0f, logo.getScaleY(), 1.0f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(300);
scaleAnimation.setFillAfter(true);
scaleAnimation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
logo.startAnimation(scaleAnimation);
How can I do it? I need to do it programatically.
P.S. I don't have much experience in animation.

Here is sample for you )
public class AnimationUtils {
public static void applyAnimation(Context context, View view, int animationResource, int animationOffsetMilisec){
Animation anim = android.view.animation.AnimationUtils.loadAnimation(context, animationResource);
anim.setInterpolator(new AccelerateDecelerateInterpolator());
anim.setStartOffset(animationOffsetMilisec);
if(view != null) {
view.setAnimation(anim);
view.startAnimation(anim);
}
}
}
animation_tap.xml must be in res/anim/
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator">
<scale
android:duration="100"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="1.00"
android:toYScale="0.95"
android:pivotX="50%"
android:pivotY="50%"/>
<scale
android:duration="200"
android:fromXScale="1.0"
android:fromYScale="0.95"
android:toXScale="1.0"
android:toYScale="1.1"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="100"/>
</set>
and now whatever in code you can use:
AnimationUtils.applyAnimation(context,view1,R.anim.animation_tap,0);
AnimationUtils.applyAnimation(context,view2,R.anim.animation_tap,0);
AnimationUtils.applyAnimation(context,view3,R.anim.animation_tap,0);
//...

Related

How to run two different animations on recyclerView consecutively?

I have a horizontal recyclerView, I want to animate it (by sliding right and then left) when the activity is first opened.
So I do this in onCreate:
final Animation slideRight = AnimationUtils.loadAnimation(this, R.anim.slide_right);
slideRight.setDuration(200);
final Animation slideLeft = AnimationUtils.loadAnimation(this, R.anim.slide_left);
slideLeft.setDuration(200);
RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.startAnimation(slideRight);
recyclerView.startAnimation(slideLeft);
but seems like only the right slide works
here are my anims:
left slide
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<translate
android:duration="200"
android:fromXDelta="-100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%" />
</set>
right slide
<translate
android:duration="200"
android:fromXDelta="100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%" />
what am I doing wrong?
EDIT: how is this related to proposed duplicate?
try this one
Animation slideRight = AnimationUtils.loadAnimation(this, R.anim.slide_right);
Animation slideLeft = AnimationUtils.loadAnimation(this, R.anim.slide_left);
slideRight.setDuration(200);
slideLeft.setDuration(200);
slideRight .setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
recyclerView.startAnimation(slideLeft);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
recyclerView.startAnimation(slideRight);
In this case slideLeft animation will work.. because before the slideRight is working the slideleft is getting started.. so do like this...
slideRight.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
recyclerView.startAnimation(slideLeft);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
At the end of animation right start the animation left
Edit
Or you can start only one anim by adding repeatMode = reverse and repeatCount = 1` in your anim..
android:repeatMode="reverse" android:repeatCount="1"

Set animation rotation repeat back for layout

I want creat aniamtion rotation before it rotaion from 0 to -30 and after from -30 to 0 so I created two file animation
xoay.xml
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="-30"
android:pivotX="50%"
android:duration="6000"
android:repeatCount="infinite"
android:fillAfter="true" />
xoay2.xml
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="-30"
android:toDegrees="0"
android:pivotX="50%"
android:duration="6000"
android:repeatCount="infinite"
android:fillAfter="true" />
and in activity I start animation with code
final RotateAnimation rotate= (RotateAnimation) AnimationUtils.loadAnimation(this,R.anim.xoay);
final RotateAnimation rotate2= (RotateAnimation) AnimationUtils.loadAnimation(this,R.anim.xoay_2);
and when I set
myView.startAnimation(rotate); or myView.startAnimation(rotate2);
it run. Now I want when myView finish animation xoay.xml it will run xoay2.xml and when xoay2.xml finish it run xoay.xml...
I tried with code :
AnimationSet s = new AnimationSet(false);
s.addAnimation(rotate);
s.addAnimation(rotate2);
myView.startAnimation(s)
but it not run.
How I can do it? Thank you very much !
You can achieve that with RotateAnimation
Animation an = new RotateAnimation(0.0f, 30.0f);
// Set the animation's parameters
an.setDuration(6000); // duration in ms
an.setRepeatCount(-1); // -1 = infinite repeated
an.setRepeatMode(Animation.REVERSE); // reverses each repeat
an.setFillAfter(true); // keep rotation after animation
// Aply animation to image view
myView.setAnimation(an);
I will create for you Just copy it and apply on your project
Step-1: Create Animation xml files
rotate_1.xml
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="0"
android:duration="1200" />
rotate_2.xml
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="360"
android:toDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="0"
android:duration="1200" />
activity_main.xml
<TextView
android:id="#+id/tvDemo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:background="#color/colorAccent"
android:layout_gravity="center"
/>
MainActivity.java
TextView tvDemo;
boolean isFirstTime;
RotateAnimation rotate;
RotateAnimation rotate2;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tvDemo = (TextView) findViewById(R.id.tvDemo);
rotate = (RotateAnimation) AnimationUtils.loadAnimation(this, R.anim.rotate_up);
rotate2 = (RotateAnimation) AnimationUtils.loadAnimation(this, R.anim.rotate_down);
tvDemo.startAnimation(rotate);
rotate.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
tvDemo.startAnimation(rotate2);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
rotate2.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
tvDemo.startAnimation(rotate);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
isFirstTime = false;
tvDemo.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
isFirstTime = true;
}
});
}
I Hope this code will work for you
Thank you
Better you user Animators instead
AccelerateInterpolator ACCELERATE_INTERPOLATOR = new AccelerateInterpolator();
AnimatorSet animatorSet = new AnimatorSet();
ObjectAnimator rotationAnim = ObjectAnimator.ofFloat(((StoryHolder) holder).ivLike, "rotation", 0f, -30f);
rotationAnim.setRepeatCount(ValueAnimator.INFINITE);
rotationAnim.setDuration(300);
rotationAnim.setInterpolator(ACCELERATE_INTERPOLATOR);
ObjectAnimator rotationAnim2 = ObjectAnimator.ofFloat(((StoryHolder) holder).ivLike, "rotation", 0f, -30f);
rotationAnim2.setRepeatCount(ValueAnimator.INFINITE);
rotationAnim2.setDuration(300);
rotationAnim2.setInterpolator(ACCELERATE_INTERPOLATOR);
animatorSet.play(rotationAnim).before(rotationAnim2);
animatorSet.start();
//ROTATION
ObjectAnimator.ofFloat(yourView, View.ROTATION, 0f, 180f).setDuration(300).start();
//ROTATION Back
ObjectAnimator.ofFloat(yourView, View.ROTATION, 180f, 0F ).setDuration(300).start();

How to add delay between animations

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()

Rotate animation after Translate doesn't work on Android

I'm trying to implement an app with animations. I want to get this sequence:
1 - Moving a image horizontally
2 - Rotate the image 90ยบ
3 - Move the image vertically
But in step 2, the image does not rotate on itself and moves to original position to rotate.
What is my mistake?
sequential.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="#android:anim/linear_interpolator" >
<translate
android:duration="1000"
android:fillAfter="true"
android:fromXDelta="0%p"
android:startOffset="500"
android:toXDelta="83%p" />
</set>
Main.java
RotateAnimation animRotar1;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imagenPacman = (ImageView) findViewById(R.id.imagen);
fondoImagen = (RelativeLayout) findViewById(R.id.fondo_imagen);
animRotar1 = new RotateAnimation(0, 90,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animPacman = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.sequential);
animPacman.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
rotar1();
}
});
fondoImagen.startAnimation(animPacman);
}
private void rotar1() {
animRotar1.setInterpolator(new LinearInterpolator());
animRotar1.setDuration(1000);
animRotar1.setFillEnabled(true);
animRotar1.setFillAfter(true);
fondoImagen.startAnimation(animRotar1);
}
like this:
here you have to caliculate the distance of the target position after translate animation,
EDIT:
float pivotX=(getResources().getDisplayMetrics().widthPixels/100)*83;
RotateAnimation animation2 = new RotateAnimation(0,90,Animation.RELATIVE_TO_PARENT,pivotX,Animation.RELATIVE_TO_PARENT,0);

How to apply Scale animation After Translate animation in android

Hi am doing one app here i need to apply rotate,move scale animation to my imageview..i tried using below code rotate and scale animation working well but in scale animation image is not scaling in where translate animation stoped that postion its coming back to original postion there its scaling..but i need to scale image where my image stoped using translate animation..where i did mistake any one suggest me thanks
public class MainActivity extends Activity {
ImageView i1;
TranslateAnimation moveLefttoRight1;
Animation logoMoveAnimation;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
i1=(ImageView)findViewById(R.id.img);
final Animation myRotation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate1);
i1.startAnimation(myRotation);
moveLefttoRight1 = new TranslateAnimation(0, 0, 0, 200);
moveLefttoRight1.setDuration(2000);
moveLefttoRight1.setFillAfter(true);
myRotation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
i1.startAnimation(moveLefttoRight1);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
logoMoveAnimation = AnimationUtils.loadAnimation(this, R.anim.sacle);
moveLefttoRight1.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
i1.startAnimation(logoMoveAnimation);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
}
scale.xml:
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="0.5"
android:toXScale="2.0"
android:fromYScale="0.5"
android:toYScale="2.0"
android:pivotX="0%"
android:pivotY="100%"
android:startOffset="0"
android:duration="1000"
android:fillAfter="true" />
rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<rotate android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="0"
android:duration="3000"/>
</set>
u may try
after translation has finished
img.setTranslation(value);
value = the position where image should be after translation

Categories

Resources