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);
Related
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();
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);
//...
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()
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
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 );
}
}