ImageView Tilt effect onTouch - android

I want to show tilt (pressed) effect by x degree on an ImageView where ever user touches on the image.
any Idea how can I achieve this?

Try this..
final ObjectAnimator forwardAnimator = ObjectAnimator.ofFloat(imageView,
"RotationX", 0, 20f);
forwardAnimator.setDuration(250);
final ObjectAnimator backwardAnimator = ObjectAnimator.ofFloat(imageView,
"RotationX", 20f, 0f);
backwardAnimator.setStartDelay(250);
backwardAnimator.setDuration(250);
imageView.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
forwardAnimator.start();
backwardAnimator.start();
}
});
This requries API level 11...because the ObjectAnimator supports from Api level 11

Related

android setBackground animation

Currently I set background of a LinearLayout using
BitmapDrawable bd = new BitmapDrawable(getResources(), mBlurredMap);
mLytProfileCover.setBackground(bd);
How can I animation this? For example, a fade-in animation where the background's alpha changes from 0 to 1 in 500ms.
Thanks.
ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(mLytProfileCover, View.ALPHA, 0.0f, 1.0f);
alphaAnimator.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(final Animator animation) {
mLytProfileCover.setBackground(bd);
}
});
alphaAnimator.setDuration(500);
alphaAnimator.start();

Android : Click event is not triggered at time of animation

I have a Button. On click of button i animate the TextView.
At the time of animation click is not working for texview.
buttonclick.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
final Animation animation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 1.0f,
Animation.RELATIVE_TO_SELF, 10.0f,
Animation.RELATIVE_TO_SELF, 1.0f,
Animation.RELATIVE_TO_SELF, 10.0f);
animation.setDuration(100000);
textView.startAnimation(animation);
}
});
textView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"Click",Toast.LENGTH_SHORT).show();
}
});
Animations are only animating views, not changing, its an illusion... You are using TranslateAnimation, so you are moving your views "look", not the view itself. Ewentually you may use setFillAfter(true) method, then View will be clickable AFTER animation end (but your anim is long/infinite...).
Consider using Animator instead, which is changing "parameters" (in your case real position) of view with every frame of anim
ObjectAnimator animX = ObjectAnimator.ofFloat(textView, "x", newx);
ObjectAnimator animY = ObjectAnimator.ofFloat(textView, "y", newy);
AnimatorSet animSetXY = new AnimatorSet();
animSetXY.playTogether(animX, animY);
animSetXY.start();
try this
PropertyValuesHolder x = PropertyValuesHolder.ofFloat("x", 50f);
PropertyValuesHolder y = PropertyValuesHolder.ofFloat("y", 100f);
ObjectAnimator.ofPropertyValuesHolder(mTextView, x, y).start();
this way, you can animate whole view object--not just the contents.

Animation for rotation android

Is there any way to rotate image like Handel down and up in one animation
like this animation is here what i want like 3d view..
Try this.
ObjectAnimator animation = ObjectAnimator.ofFloat(yourImageView, "rotationX", 0.0f, 90f);
animation.setDuration(1000);
animation.setRepeatCount(ObjectAnimator.INFINITE);
animation.setRepeatMode(ObjectAnimator.REVERSE);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.start();
The answer is simple, you have to set the pivot of the view so that on rotating you can rotate view by axis. (In your case, this code will keep the view bottom same and animate the top of the view like you showed in the video)
According to the image if the levers bottom box is 25percentage of the image height, then you have to calculate the axis of the image to rotate for 25%.
View v = findViewById(R.id.animate_view);
v.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(final View v) {
int percentageHeightOfBox = 25;
int height = v.getMeasuredHeight();
v.setPivotX(v.getMeasuredWidth() / 2);
v.setPivotY(height - ((height * percentageHeightOfBox) / 100));
ValueAnimator animator = ValueAnimator.ofFloat(0.0f, 90f);
animator.setDuration(1000);
animator.setRepeatCount(ObjectAnimator.INFINITE);
animator.setRepeatMode(ObjectAnimator.REVERSE);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float rotate = Float.parseFloat(animation.getAnimatedValue().toString());
v.setRotationX(rotate);
}
});
animator.start();
}
});

How to start an additional animation on a View without stopping its running animation?

I want an ImageView to be rotating all the time and make it bounce when the user clicks on it.
I have both animations but I can't start the bouncing animation without stopping the rotating one.
I don't want to start both animations at once.
Here is what I have.
AnimationSet doesn't seem to be what I need as the second animation has to start on click while the first one is running.
Does anybody know how to do this?
Thank you pskink, it works fine!
Here is the working code:
private ImageView rotating_image;
private AnimatorSet bounceAnimatorSet;
private ObjectAnimator rotationAnimator;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
...
rotating_image = (ImageView) findViewById(R.id.rotating_image);
if (rotating_image != null)
rotating_image.setOnClickListener(this);
setRotation();
rotationAnimator.start();
setBounceAnimators();
...
}
private void setRotation(){
rotationAnimator = ObjectAnimator.ofFloat(rotating_image, "rotation",0,360);
rotationAnimator.setDuration(4000);
rotationAnimator.setRepeatCount(ValueAnimator.INFINITE);
rotationAnimator.setRepeatMode(ValueAnimator.RESTART);
rotationAnimator.setInterpolator(new LinearInterpolator());
}
private void setBounceAnimators(){
bounceAnimatorSet = new AnimatorSet();
ObjectAnimator enlargeX = ObjectAnimator.ofFloat(rotating_image, "scaleX",1,1.5f);
enlargeX.setDuration(800);
enlargeX.setInterpolator(new LinearInterpolator());
ObjectAnimator enlargeY = ObjectAnimator.ofFloat(rotating_image, "scaleY",1,1.5f);
enlargeY.setDuration(800);
enlargeY.setInterpolator(new LinearInterpolator());
ObjectAnimator bounceX = ObjectAnimator.ofFloat(rotating_image, "scaleX", 1.5f, 1);
bounceX.setDuration(1000);
bounceX.setInterpolator(new BounceInterpolator());
ObjectAnimator bounceY = ObjectAnimator.ofFloat(rotating_image, "scaleY", 1.5f, 1);
bounceY.setDuration(1000);
bounceY.setInterpolator(new BounceInterpolator());
bounceAnimatorSet.play(enlargeX).with(enlargeY);
bounceAnimatorSet.play(bounceY).with(bounceX).after(enlargeY);
}

