I'm creating an android application. Now i want to open a new activity with zooming transition im using the following codes to acheive that but its not working.
private void centerAndZoomView( View view)
{
LinearLayout root = (LinearLayout) findViewById( R.id.top_root );
DisplayMetrics dm = new DisplayMetrics();
this.getWindowManager().getDefaultDisplay().getMetrics( dm );
int statusBarOffset = dm.heightPixels - root.getMeasuredHeight();
int originalPos[] = new int[2];
view.getLocationOnScreen( originalPos );
int xDest = dm.widthPixels/2;
xDest -= (view.getMeasuredWidth()/2);
int yDest = dm.heightPixels/2 - (view.getMeasuredHeight()/2) - statusBarOffset;
TranslateAnimation anim = new TranslateAnimation( 0, xDest - originalPos[0] , 0, yDest - originalPos[1] );
Animation scale
= new ScaleAnimation(1.0f,root.getMeasuredWidth()/view.getMeasuredWidth() , 1.0f, root.getMeasuredHeight()/view.getMeasuredHeight(),
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
scale.setInterpolator(new AccelerateInterpolator());
AnimationSet set = new AnimationSet(true);
set.addAnimation(anim);
set.addAnimation(scale);
set.setFillAfter(false);
set.setDuration(7000);
set.start();
view.startAnimation(set);
set.setAnimationListener(new AnimationListener()
{
#Override
public void onAnimationStart(Animation animation){}
#Override
public void onAnimationRepeat(Animation animation){}
#Override
public void onAnimationEnd(Animation animation)
{
callIntent();
}
});
}
Basically I want the effect that the new activity with zooming effect. But for now my current clicked button only zooming. How can I achieve that? please help me to solve this.
startActivity(intent);
overridePendingTransition(animationIn,animationOut);
zoom_in.xml
<?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"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="3"
android:toYScale="3" >
</scale>
zoom_out.xml
<?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>
Related
I want to have a button feedback like Spotify form my Buttons. That means when I click the button the button should be a bit smaller and it should get a light gray ton. That's easy I know but I don't know how to make that with an animation.
Thats the Sample-Button:<Button id="SpotifyButton"/>
I'm looking forward to getting a answer! :)
The hole answer based on the answer from Android Geek.
view_press.xml (in anim res folder)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true" android:fillBefore="true">
<scale
android:duration="100"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="70%"
android:pivotY="70%"
android:toXScale="0.95"
android:toYScale="0.95" >
</scale>
</set>
view_release.xml (in anim res folder)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true" android:fillBefore="true">
<scale
android:duration="100"
android:fromXScale="0.95"
android:fromYScale="0.95"
android:pivotX="70%"
android:pivotY="70%"
android:toXScale="1"
android:toYScale="1">
</scale>
</set>
CustomView
public class SpotifyButton extends AppCompatTextView {
int backgroundColor = ((ColorDrawable) getBackground()).getColor();
GradientDrawable gradientDrawable = getBackgroundShape(backgroundColor);
ValueAnimator defaultAnimator = getDefaultBackgroundAnimator(this);
public SpotifyButton (Context context) {
super(context);
setOnTouchListener();
setBackground(gradientDrawable);
}
public SpotifyButton (Context context, AttributeSet attrs) {
super(context, attrs);
setOnTouchListener();
setBackground(gradientDrawable);
}
public SpotifyButton (Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setOnTouchListener();
setBackground(gradientDrawable);
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
#Override
public boolean performClick() {
super.performClick();
return true;
}
public static int manipulateColor(int color, float factor) {
int a = Color.alpha(color);
int r = Math.round(Color.red(color) * factor);
int g = Math.round(Color.green(color) * factor);
int b = Math.round(Color.blue(color) * factor);
return Color.argb(a,
Math.min(r, 255),
Math.min(g, 255),
Math.min(b, 255));
}
public ValueAnimator getDefaultBackgroundAnimator(final View view) {
final float[] from = new float[3],
to = new float[3];
Color.colorToHSV(backgroundColor, from);
Color.colorToHSV(manipulateColor(backgroundColor, 0.7f), to);
ValueAnimator anim = ValueAnimator.ofFloat(0, 1);
anim.setDuration(200);
final float[] hsv = new float[3];
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
// Transition along each axis of HSV (hue, saturation, value)
hsv[0] = from[0] + (to[0] - from[0]) * animation.getAnimatedFraction();
hsv[1] = from[1] + (to[1] - from[1]) * animation.getAnimatedFraction();
hsv[2] = from[2] + (to[2] - from[2]) * animation.getAnimatedFraction();
gradientDrawable.setColor(Color.HSVToColor(hsv));
view.setBackground(gradientDrawable);
}
});
return anim;
}
public GradientDrawable getBackgroundShape(int color) {
GradientDrawable gradientDrawable = new GradientDrawable();
gradientDrawable.setShape(GradientDrawable.RECTANGLE);
gradientDrawable.setCornerRadius(100);
gradientDrawable.setColor(color);
return gradientDrawable;
}
public void setOnTouchListener() {
this.setOnTouchListener(new OnTouchListener() {
#SuppressLint("ClickableViewAccessibility")
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
Animation onclick_effect_press = AnimationUtils.loadAnimation(getContext(), R.anim.ui_view_feedback_press);
defaultAnimator.start();
v.startAnimation(onclick_effect_press);
return true;
case MotionEvent.ACTION_UP:
Animation onclick_effect_release = AnimationUtils.loadAnimation(getContext(), R.anim.ui_view_feedback_release);
defaultAnimator.reverse();
v.startAnimation(onclick_effect_release);
if (isMotionEventInsideView(v, event)) {
performClick();
}
return true;
}
return false;
}
});
}
private boolean isMotionEventInsideView(View view, MotionEvent event) {
Rect viewRect = new Rect(
view.getLeft(),
view.getTop(),
view.getRight(),
view.getBottom()
);
return viewRect.contains(
view.getLeft() + (int) event.getX(),
view.getTop() + (int) event.getY()
);
}
}
Resault
Happy coding!!
XML file
<LinearLayout
android:id="#+id/ll_done"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/bg_rect"
android:paddingStart="60dp"
android:paddingEnd="60dp"
android:paddingTop="20dp"
android:paddingBottom="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Done"
android:textColor="#android:color/white"/>
</LinearLayout>
set background to your layout of button. here background is bg_rect
drawable -- bg_rect is
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorPrimaryDark">
<item android:id="#android:id/mask">
<shape
android:shape="rectangle">
<solid android:color="#android:color/holo_green_light"/>
<corners android:radius="30dp"/>
</shape>
</item>
<item android:id="#android:id/background">
<shape
android:shape="rectangle">
<solid android:color="#5DA19C"/>
<corners android:radius="30dp"/>
</shape>
</item>
</ripple>
change solid android:color according to your need.
Create anim directory in res file then add animation file in anim folder:
Animation file -- onclick_effect.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="200"
android:fromXScale="0.9"
android:fromYScale="0.9"
android:pivotX="70%"
android:pivotY="70%"
android:toXScale="1"
android:toYScale="1" >
</scale>
</set>
Add click on button in java class:
llDone.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Animation onclick_effect = AnimationUtils.loadAnimation(this, R.anim.onclick_effect);
llDone.startAnimation(onclick_effect);
}
});
Change color,animation time according to your need.
I hope its work for you.
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 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);
I need to slow down an rotate animation over an imageview: it begin faster, then it should "decelerate" until end of animation (then rotation stop). I've write this:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<rotate
android:duration="100"
android:fromDegrees="0"
android:interpolator="#android:anim/cycle_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="30"
android:repeatMode="restart"
android:toDegrees="360" />
</set>
then add listener to animation:
Animation rotate = AnimationUtils
.loadAnimation(activity, R.anim.rotate);
ImageView logo = (ImageView) SplashScreen.activity
.findViewById(R.id.logo);
rotate.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation animation) {
Intent intent = new Intent(SplashScreen.this,
LoginActivity.class);
SplashScreen.this.startActivity(intent);
}
#Override
public void onAnimationRepeat(Animation animation) {
if(animation.getRepeatCount() == 5) {
animation.setDuration(200);
} else if (animation.getRepeatCount() == 10) {
Log.i("ANIM", "10");
animation.setDuration(5000);
} else if (animation.getRepeatCount() == 15) {
animation.setDuration(800);
} else if (animation.getRepeatCount() == 20) {
animation.setDuration(1600);
} else if (animation.getRepeatCount() == 25) {
animation.setDuration(2000);
}
}
});
logo.setAnimation(rotate);
logo.startAnimation(rotate);
but animation has always the same velocity (code never go into onAnimationRepeat). What's wrong?
Simply use
android:interpolator="#android:anim/decelerate_interpolator"
in your animation xml file.
check this link for other interpolators http://developer.android.com/reference/android/view/animation/package-summary.html
also add
android:repeatCount="1"
because the default is 0.
Try this :
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<rotate
android:duration="100"
android:fromDegrees="0"
android:interpolator="#android:anim/decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="30"
android:repeatMode="restart"
android:toDegrees="360" />
</set>
Change interpolator cycle_interpolator to decelerate_interpolator so that you get an effect which is faster at beginning and gradually slows down.