首先上效果图
上图功能具体思路是一个activity跳转,跳转到一个新的页面查看图片,中间加了一个缩放的过渡动画。 要实现这种,我们要先去掉activity的跳转动画
startActivity(intent);
//取消activity动画
overridePendingTransition(0, 0);
然后就是属性动画的运用
要实现这种需要获得动画的初始位置,也就是第一个activity里的imageview的位置,
top_img.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(MainActivity.this, ImageActivity.class);
int[] screenLocation = new int[2];
top_img.getLocationOnScreen(screenLocation);
//传递动画初始位置以及imageview图片路径过去
intent.putExtra(LEFT, screenLocation[0]).
putExtra(TOP, screenLocation[1]).
putExtra(WIDTH, top_img.getWidth()).
putExtra(HEIGHT, top_img.getHeight()).
putExtra(IMAGE, image1);
startActivity(intent);
//取消activity动画
overridePendingTransition(0, 0);
}
});
然后在该位置上进行开始的缩放动画,
以及结束后缩放回到的地方
主要是使用到属性动画的translation、scale、pivot.
我们来介绍ObjectAnimator操作的属性。
translationX和translationY:这两个属性控制这View对象的移动,从图片布局的左上角坐标位置开始移动。
scaleX和scaleY:这两个属性控制着View对象围绕他的支点进行2D缩放。
pivotX和pivotY:这两个属性控制着View对象的支点位置,围绕这个支点进行旋转和缩放变换处理。默认情况下,该支点的位置就是View对象的中心点。
alpha:它表示View对象的alpha透明度。默认值是1(不透明),0代表完全透明(不可见)。
//进入动画
public void enterAnimation() {
//设置imageview动画的初始值
imageView.setPivotX(0);
imageView.setPivotY(0);
imageView.setScaleX(mWidthScale);
imageView.setScaleY(mHeightScale);
imageView.setTranslationX(mLeftDelta);
imageView.setTranslationY(mTopDelta);
//设置动画
TimeInterpolator sDecelerator = new DecelerateInterpolator();
//设置imageview缩放动画
imageView.animate().setDuration(DURATION).scaleX(1).scaleY(1).
translationX(0).translationY(0).setInterpolator(sDecelerator);
// 设置activity主布局背景颜色DURATION毫秒内透明度从透明到不透明
ObjectAnimator bgAnim = ObjectAnimator.ofInt(colorDrawable, "alpha", 0, 255);
bgAnim.setDuration(DURATION);
bgAnim.start();
}
//退出动画
public void exitAnimation(final Runnable endAction) {
TimeInterpolator sInterpolator = new AccelerateInterpolator();
//设置imageview缩放动画,以及缩放结束位置
imageView.animate().setDuration(DURATION).scaleX(mWidthScale).scaleY(mHeightScale).
translationX(mLeftDelta).translationY(mTopDelta)
.setInterpolator(sInterpolator).withEndAction(endAction);
// 设置activity主布局背景颜色DURATION毫秒内透明度从不透明到透明
ObjectAnimator bgAnim = ObjectAnimator.ofInt(colorDrawable, "alpha", 0);
bgAnim.setDuration(DURATION);
bgAnim.start();
}
进入动画: 设置动画时间、插值器和scale、translation动画效果。
imageView.animate().setDuration(DURATION).scaleX(1).scaleY(1).
translationX(0).translationY(0).setInterpolator(sDecelerator);
主页类MainActivity.java
package com.longsh.imageviewanimator;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import com.squareup.picasso.Picasso;
import static com.longsh.imageviewanimator.ImageActivity.HEIGHT;
import static com.longsh.imageviewanimator.ImageActivity.IMAGE;
import static com.longsh.imageviewanimator.ImageActivity.LEFT;
import static com.longsh.imageviewanimator.ImageActivity.TOP;
import static com.longsh.imageviewanimator.ImageActivity.WIDTH;
/**
* Created by q805699513 on 2017/2/2.
*/
public class MainActivity extends Activity {
private ImageView top_img;
private ImageView center_img;
private ImageView bottom_img;
String image1 = "https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=50b3fcc5dd3f8794c7f2407cb3726591/4afbfbedab64034fba06dd7ba6c379310b551d87.jpg";
String image2 = "https://images-cn.ssl-images-amazon.com/images/I/61PI88GEqTL.jpg";
String image3 = "https://images-cn.ssl-images-amazon.com/images/I/41fi2pEYkuL.jpg";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
top_img = (ImageView) findViewById(R.id.top_img);
center_img = (ImageView) findViewById(R.id.center_img);
bottom_img = (ImageView) findViewById(R.id.bottom_img);
Picasso.with(this).load(image1).into(top_img);
Picasso.with(this).load(image2).into(center_img);
Picasso.with(this).load(image3).into(bottom_img);
top_img.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(MainActivity.this, ImageActivity.class);
int[] screenLocation = new int[2];
top_img.getLocationOnScreen(screenLocation);
intent.putExtra(LEFT, screenLocation[0]).
putExtra(TOP, screenLocation[1]).
putExtra(WIDTH, top_img.getWidth()).
putExtra(HEIGHT, top_img.getHeight()).
putExtra(IMAGE, image1);
startActivity(intent);
//取消activity动画
overridePendingTransition(0, 0);
}
});
center_img.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(MainActivity.this, ImageActivity.class);
int[] screenLocation = new int[2];
center_img.getLocationOnScreen(screenLocation);
intent.putExtra(LEFT, screenLocation[0]).
putExtra(TOP, screenLocation[1]).
putExtra(WIDTH, center_img.getWidth()).
putExtra(HEIGHT, center_img.getHeight()).
putExtra(IMAGE, image2);
startActivity(intent);
//取消activity动画
overridePendingTransition(0, 0);
}
});
bottom_img.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(MainActivity.this, ImageActivity.class);
int[] screenLocation = new int[2];
bottom_img.getLocationOnScreen(screenLocation);
intent.putExtra(LEFT, screenLocation[0]).
putExtra(TOP, screenLocation[1]).
putExtra(WIDTH, bottom_img.getWidth()).
putExtra(HEIGHT, bottom_img.getHeight()).
putExtra(IMAGE, image3);
startActivity(intent);
//取消activity动画
overridePendingTransition(0, 0);
}
});
}
}
图片预览类
ImageActivity.java
package com.longsh.imageviewanimator;
import android.animation.ObjectAnimator;
import android.animation.TimeInterpolator;
import android.app.Activity;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.widget.ImageView;
import android.widget.LinearLayout;
import com.squareup.picasso.Picasso;
public class ImageActivity extends Activity {
private static final int DURATION = 666;
public final static String TOP = "top";
public final static String LEFT = "left";
public final static String WIDTH = "width";
public final static String HEIGHT = "height";
public final static String IMAGE = "image";
private ImageView imageView;
private int mLeftDelta;
private int mTopDelta;
private float mWidthScale;
private float mHeightScale;
private LinearLayout linearLayout;
private ColorDrawable colorDrawable;
private int intentTop;
private int intentLeft;
private int intentWidth;
private int intentHeight;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image);
Bundle bundle = getIntent().getExtras();
intentTop = bundle.getInt(TOP);
intentLeft = bundle.getInt(LEFT);
intentWidth = bundle.getInt(WIDTH);
intentHeight = bundle.getInt(HEIGHT);
String image = bundle.getString(IMAGE);
imageView = (ImageView) findViewById(R.id.imageView);
Picasso.with(this).load(image).into(imageView);
linearLayout = (LinearLayout) findViewById(R.id.linear_bg);
colorDrawable = new ColorDrawable(Color.BLACK);
//布局背景设置
linearLayout.setBackgroundDrawable(colorDrawable);
//ViewTreeObserver监听
if (savedInstanceState == null) {
ViewTreeObserver observer = imageView.getViewTreeObserver();
observer.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
imageView.getViewTreeObserver().removeOnPreDrawListener(this);
//坐标的获取设置
int[] screenLocation = new int[2];
imageView.getLocationOnScreen(screenLocation);
mLeftDelta = intentLeft - screenLocation[0];
mTopDelta = intentTop - screenLocation[1];
mWidthScale = (float) intentWidth / imageView.getWidth();
mHeightScale = (float) intentHeight / imageView.getHeight();
//开启缩放动画
enterAnimation();
return true;
}
});
}
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
exitAnimation(new Runnable() {
public void run() {
finish();
//取消activity动画
overridePendingTransition(0, 0);
}
});
}
});
}
@Override
public void onBackPressed() {
exitAnimation(new Runnable() {
public void run() {
finish();
//取消activity动画
overridePendingTransition(0, 0);
}
});
}
//进入动画
public void enterAnimation() {
//设置imageview动画的初始值
imageView.setPivotX(0);
imageView.setPivotY(0);
imageView.setScaleX(mWidthScale);
imageView.setScaleY(mHeightScale);
imageView.setTranslationX(mLeftDelta);
imageView.setTranslationY(mTopDelta);
//设置动画
TimeInterpolator sDecelerator = new DecelerateInterpolator();
//设置imageview缩放动画,以及缩放开始位置
imageView.animate().setDuration(DURATION).scaleX(1).scaleY(1).
translationX(0).translationY(0).setInterpolator(sDecelerator);
// 设置activity主布局背景颜色DURATION毫秒内透明度从透明到不透明
ObjectAnimator bgAnim = ObjectAnimator.ofInt(colorDrawable, "alpha", 0, 255);
bgAnim.setDuration(DURATION);
bgAnim.start();
}
public void exitAnimation(final Runnable endAction) {
TimeInterpolator sInterpolator = new AccelerateInterpolator();
//设置imageview缩放动画,以及缩放结束位置
imageView.animate().setDuration(DURATION).scaleX(mWidthScale).scaleY(mHeightScale).
translationX(mLeftDelta).translationY(mTopDelta)
.setInterpolator(sInterpolator).withEndAction(endAction);
// 设置activity主布局背景颜色DURATION毫秒内透明度从不透明到透明
ObjectAnimator bgAnim = ObjectAnimator.ofInt(colorDrawable, "alpha", 0);
bgAnim.setDuration(DURATION);
bgAnim.start();
}
}
以及需要对ImageActivity设置成背景透明的activity
大概就是这样了,源码有需要的话我也可以上传。