I have 4 clickable images surounding the center of my screen. Upon clicking one of the images I want the image to slide from it's current position to the center of the screen.
Once the image reaches the center of the screen I would like the image to flip and then have my fragment load.
How do I obtain this full sequence? I have my fragment loading but I am unsure of how to create an animation that slides my image from it's current position to the center. The layout of the page is know and is as follows.
1 2 3
4 5 6
7 8 9
where 2, 4, 6, 8 are my images that I want to slide and 5 is the position that I want them to slide to on click (then flip and show my fragment).
Thanks,
Dman
EDIT :
One thing I cannot get to occur is the events to play in sequence. Currently when i click the image it waits the offset that I have set on the flip_image.xml animation and then plays them all at once in the duration given to the flip_image.xml animation. Any help on this would be much appreciated.
slide_left.xml
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="-112%"
android:duration="1000"/>
slide_alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0.8"
android:toAlpha="1.0"
android:duration="1000" />
flip_image.xml
<?xml version="1.0" encoding="utf-8"?>
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="0.0"
android:toXScale="1.0"
android:pivotX="50%"
android:fromYScale="1.0"
android:toYScale="1.0"
android:startOffset="1000"
android:duration="200" />
Calling Code:
private void loadFragmentAnimation(final ImageView view, final int slideDirection) {
AnimationSet animSet = new AnimationSet(true);
animSet.addAnimation(AnimationUtils.loadAnimation(getActivity(), slideDirection));
animSet.addAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.slide_alpha));
animSet.addAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.flip_image));
animSet.setAnimationListener(new AnimationListener() {
public void onAnimationStart(Animation animation) {
}
public void onAnimationRepeat(Animation animation) {
}
public void onAnimationEnd(Animation animation) {
// mCallBack.categorySelected(view.getId());
}
});
view.startAnimation(animSet);
}
Use View animation.
Create an AnimationSet having a TranslateAnimation
followed by a ScaleAnimation to simulate a flip (you may need
to mirror the image on the other side of the flip. Perhaps there's
an easier way?).
Then set the animation to the ImageView using
setAnimation().
I guess you should be able to specify the animation in XML too.
Edit:
For the flip animation, you may refer to the following links:
Android Animations 3D flip
Android Animation - Flip
Related
I have a test Image: Width: 136px and Height: 168px.
It's location on the screen is: x:102 and y:768.
I'm using Animation to rotate this Image:
Animation rotate_animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
rotate_animation.reset();
tile_1.startAnimation(rotate_animation);
The associated xml is rotate.xml:
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:toYScale="0.0"
android:pivotX="100%"
android:pivotY="100%"
android:duration="2000" />
It rotates, but completely off the screen, and ends up back where it started.
It appears to be rotating around x:0 and y:0.
I want to rotate it in place, around it's center.
I've played around with the numbers in the xml, but it always makes a giant circle.
Thanks for any help :)
Try removing the toYScale and setting the pivots to 50%. This way it should rotate from the center of the image
Use this code instead in rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"
android:interpolator="#android:anim/cycle_interpolator"/>
</set>
Found a easy way to do a simple rotation.
My image is tile_1:
tile_1.animate().rotation(360);
HOWEVER, it will only work once unless you set up a Listener first, so full code for a quick 360 degree rotation with a reset to be able to do it again:
tile_1.animate().setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
tile_1.setRotation(0);
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
tile_1.animate().rotation(360);
// You must reset the rotation to 0. I found out that clearAnimation doesn't work here. When you go to rotate a second time, it does nothing because the Image is already rotated 360, even though it APPEARS to be reset; so you must set the rotation back to zero. Then it works perfectly. Hope this helps someone else :)
You can also add .setDuration here as well, so 'Last Line':
tile_1.animate().rotation(360).setDuration(1000);
One last thing: If you use this in conjunction with TranslateAnimation, and you set the duration on both to the same amount of time, it will move from point XY to point XY while completing 1 rotation. Very smooth looking. Thanks for input from all :)
Hello I want to create the dynamic user face model in android and display to the user.
I have searched and found that I need user different angles face frames (Images) like 14 to 16 images and for displaying purpose need to change images (frame) using opengl (for smoothness) on user finger swipe so it look like 3D Image.
But I want like some editing like(wear earing) in each frame and display to the user as like
https://lh3.googleusercontent.com/WLu3hm0nIhW5Ps9GeMS9PZiuc3n2B8xySKs1LfNTU1drOIqJ-iEvdiz-7Ww0ZX3ZtLk=h900
Please give me some suggestion or example on it.
I expect that your images fit in the memory.
You can add ImageView for every image to a FrameLayout and let just one ImageView be visible.
Then you can even use fade in / fade out animation to improve the effect when switching to next image.
ImageView[] imageViews;
int currentView = 0;
...
// fill imageViews
...
ImageView image1 = imageViews[currentView];
if (moveRight) {
if (++currentView >= imageViews.length) currentView = 0;
} else {
if (--currentView < 0) currentView = imageViews.length - 1;
}
ImageView image2 = imageViews[currentView];
image1.setVisibility(View.INVISIBLE);
image1.startAnimation(AnimationUtils.loadAnimation(context, R.anim.fade_out));
image2.setVisibility(View.VISIBLE);
image2.startAnimation(AnimationUtils.loadAnimation(context, R.anim.fade_in));
anim/fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<alpha
android:duration="150"
android:fromAlpha="0.0"
android:toAlpha="1.0"/>
</set>
anim/fade_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<alpha
android:duration="150"
android:fromAlpha="1.0"
android:toAlpha="0.0"/>
</set>
About hardware acceleration, I think in this case Android can handle it for you.
From Android 3.0 you can define it in the manifest for application or activity:
android:hardwareAccelerated="true"
Alternatively you can set it just for specific views.
Using XML:
android:layerType="hardware"
Using Java:
view.setLayerType(View.LAYER_TYPE_HARDWARE, null);
Here you can find more information about Hardware Acceleration
Hi guys i uses the code below to perform rotation but it only rotates one time and goes back to its original position, how to let the image stay at the rotated position?
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
android:startOffset="0"
/>
xml file of my code
Animation rotation = AnimationUtils.loadAnimation(this, R.anim.rotate);
a.startAnimation(rotation);
use:
anim.setFillAfter(true);
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.
I am creating an application and I'm including an animation. It is a rotation to the right, and what I am looking for is that in the same way that rotates clockwise, rotate left and return to the starting point as a pendulum (all with the same speed), only one time.
This is the animation:
<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromDegrees="0"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="50"
android:fillEnabled="true"
android:fillAfter="true"
/>
This animation begins when a previous animation ends:
AnimationListener animationInListener = new AnimationListener(){
#Override
public void onAnimationEnd(Animation animation) {
tv2.setText("GAME OVER");
count=count-count;
duracionAnim=2000;
tv1.startAnimation(animationRotateR);
tv1.startAnimation(animationRotateL);
}
I tried to make another animation with android: fromDegrees = "50" and android: toDegrees = "0", but not how to make it work one after the other.
I searched but did not find anything. Someone could help me?
I'm new to Android developing. I want some animations when clicking on the card and it will move around the screen and stay at its new position forever (its interactive area should change too).
At first the card is located at the center-bottom of the screen (XDelta= 50% YDelta = 70%) then it will move up straight to center of the screen (XDelta =50% and YDelta is 40%). Then it will move to its upper left (10 dp from the left of the screen and 10 dp from the top of the screen) Sorry I can't post images due to my lack of reputation.
And here's my code in res/anim/card1.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="200"
android:fromXDelta="50%"
android:fromYDelta="70%"
android:toYDelta="40%"
android:toXDelta="50%"
android:fillEnabled="true"/>
<translate
android:duration="100"
android:fillEnabled="true"
android:fromXDelta="50%"
android:fromYDelta="40%"
android:startOffset="200"
android:toXDelta="10"
android:toYDelta="10" />
</set>
And code to get it work when clicking on the card
Animation anim = AnimationUtils.loadAnimation(MainActivity.this,
R.anim.card1);
iv_card.startAnimation(anim);
... but it just don't animate the way I want. Please help me!!!!
Check Out this (http://www.tktutorials.com/2013/07/animation-in-android-using-xml-files.html) this may help your need. Alter the translate.xml file as per your need, which is located in Res->anim->translate.xml
And solution for your posting Image. My suggestion is upload your pic in googleDrive, then change the share setting for the particular pic from private to Public on web and use the url Link to your question.