Qus :
What is the possible Solution for make the Animation and change the View Position simultaneously LIKE: Bird Flying ?
A arrow_anim.xml file for Animation :
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="#drawable/arrow" android:duration="1000" />
<item android:drawable="#drawable/arrow1" android:duration="1000" />
<item android:drawable="#drawable/arrow2" android:duration="1000" />
<item android:drawable="#drawable/arrow3" android:duration="1000" />
</animation-list>
Code snippet for Animation :
imageView.setBackgroundResource(R.drawable.arrow_anim);
AnimationDrawable anim = (AnimationDrawable) imageView.getBackground();
anim.start();
This is like standing Animation And I need to change Animation and their Position asa well as.
What class is helped me to acheive this bird functionality.
Edit 1 for the Code what I'm trying
imageView.setBackgroundResource(R.drawable.movie);
AnimationDrawable anim = (AnimationDrawable) imageView.getBackground();
anim.start();
TranslateAnimation trans = new TranslateAnimation(0, 0,
TranslateAnimation.ABSOLUTE, 250, 0, 0,
TranslateAnimation.ABSOLUTE, 250);
trans.setDuration(0);
AnimationSet animationSet=new AnimationSet(true);
animationSet.addAnimation(trans);
imageView.startAnimation(animationSet);
But this not working simultaneously. If something is missing, suggest me to correct it.
Now that i know what you want, you can just start() your AnimationDrawable and then start translate animation for a imageView like:
View.startAnimation(Animation);
This might give you an idea..
private void runAnimation(View view){
ValueAnimator vAnimator = ObjectAnimator.ofFloat(view, "alpha", 1,0f);
vAnimator.setDuration(1000);
vAnimator.setRepeatMode(ValueAnimator.REVERSE);
vAnimator.setRepeatCount(ValueAnimator.INFINITE);
ValueAnimator vAnimator2 = ObjectAnimator.ofFloat(view, "translationX", 100f);
vAnimator2.setDuration(1000);
vAnimator2.setRepeatMode(ValueAnimator.REVERSE);
vAnimator2.setRepeatCount(ValueAnimator.INFINITE);
AnimatorSet set = new AnimatorSet();
set.playTogether(vAnimator,vAnimator2);
set.setStartDelay(0);
set.start();
}
Related
I have the followin animation that scales an image from "invisible" to 60dp x 60dp adding a bounce effect. When this finishes it disappears with another scale effect
bounce_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false">
<set android:interpolator="#android:anim/bounce_interpolator">
<scale
android:fromXScale="0.1"
android:fromYScale="0.1"
android:toXScale="1.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1600" />
</set>
<set>
<scale
android:startOffset="1900"
android:duration="200"
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="0"
android:toYScale="0" />
</set>
</set>
This is my code to use this
MainActivity.java
final ImageView likeBig = findViewById(R.id.like_big);
final Animation bounceAnimation = AnimationUtils.loadAnimation(this, R.anim.bounce_animation);
bounceAnimation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
likeBig.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
likeBig.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
The problem is that when I do likeBig.setVisibility(View.VISIBLE); image becomes visible for a fraction of a second in full size before the scale animation starts. I need the image to be invisible until the animation begins.
What's wrong with my approach?
I con only guess why the View is visible in full size at the beginning of the animation: maybe onAnimationStart() fires when the animation begins calculating the next changes but before the screen is updated for the first time?
That being said, you can use property animations instead of View animations to achieve the desired effect:
First, let your View have a size of just 1dp x 1dp in the beginning. Instead of setting a pivot, embed it at the center of a FrameLayout of size 60dp x 60dp. If required, you can set the visibility of the FrameLayout to GONE after the animation has finished (in this case, you need to register an Animator.AnimatorListener).
<FrameLayout
android:layout_width="60dp"
android:layout_height="60dp">
<ImageView
android:id="#+id/like_big"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"
android:background="#0000ff"/>
</FrameLayout>
Next, the animations:
ObjectAnimator growX = ObjectAnimator.ofFloat(like_big,"scaleX", 1f, 60.0f);
ObjectAnimator growY = ObjectAnimator.ofFloat(like_big,"scaleY", 1f, 60.0f);
AnimatorSet growAnim = new AnimatorSet();
growAnim.playTogether(growX, growY);
growAnim.setDuration(1600);
growAnim.setInterpolator(new BounceInterpolator());
ObjectAnimator shrinkX = ObjectAnimator.ofFloat(like_big,"scaleX", 60.0f, 0.0f);
ObjectAnimator shrinkY = ObjectAnimator.ofFloat(like_big,"scaleY", 60.0f, 0.0f);
AnimatorSet shrinkAnim = new AnimatorSet();
shrinkAnim.playTogether(shrinkX, shrinkY);
shrinkAnim.setDuration(200);
shrinkAnim.setInterpolator(new LinearInterpolator());
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playSequentially(growAnim, shrinkAnim);
Start the animation by calling
animatorSet.start();
I want image to zoom out and scale as Twitter Splash screen animation but I am not able to first zoom out the image and scale. Here's is my code
imageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
imageView.animate()
.setStartDelay(500)
.setDuration(1000)
.scaleX(20)
.scaleY(20)
.alpha(0);
}
});
You didn't mention scale from variable
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" >
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.5"
android:toYScale="0.5" >
</scale>
</set>
You can do almost any animations with ObjectAnimator and it's very smooth.
Here is a sample code. In this case image will scale up from 1x to 2x, You can adjust the values as your need.Now if you want to scale down then change 2x to 0.5x which will scale down image to 50% of original image.
ObjectAnimator scaleXAnimation = ObjectAnimator.ofFloat(imageView, "scaleX", 1.0f, 2.0f);
scaleXAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
scaleXAnimation.setDuration(1500);
ObjectAnimator scaleYAnimation = ObjectAnimator.ofFloat(imageView, "scaleY", 1.0f, 2.0f);
scaleYAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
scaleYAnimation.setDuration(1500);
ObjectAnimator alphaAnimation = ObjectAnimator.ofFloat(imageView, "alpha", 1.0F, 0F);
alphaAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
alphaAnimation.setDuration(1500);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(scaleXAnimation).with(scaleYAnimation).with(alphaAnimation);
animatorSet.setStartDelay(500);
animatorSet.start();
i have an ImageView and would like to scale it smaller with animation.
i use
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<scale
android:fromXScale="1.0"
android:toXScale="0.7"
android:fromYScale="1.0"
android:toYScale="0.7"
android:pivotX="50%"
android:pivotY="10%"
android:duration="1500" />
</set>
This works good. But after the animation is finished the image gets back to its original size. Any ideas why?
Try with this code, it will not reset the image size after animation, here view is the imageview you want to animate.
ObjectAnimator scaleDownX = ObjectAnimator.ofFloat(view, "scaleX", 0.5f);
ObjectAnimator scaleDownY = ObjectAnimator.ofFloat(view, "scaleY", 0.5f);
scaleDownX.setDuration(1000);
scaleDownY.setDuration(1000);
AnimatorSet scaleDown = new AnimatorSet();
scaleDown.play(scaleDownX).with(scaleDownY);
scaleDown.start();
Ok, i found a solution. is this correct like this? or it is quick and dirty? ^^
ObjectAnimator scaleDownX = ObjectAnimator.ofFloat(image, "scaleX", 0.7f);
ObjectAnimator scaleDownY = ObjectAnimator.ofFloat(image, "scaleY", 0.7f);
scaleDownX.setDuration(1500);
scaleDownY.setDuration(1500);
ObjectAnimator moveUpY = ObjectAnimator.ofFloat(image, "translationY", -100);
moveUpY.setDuration(1500);
AnimatorSet scaleDown = new AnimatorSet();
AnimatorSet moveUp = new AnimatorSet();
scaleDown.play(scaleDownX).with(scaleDownY);
moveUp.play(moveUpY);
scaleDown.start();
moveUp.start();
A simplier answer is below;
imageview.animate().translationY(-200F).duration = 500
imageview.animate().scaleY(0.4F).duration = 500
imageview.animate().scaleX(0.4F).duration = 500
I wrote code which can change background image random every 5 second.now i want to use fade in/out animation to change background image,but I do not know how I can use this animation.
This is a my source:
void handlechange() {
Handler hand = new Handler();
hand.postDelayed(new Runnable() {
#Override
public void run() {
// TODO Auto-generated method stub
// change image here
change();
}
private void change() {
// TODO Auto-generated method stub
Random rand = new Random();
int index = rand.nextInt(image_rundow.length);
mapimg.setBackgroundResource(image_rundow[index]);
handlechange();
}
}, 4000);
}
At the moment everything is OK. I can change background image random,but I don't know how can I use animation fade in/out.
If anyone knows solution please help me,
thanks.
You need to call these codes.
First, you have to make two xml files for fade in & out animation like this.
fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:fillAfter="true"
android:duration="2000"
/>
</set>
fade_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:fillAfter="true"
android:duration="2000"
/>
</set>
Second, you have to run animation of imageView like below and also you have to set AnimationListener to change fadeout when fadein finish.
Animation fadeOut = AnimationUtils.loadAnimation(YourActivity.this, R.anim.fade_out);
imageView.startAnimation(fadeOut);
fadeOut.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
Animation fadeIn = AnimationUtils.loadAnimation(YourActivity.this, R.anim.fade_in);
imageView.startAnimation(fadeIn);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
For fade in animation , create new folder named 'anim' in your res folder and inside it, create 'fade_in.xml' with following code
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<alpha
android:duration="#android:integer/config_mediumAnimTime"
android:fromAlpha="0.0"
android:interpolator="#android:anim/decelerate_interpolator"
android:toAlpha="1.0" />
</set>
now to run this animation on your imageview, use following code in your activity
Animation anim = AnimationUtils.loadAnimation(YourActivity.this, R.anim.fade_in);
imageView.setAnimation(anim);
anim.start();
for fadeout animation, just swap values of android:fromAlpha and android:toAlpha
Hope this helps.
You can use relativeLayout, and add one layer of background view which set both height and width match_parent. All other UI element should put on top of this view. In your code. Define fadeOut and fadeIn animation. Find that background view by id, then do this:
xxxBackground.startAnimation(fadeOut);
xxxBackground.setBackgroundResource(R.drawable.your_random_pic);
xxxBackground.startAnimation(fadeIn);
You can use some interpolator to tune the performance.
You need AnimationDrawable with animation.
First step AnimationDrawable
-Create a file /res/anim/anim_android.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="false">
<item android:drawable="#drawable/android_1"
android:duration="100"/>
<item android:drawable="#drawable/android_2"
android:duration="100"/>
<item android:drawable="#drawable/android_3"
android:duration="100"/>
<item android:drawable="#drawable/android_4"
android:duration="100"/>
<item android:drawable="#drawable/android_5"
android:duration="100"/>
<item android:drawable="#drawable/android_6"
android:duration="100"/>
<item android:drawable="#drawable/android_7"
android:duration="100"/>
</animation-list>
-Add a ImageView with android:src="#anim/anim_android".
<ImageView
android:id="#+id/myanimation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#anim/anim_android" />
Second step
-In your activity create AnimationDrawable and Animation
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
animationDrawable.setOneShot(true);
animationDrawable.start();
Animation animation = AnimationUtils.loadAnimation(YourActivity.this, android.R.anim.fade_in);
imageView.setAnimation(animation);
animation.start();
animation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
Animation fadeOut = AnimationUtils.loadAnimation(YourActivity.this, android.R.anim.fade_out);
imageView.startAnimation(fadeOut);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
you don't need Handler.
Answer by kimkevin animates a View (be it an ImageView, TextView etc.) and not a background of a View. Which means if you want to just highlight any View, you'll have to add another View behind it (lets call it backgroundView) and animate that backgroundView.
Use the following code for animating background of a view
val startColor = view.solidColor
val endColor = ContextCompat.getColor(context, R.color.your_color)
val colorAnim = ObjectAnimator.ofInt(view, "backgroundColor", startColor, endColor, startColor)
colorAnim.duration = 2000
colorAnim.setEvaluator(ArgbEvaluator())
colorAnim.start()
I want to make an edittext which aligns in its parent's left and when users click it, edittext's width'll increase to right side. Here is the code that i used. But when animation ended, edittext width come to first size.Can any one help me.?And is there any solution to set "fillparent" to width's final size in animation?
Animation scaleAnimation = new ScaleAnimation(0, -500, 1, 1);
scaleAnimation.setDuration(750);
editText.startAnimation(scaleAnimation);
I added scaleAnimation.setFillAfter(true); before animation starts but i get this;
After 750ms, edittext is going to its first width.
This will definitely work for you.
Dynamic way of doing this:
ScaleAnimation animate = new ScaleAnimation(1, 2, 1, 1, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0);
animate.setDuration(700);
animate.setFillAfter(true);
target.startAnimation(animate);
Way of Using XML
scale.xml (Put this in res/anim folder)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="400"
android:fillAfter="true"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="0%"
android:pivotY="0%"
android:toXScale="2.0"
android:toYScale="1.0" >
</scale>
</set>
Java Code:
Animation anim = AnimationUtils.loadAnimation(Anims.this, R.anim.scale);
mEdittext.startAnimation(anim);
Do this
Animation scaleAnimation = new ScaleAnimation(0, -500, 1, 1);
scaleAnimation.setDuration(750);
scaleAnimation.setFillAfter(true);
editText.startAnimation(scaleAnimation);
Give a try to this one.
Animation scaleAnimation = new ScaleAnimation(0, -500, 1, 1);
scaleAnimation.setDuration(750);
scaleAnimation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
//Set your editext width to match parent using layout params
}
});
editText.startAnimation(scaleAnimation);
Use
scaleAnimation.setFillAfter(true);
Or use ObjectAnimator:
ObjectAnimator animWidth = ObjectAnimator.ofInt(your_view, "width", startWidth,endWith);
animWidth.setDuration(yourDuration);
animWidth.start();