i am making an android app and i am a newbie in development.
I created a startup animation for the app, using the app icon that is scaled from O% size to 100% size and rotated at the same time. This works allright. But i have a problem with it. In xml, the view visibility is set to gone initially. In code, i call image.setVisibility(View.VISIBLE) and then image.startAnimation(iconAnimation) . But the result is that i can see a flash of the ImageView before it starts animating, for like half a second or so. You can see the gif.
Gif:
see the gif
Can you help me with this? Thanks in advance.
My code:
runOnUiThread(new Runnable() {
#Override
public void run() {
// here
image.setVisibility(View.VISIBLE);
image.startAnimation(imageAnim);
//also found this somewhere, didn't help.
image.invalidate();
}
});
Layout xml:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="35sp"
android:text="Kytky"
android:layout_centerInParent="true"
android:id="#+id/welcome_text"
android:visibility="gone"/>
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#mipmap/ic_launcher"
android:layout_centerInParent="true"
android:id="#+id/welcome_image"
android:visibility="gone"/>
You can use value animator instead, You can hack through the animation
imageView.setPivotX(viewCenterX);
imageView.setPivotY(viewCenterY);
imageView.setScaleX(0);
imageView.setScaleY(0);
final FloatEvaluator scaleEvaluator = new FloatEvaluator();
final FloatEvaluator rotationEvaluator = new FloatEvaluator();
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1f);
valueAnimator.setDuration(TimeUnit.SECONDS.toMillis(1));
valueAnimator.setInterpolator(new DecelerateInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float fraction = animation.getAnimatedFraction();
float scale = scaleEvaluator.evaluate(fraction, 0f, 1f);
float rotation = rotationEvaluator.evaluate(fraction, 0f, 360f);
imageView.setScale(scale);
imageView.setRotation(rotation);
}
});
valueAnimator.start();
Start one more animator or use this same animator to slide the logo up. Using this animators you will have full control over your animation.
you can switch the view visibility when the animations starts
imageAnim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
image.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
image.startAnimation(imageAnim);
the blink happens because the view visibility far from starting the animations, so in the first frame it will have its real size, and after that starts the animation
You need to work with alpha as well...make it visible and set alpha to minimum value than set alpha gradually to maximum value with in handler.
Related
I placed an ImageView in the centre of the screen. I then wanted to animate it from the bottom to the centre. I reasoned to move it without delay out of the screen and then back the same value which would end in the centre. However, the animation makes it so the view will exit from top.
mLogoIV.animate().translationY(1000f).setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mLogoIV.animate().translationY(-1000f).setDuration(3000);
}
});
use translationYBy( to animate relative to the current position
https://developer.android.com/reference/android/view/ViewPropertyAnimator.html#translationYBy(float)
mLogoIV.animate().translationYBy(1000f).setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mLogoIV.animate().translationYBy(-1000f).setDuration(3000);
}
});
From the docs:
The amount to be animated by, as an offset from the current value.
vs what you are doing now:
The value to be animated to.
Use Object animator.
ObjectAnimator objectAnimator= ObjectAnimator.ofFloat(mLogoIV, "translationY", -750, 0);
objectAnimator.setDuration(1000);
objectAnimator.start();
I have an Activity with a toolbar (which is part of the SharedElements Activity entering animation) and below that toolbar are three ImageViews horizontally next to each other. In their XML implementation all three are set INVISIBLE.
What I'm trying to do is, to animate them sequentially "dropping" from behind the toolbar. My implemenation is this:
int delay = 500;
for (int y = 0; y < 3; y++) {
ObjectAnimator oa = ObjectAnimator.ofFloat(imageViews[y],
"translationY", -300, 0);
oa.setDuration(600);
oa.setStartDelay(delay);
oa.start();
imageViews[y].setVisibility(View.VISIBLE);
delay = delay+100;
}
}
As you can see, I'm iterating through the three ImageViews and start a animation for each one to go from a -300 X-position (which is behind the toolbar) to their normal position.
This animation works great - just as I want it to be, but the problem is, that right before all ImageViews are briefly flickering which I can't explain. I tried debugging, but while I'm going through the lines of that part my screen stays black. So I can't determine where/why the Views become visible.
Maybe you can help me to find my mistake.
Thank you, this is my working Code:
For all three ImageViews:
ObjectAnimator anim1Pin = ObjectAnimator.ofFloat(img_pinned, "translationY", -300, 0);
anim1Pin.setDuration(ANIMATON_DURATION);
anim1Pin.setStartDelay(300);
anim1Pin.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
img_pinned.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animator animation) {
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
And the AnimatorSet:
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(anim1Pin, anim2Alarm, anim3LED);
animatorSet.start();
Few things, first, the problem may be as simple as setting the visiblity state to GONE and then after animation starts, setting it to visible. However, I would also use AnimatorSet to play the animations together and add the delay rather than do it in a loop.
If you use AnimatorSet there is an onAnimationStart method in AnimationListener that you can use the set the visible to VISIBLE rather than do it how you have to ensure that they become visible at the right time.
I'm reading up on Android property animation and getting stuck on the ground floor. I have an ImageView (and a TextView) that I am trying to animate but there appears to be no "animate" method. I type myImageView. and there are many methods that dropdown but no animate method.
I'm using Java in Eclipse and I have see other code examples where it works.
This is my ImageView...
<ImageView
android:id="#+id/molePic"
android:layout_width="36dip"
android:layout_height="36dip"
android:layout_marginTop="7dip"
android:layout_marginLeft="20dip"
android:src="#drawable/mutebeacon36x36" />
The View.animate() method was added in API level 12 (Android 3.1). What version of Android are you compiling against?
here is an example animation method. it will translate a view 500 pixels to the right in 1000 millisecs.
public void startMyAnimation(final View view) {
TranslateAnimation animation = new TranslateAnimation(0, 500, 0, 0);
animation.setDuration(1000);
view.startAnimation(animation);
animation.setAnimationListener(new TranslateAnimation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
isAnimating = true;
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
});
}
and you call it like so
startMyAnimation(findViewById(R.id.molePic));
I'm trying to slide in a view on a RelativeLayout via an animation. Once the view is in place I have to alter the layout params of layout so that the new view doesn't block existing content. I call the code to update the layout after the animation but it occurs before the animation causing a block of area to be blank during the animation.
The following screens are before animation, during and after:
Here is the code. The relative layout is adjusted in onShowAd.
float fromY = getAdHeight();
float toY = 0;
TranslateAnimation slide = new TranslateAnimation(0,0,fromY,toY);
slide.setDuration(ANIMATION_RATE);
slide.setFillAfter(true);
mAdLayout.startAnimation(slide);
onShowAd();
mAdLayout.setVisibility(View.VISIBLE);
I tried differing orders of calling visible and other things as well as using a handler to postDelayed onShowAd() to wait the same amount of time as the ANIMATION_RATE however what happened you'd stare at the black box for the time it was post delayed and then have to wait for the animation so it was worse. In windows there's an API call LOCKWINDOWUPDATE that I could pass in a window handle to prevent updating...is there anything equivalent for a view in Android? Or any other ideas?
Incidentally when sliding the view OUT it works fine. Here is the code going the other way. onHideAd is where the layoutparams are modified in this one.
float toY = ((View) mAdLayout.getParent()).getBottom();
float fromY = 0;//toY - mAdLayout.getHeight();
TranslateAnimation slide = new TranslateAnimation(0,0,fromY,toY);
slide.setDuration(ANIMATION_RATE);
slide.setFillAfter(true);
mAdLayout.startAnimation(slide);
mAdLayout.setVisibility(View.GONE);
onHideAd();
Thanks for any suggestions!
EDIT: I added the listener and that doesn't take care of it. I have isolated it to the following code which in in the "onShowAd()" routine:
RelativeLayout.LayoutParams params = (android.widget.RelativeLayout.LayoutParams) mainFragmentContainer.getLayoutParams();
params.addRule(RelativeLayout.ABOVE, mAdLayout.getId());
mainFragmentContainer.setLayoutParams(params);
I've tried to further separate it by calling it with a handler.postDelayed and it seems like anywhere I place it in the chain of events causes it to occur BEFORE the animation itself shows. Very odd! :-(
This is the updated showAd routine. I tried reordering some of the calls as well.
float fromY = getAdHeight();
float toY = 0;
TranslateAnimation slide = new TranslateAnimation(0,0,fromY,toY);
slide.setDuration(ANIMATION_RATE);
slide.setFillAfter(true);
slide.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
onShowAd();
}
});
mAdLayout.setVisibility(View.VISIBLE);
mAdLayout.startAnimation(slide);
You should use an AnimationListener to accomplish what you are looking for. The problem you are running into is caused because the call to start animation returns instantly even though the animation doesn't complete for the time set to ANIMATION_RATE.
Ex for slide in:
float fromY = getAdHeight();
float toY = 0;
TranslateAnimation slide = new TranslateAnimation(0,0,fromY,toY);
slide.setDuration(ANIMATION_RATE);
slide.setFillAfter(true);
slide.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
onShowAd();
}
});
mAdLayout.setVisibility(View.VISIBLE);
mAdLayout.startAnimation(slide);
So I start my activity and then
setContentView(R.layout.myxmllayoutfile);
All is well, but I want to make my imagebutton suddenly grow (scale) from nothing (ie 1%). However the layout is already displaying the button so it suddenly disappears then grows back rather than growing from nothing.
I have some alternatives but is there a real solution?:
1. flying the imagebutton animate in from offscreen? ; or
2. making it tiny in the xml and then growing it, then if necessary changing the clickable area?; or
3. is there a better solution?
UPDATE:
As suggested I tried:
<ImageButton
android:id="#+id/spinner"
android:scaleType="fitXY"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/clear"
android:orientation="horizontal"
android:visibility="invisible"
android:src="#drawable/spin"
/>
and in my java:
scaleView.startAnimation(scanimation);
ImageButton spinnerbutton=(ImageButton)findViewById(R.id.spinner);
spinnerbutton.setVisibility(View.VISIBLE);
but it is still visible before it shrinks to 1% then grows! Suggestions welcome.
UPDATE2:
Nothing has changed with the edited below code:
public void growit() {
final ImageView scaleView = (ImageView) findViewById(R.id.spinner);
Animation scanimation = AnimationUtils.loadAnimation(this, R.anim.throbbing2);
scanimation.setFillAfter(true);
scanimation.setAnimationListener(new Animation.AnimationListener() {
public void onAnimationStart(Animation a) { Log.e("growit", "---- animation start listener called");
scaleView.setVisibility(View.VISIBLE);
}
public void onAnimationRepeat(Animation a) {
}
public void onAnimationEnd(Animation a) {
}
});
scaleView.startAnimation(scanimation);
}
Make imagebutton hidden.
Then in your animation set Animation listener and on start animation callback method set the button visible
UPDATE:
Animation animation = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
mImageButton.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) { }
#Override
public void onAnimationEnd(Animation animation) { }
});
mImageButton.startAnimation(animation);
No permanent solution. Just used a workaround of making it tiny in the xml and then growing it as suggested in the question as a possible "solution"/workaround but not ideal.