Enlarge ImageView within ListView with animation onClick

I am trying to implement an enlarge animation like it is in WhatsApp. I have a ListView where I have an ImageView at the left of each ListView item. A click on the ImageView should enlarge the image and show it in the middle (almost full screen width).
I tried the Android developer guide suggestion but it did not work for me. So I googled a little bit but could not find "the perfect answer". Here is what I got so far.
private void enlargeProfilePicture(View view, Drawable drawable, View convertView) {
fullScreenImageView.setImageDrawable(drawable);
Animation scale = new ScaleAnimation(
0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scale.setDuration(1000);
final Rect startBounds = new Rect();
final Rect finalBounds = new Rect();
final Point globalOffset = new Point();
convertView.getGlobalVisibleRect(startBounds);
rootView.getGlobalVisibleRect(finalBounds, globalOffset);
finalBounds.offset(-globalOffset.x, -globalOffset.y);
Animation translate
= new TranslateAnimation(startBounds.left,
finalBounds.left,
startBounds.top,
finalBounds.top);
translate.setInterpolator(new AnticipateInterpolator());
translate.setDuration(1000);
// Animation set to join both scaling and moving
AnimationSet animSet = new AnimationSet(true);
animSet.setFillEnabled(true);
animSet.addAnimation(scale);
animSet.addAnimation(translate);
// Launching animation set
animSet.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
fullScreenImageView.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
fullScreenImageView.startAnimation(animSet);
}
So root is the container in which my ListView is defined, fullScreenImageView is the ImageView which is showing the Drawable in its enlarged way, convertView is the view inside the ListView (the ListView item itself) and view is the ImageView clicked on.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/root">
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="#+id/full_size_profile_picture"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="invisible"/>
</RelativeLayout>
So basically what is going wrong is the translation. How can I find the right starting and ending coordinates for the translation? The scaling animation is working fine.
I'd use Animator rather than Animation.
Animator scaleX = ObjectAnimator.ofFloat(view, View.SCALE_X, 2f);
Animator scaleY = ObjectAnimator.ofFloat(view, View.SCALE_Y, 2f);
AnimatorSet animSet = new AnimatorSet();
animSet.setDuration(300).setInterpolator(new AccelerateDecelerateInterpolator());
animSet.playTogether(scaleX, scaleY);
animSet.start();
Animator is better than Animation, because it modifies the view's properties. Animation just modifies the appearance, but not the view itself.
Use that code if your app's minSdk is higher or equal to 14.
If your app requires at least sdk 11 use this one:
Animator scaleX = ObjectAnimator.ofFloat(view, "scaleX", 2f);
Animator scaleY = ObjectAnimator.ofFloat(view, "scaleY", 2f);
Alright, I fixed the issue. The problem was with how I used the animation constructors. I do not know where I got the code from but I just used it from somewhere else it obviously was working but not for my case. Here is one working example.
private void enlargeProfilePicture(View view, Drawable drawable) {
// view is the ImageView holding the image inside one ListView item
fullScreenImageView.setImageDrawable(drawable);
Animation scale = new ScaleAnimation(0f, 1f, 0f, 1f);
scale.setDuration(1000);
scale.setInterpolator(new LinearInterpolator());
final Rect startBounds = new Rect();
final Rect finalBounds = new Rect();
final Point globalOffset = new Point();
view.getGlobalVisibleRect(startBounds);
rootView.getGlobalVisibleRect(finalBounds, globalOffset);
finalBounds.offset(-globalOffset.x, -globalOffset.y);
Animation translate
= new TranslateAnimation(Animation.ABSOLUTE, startBounds.left + view.getWidth()/2,
Animation.ABSOLUTE, finalBounds.left,
Animation.ABSOLUTE, startBounds.top - view.getHeight()/2,
Animation.ABSOLUTE, finalBounds.top);
translate.setInterpolator(new LinearInterpolator());
translate.setDuration(1000);
// Animation set to join both scaling and moving
AnimationSet animSet = new AnimationSet(true);
animSet.setFillEnabled(true);
animSet.addAnimation(scale);
animSet.addAnimation(translate);
// Launching animation set
animSet.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
fullScreenImageView.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
fullScreenImageView.startAnimation(animSet);
}

Categories

Resources