I have an activity (A) that launches another activity (B) after a calculation. My problem is that when Activity B is launched, an arrow drawable that is supposed to move from left to right while incrementing in size (scaled from .33 to 1) is first displayed for a very short fraction of time before it starts the tween animation. The end result is a bothering flicker of the full size drawable right before it starts animating.
Everything seems to point that the problem is related to the animation file (.xml) and not to the java class. This can be observed when I delete the line arrowImage.startAnimation(arrowExtent); in the following code:
protected void arrowAnimation(Animation arrowExtent) {
// TODO Auto-generated method stub
arrowImage.setImageResource(R.drawable.arrowimage);
arrowImage.startAnimation(arrowExtent);
arrowExtent.setFillAfter(true);
I have tried the following:
Using setImageDrawable instead of setImageResource to the Drawable object.
Setting arrowImage.setFillBefore(false);
Any recommendations will be greatly appreciated.
The animation xml is as follows:
<?xml version="1.0" encoding="utf-8"?>
<set android:interpolator="#android:anim/accelerate_decelerate_interpolator">
<scale
android:fromXScale="0.33"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="0"
android:duration="1000"
android:fillBefore="false" />
<translate
android:fromXDelta="0%"
android:toXDelta="75%p"
android:duration="1000" />
</set>
When activity start you should make ImageView invisible in xml or in onCreate() and when animation starts, you should change it to visible.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// referencing views etc.
arrowImage.setVisibility(View.INVISIBLE);
// or make image invisible in xml
}
protected void arrowAnimation(Animation arrowExtent) {
arrowExtent.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
arrowImage.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) { }
#Override
public void onAnimationEnd(Animation animation) { }
});
arrowImage.setImageResource(R.drawable.arrowimage);
arrowImage.startAnimation(arrowExtent);
}
Related
I use API 10.
I have an ImageView nested inside of a LinearLayout. The ImageView has an OnClickListener (or an OnTouchListener, I'm sure which one I ll use at the end). The ImageView is centered on the screen, and when clicked it performs the following animation.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillEnabled="true"
android:fillAfter="true"
>
<alpha
android:fromAlpha="1"
android:toAlpha="0"
android:duration ="500"
/>
<translate
android:fromXDelta="0%"
android:toXDelta="-100%p"
android:duration ="1000"
/>
</set>
The problem is that after the animation ends, it returns to its first position, faded out to 0, but it is still clickable even if it doesn't show up. I click on an empty space where the ImageView was first positioned, and it performs the the animation again. Like clicking a ghost.
How do I make it so that the ImageView stays at the position written at android:toXDelta ??
You can set an animationListener to your animation to tackle the problem, I created this simple fonction:
public void startAnimation(final View v, final int animationResourceId, AnimationListener l){
Animation anim;
if(v!=null){ // can be null, after change of orientation
anim = AnimationUtils.loadAnimation(v.getContext(),resId);
v.setAnimation(anim);
anim.setAnimationListener(l);
v.startAnimation(anim);
}
}
Then every time I need to animate an view, I can do something like this:
startAnimation(myView, R.anim.my_anim, new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
myView.setVisibility(View.GONE);
}
});
I am creating an animation in android for two buttons.Button1 moves from bottom center to center of the screen vertically upwards direction(say in 2 seconds).Once it reaches there,the image should be there for say 2 seconds.Then the second image moves from center_right side of the screen to the center_left side of the screen while the first button is still present.Can some body please tell me how to make the first image be there for some time on the screen.Following is my code :
R.anim.alpha
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="200%p"
android:toYDelta="-11%p"
android:duration="3000"
android:repeatCount="infinite"
/>
</set>
R.anim.anim_card
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="600%"
android:toXDelta="-100%"
android:repeatCount="infinite"
android:duration="4000"
android:fillAfter="true"
/>
</set>
And in Java code:
Animation a = AnimationUtils.loadAnimation(this, R.anim.alpha);
a.reset();
_image.clearAnimation();
_image.startAnimation(a);
Animation b =AnimationUtils.loadAnimation(this, R.anim.anim_card);
b.reset();
btn_card.clearAnimation();
btn_card.startAnimation(b);
You will have to use AnimationListener for that:
Animation a = AnimationUtils.loadAnimation(this, R.anim.alpha);
a.reset();
_image.clearAnimation();
_image.startAnimation(a);
Animation b =AnimationUtils.loadAnimation(this, R.anim.anim_card);
b.reset();
a.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
btn_card.clearAnimation();
btn_card.startAnimation(b);
}
});
Hope it helps.
In my Android app, I have a floating Activity. It's started from outside my app using ActivityOptions.makeScaleUpAnimation to scale up from an "originating" rectangle. When my Activity finishes, I'd like it to do the reverse of that animation: i.e. it shrinks back to that rectangle as it fades out.
I know I can get the rectangle with getIntent().getSourceBounds(), and I'd hoped to be able to use overridePendingTransition() when finishing to achieve this effect, but overridePendingTransition() can only accept a fixed XML resource: there doesn't seem to be a way to make that animation depend on the source bounds. Is there something else I can use to achieve this effect?
My app is for API 11+, but as it's a cosmetic effect only, I'd be satisfied with a solution that depends on a later version.
I don think there is a way to scale down the activity window other than the overridePendingTransition call. However this code may help:
Scale up
ActivityOptions opts = ActivityOptions.makeCustomAnimation(getActivity(), R.anim.scale_up, 0);
startActivity(new Intent(this, SecondActivity.class),opts.toBundle());
Here is the scale_up animation file:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="0"
android:toXScale="1.0"
android:fromYScale="0"
android:toYScale="1.0"
android:pivotX="50%p"
android:pivotY="50%p"
android:duration="500"/>
</set>
Scale down
Call this code from the exiting activity:
finish();
overridePendingTransition(0, R.anim.scale_down);
Here is the scale_down animation file:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="1.0"
android:toXScale="0"
android:fromYScale="1.0"
android:toYScale="0"
android:pivotX="50%p"
android:pivotY="50%p"
android:duration="250"/>
</set>
You can vary the X and Y scale to get the desired rectangle. Hope this helps.
Based on my last comment, here is the solution which i have tried and it works. You may have to modify to suit your requirements.
Implement a Activity with Transparent background and with no title inside the manifest:
<activity
android:name="com.example.backgroundsensor.AnimatedActivity"
android:theme="#android:style/Theme.Translucent.NoTitleBar"
android:label="Animated activity" />
and let it set the content view with a layout as :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
tools:ignore="MergeRootFrame" >
<View
android:id="#+id/visibleAreaView"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:background="#android:color/holo_green_dark" />
</FrameLayout>
The visibleAreaView is the one you will see on the screen, since activity is transparent. You can set the bounds of the view in OnCreate of the activity().
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.animated_activity);
// set the bounds of the animateView
}
Also, Override the finish method something like this:
boolean animateFirst=true;
#Override
public void finish() {
if(animateFirst)
{
animateFirst = false;
loadAnim();
}else
{
super.finish();
}
}
public void loadAnim() {
View v = findViewById(R.id.animateView);
float x= v.getX() + v.getRight()/2;
float y = v.getY();
anim = new ScaleAnimation(1.0f, 0.0f,1.0f, 0.0f, x, y);
anim.setDuration(300);
anim.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation animation) {
findViewById(R.id.animateView).setVisibility(View.GONE);
AnimatedActivity.this.finish();
}
});
v.startAnimation(anim);
}
I have 2 imageview (a imageview for a pen image, and a imageview for a line, both are drawable), that each one has it own view animation that works perfectly.
my problem is that when I start the animation for the pen I want it to interact and animate the drawing of the line in the other view animation (I want that it will show as the pen is drawing the line), how do I do that?
my xml for animation for the pen imageview is:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0%p"
android:toXDelta="100%p"
android:fromYDelta="-50%p"
android:toYDelta="-50%p"
android:duration="2000"/>
</set>
my xml for animation for the line imageview is:
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="0%"
android:pivotY="50%"
android:fromXScale="0%"
android:toXScale="100%"
android:fromYScale="1.0"
android:toYScale="1.0"
android:fillAfter="true"
android:duration="2000"
android:interpolator="#android:anim/linear_interpolator"
/>
please help!
I believe this can be done with the help of animationListener. Add an animationListener for the pen's animation. In onAnimationStart method do lineImage.startAnimation(lineAnimation);
Sample:
penAnimation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
lineImage.startAnimation(lineAnimation);
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
I implement the translateAnimation to a imageview.
it Successfully animatated.
One translate is moving up and another one is moving down. i need to change image when start second translate.
My code is:
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:shareInterpolator="true">
<translate
android:fromXDelta="0%" android:toXDelta="0%p"
android:fromYDelta="0%" android:toYDelta="20%"
android:drawable="#drawable/bs_bunny1"
android:duration="2000" android:startOffset="100"/>
<translate
android:fromXDelta="0%" android:toXDelta="0%p"
android:fromYDelta="0%p" android:toYDelta="-20%p"
android:duration="3000" android:startOffset="100"/></set>
I set the above animation to the imageview.
But i want to chage the image when start to load the second translate.. How to do it.
You need to break it up into two animations, and register a Animation.AnimationListener to the first translate animation. On Animation.AnimationListener's onAnimationEnd(Animation animation) callback, do the image change and then start the second animation, like thus:
translate.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
view.setImageResource(resId);
view.startAnimation(translate2);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});