Android開發筆記——點選檢視大圖過渡動畫與圖片縮放與移動
從一個activity到另一個activity的過渡
1.小圖點選事件程式碼
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.img_1:
view.setClickable(false);
Intent intentS = new Intent(this, ImageActivity.class);
int[] screenLocationS = new int[2];
view.getLocationOnScreen(screenLocationS);
intentS.putExtra(LEFT, screenLocationS[0]).//將圖片位置傳到大圖activity用於動畫初始位置
putExtra(TOP, screenLocationS[1]).
putExtra(WIDTH, view.getWidth()).
putExtra(HEIGHT, view.getHeight()).
putExtra(IMAGE, _snapUrl).
putExtra(TITLE, _name);
startActivity(intentS);
overridePendingTransition(0, 0);//取消原有預設的Activity到Activity的過渡動畫
break;
case R.id.img_2:
view.setClickable(false);
Intent intentM = new Intent(this, ImageActivity.class);
int[] screenLocationM = new int[2];
view.getLocationOnScreen(screenLocationM);
intentM.putExtra(LEFT, screenLocationM[0]).//將圖片位置傳到大圖activity用於動畫初始位置
putExtra(TOP, screenLocationM[1]).
putExtra(WIDTH, view.getWidth()).
putExtra(HEIGHT, view.getHeight()).
putExtra(IMAGE, _matchUrl).
putExtra(TITLE, _name);
startActivity(intentM);
overridePendingTransition(0, 0);//取消原有預設的Activity到Activity的過渡動畫
break;
}
}
2.大圖Activity程式碼
public class BigImageActivity extends Activity implements View.OnClickListener {
private static final int DURATION = 150;
public final static String TITLE = "Title";
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 int mLeftDelta;
private int mTopDelta;
private float mWidthScale;
private float mHeightScale;
private int intentTop;
private int intentLeft;
private int intentWidth;
private int intentHeight;
private LinearLayout linearLayout;
private ColorDrawable colorDrawable;
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
FaceDetectionApp.setWindowTrans(this, true, false);
setContentView(R.layout.activity_image);
initView();
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(new Runnable() {
@Override
public void run() {
Matrix matrix = imageView.getMatrix();
imageView.setImageMatrix(matrix);
imageView.setScaleType(ImageView.ScaleType.MATRIX);
imageView.setOnTouchListener(new ImageTouchListener());
}
});
return true;
}
});
}
}
@Override
protected void initView() {
super.initView();
linearLayout = findViewById(R.id.ll_img);
imageView = findViewById(R.id.img);
initValue();
}
@Override
protected void initValue() {
super.initValue();
colorDrawable = new ColorDrawable(ContextCompat.getColor(this, R.color.color_item_background));
linearLayout.setBackground(colorDrawable);
Bundle bundle = getIntent().getExtras();
if (bundle != null) {
title = bundle.getString(TITLE);
intentTop = bundle.getInt(TOP);
intentLeft = bundle.getInt(LEFT);
intentWidth = bundle.getInt(WIDTH);
intentHeight = bundle.getInt(HEIGHT);
String imgURL = bundle.getString(IMAGE);
asyncLoadImageSmallList(imageView, imgURL);//框架程式碼 不解釋
imageView.setOnClickListener(this);
}
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.img:
view.setClickable(false);
exitAnimation(new Runnable() {
public void run() {
finish();
overridePendingTransition(0, 0);
}
});
break;
}
}
@Override
public void onBackPressed() {
exitAnimation(new Runnable() {
public void run() {
finish();
overridePendingTransition(0, 0);
}
});
}
public void enterAnimation(final Runnable enterAction) {
imageView.setPivotX(0);
imageView.setPivotY(0);
imageView.setScaleX(mWidthScale);
imageView.setScaleY(mHeightScale);
imageView.setTranslationX(mLeftDelta);
imageView.setTranslationY(mTopDelta);
TimeInterpolator sDecelerator = new DecelerateInterpolator();
imageView.animate().setDuration(DURATION).scaleX(1).scaleY(1).
translationX(0).translationY(0).setInterpolator(sDecelerator).withEndAction(enterAction);
ObjectAnimator bgAnim = ObjectAnimator.ofInt(colorDrawable, "alpha", 0, 255);
bgAnim.setDuration(DURATION);
bgAnim.start();
}
public void exitAnimation(final Runnable endAction) {
TimeInterpolator sInterpolator = new AccelerateInterpolator();
imageView.animate().setDuration(DURATION).scaleX(mWidthScale).scaleY(mHeightScale).
translationX(mLeftDelta).translationY(mTopDelta).setInterpolator(sInterpolator).withEndAction(endAction);
ObjectAnimator bgAnim = ObjectAnimator.ofInt(colorDrawable, "alpha", 0);
bgAnim.setDuration(DURATION);
bgAnim.start();
}
}
3.縮放與移動程式碼
public class ImageTouchListener implements View.OnTouchListener {
private boolean isClick = false;
private int mode = 0;// default value
/**
* Drag mode
*/
private static final int MODE_DRAG = 1;
/**
* Zoom mode
*/
private static final int MODE_ZOOM = 2;
/**
* Beginning point
*/
private PointF startPoint = new PointF();
private Matrix matrix = new Matrix();
private Matrix currentMatrix = new Matrix();
/**
* Distance between two fingers
*/
private float startDis;
/**
* The middle point of two fingers
*/
private PointF midPoint;
private float values[] = {0, 0, 0, 0, 0, 0, 0, 0, 0};
private float touchX = 0;
private float touchY = 0;
private float scaleXY = 0;
@Override
public boolean onTouch(View v, MotionEvent event) {
ImageView imageView = (ImageView) v;
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
isClick = true;
mode = MODE_DRAG;
currentMatrix.set(imageView.getImageMatrix());
matrix.set(currentMatrix);
startPoint.set(event.getX(), event.getY());
touchX = event.getX();
touchY = event.getY();
if (scaleXY == 0) {
matrix.getValues(values);
scaleXY = values[0];
}
break;
case MotionEvent.ACTION_MOVE:
matrix.getValues(values);
if (mode == MODE_DRAG) {
float dx = event.getX() - startPoint.x;
float dy = event.getY() - startPoint.y;
if (dx > 15 || dx 15 || dy v.getWidth() - offset1 && touchX - event.getX() v.getHeight() - offset1 && touchY - event.getY()
0)) {
values[5] += event.getY() - touchY;
touchY = event.getY();
}
matrix.setValues(values);
imageView.setImageMatrix(matrix);
return true;
} else if ((values[2] + width 0)) {//move to left
values[2] = offset1 - width - 5;
if (!(values[5] > v.getHeight() - offset1 && touchY - event.getY()
0)) {
values[5] += event.getY() - touchY;
touchY = event.getY();
}
matrix.setValues(values);
imageView.setImageMatrix(matrix);
return true;
}
if ((values[5] > v.getHeight() - offset1 && touchY - event.getY() v.getWidth() - offset1 && touchX - event.getX() 0)) {
values[2] += event.getX() - touchX;
touchX = event.getX();
}
matrix.setValues(values);
imageView.setImageMatrix(matrix);
return true;
} else if ((values[5] + height 0)) {//move to top
values[5] = offset2 - height - 5;
if (!(values[2] > v.getWidth() - offset1 && touchX - event.getX() 0)) {
values[2] += event.getX() - touchX;
touchX = event.getX();
}
matrix.setValues(values);
imageView.setImageMatrix(matrix);
return true;
}
touchX = event.getX();
touchY = event.getY();
matrix.set(currentMatrix);
matrix.postTranslate(dx, dy);
} else if (mode == MODE_ZOOM) {
float endDis = distance(event);
if (endDis > 10f) {
float scale = endDis / startDis;
if (values[0] / scaleXY 3 && scale > 1) {
return true;
}
matrix.set(currentMatrix);
matrix.postScale(scale, scale, midPoint.x, midPoint.y);
}
isClick = false;
}
break;
case MotionEvent.ACTION_UP:
if (isClick) {
v.performClick();
}
case MotionEvent.ACTION_POINTER_UP:
isClick = false;
mode = 0;
break;
case MotionEvent.ACTION_POINTER_DOWN:
isClick = false;
mode = MODE_ZOOM;
startDis = distance(event);
if (startDis > 10f) {
midPoint = mid(event);
currentMatrix.set(imageView.getImageMatrix());
}
break;
}
imageView.setImageMatrix(matrix);
return true;
}
/**
* Calculate the distance between two fingers
*/
private float distance(MotionEvent event) {
float dx = event.getX(1) - event.getX(0);
float dy = event.getY(1) - event.getY(0);
return (float) Math.sqrt(dx * dx + dy * dy);
}
/**
* calculate the middle point of the two fingers
*/
private PointF mid(MotionEvent event) {
float midX = (event.getX(1) + event.getX(0)) / 2;
float midY = (event.getY(1) + event.getY(0)) / 2;
return new PointF(midX, midY);
}
}
4.大圖佈局檔案程式碼
做個筆記，留作以後，不保證編譯透過。並且部分程式碼漣源網路。
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/430/viewspace-2806125/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- android imageview 縮放檢視圖片AndroidView
- 直播電商平臺開發，Android | 圖片縮放、自動居中Android
- CSS 小結筆記之變形、過渡與動畫CSS筆記動畫
- CSS hover改變背景圖片過渡動畫生硬CSS動畫
- 淺談移動端圖片壓縮（iOS & Android）iOSAndroid
- 移動端圖片等比例縮放實踐
- vue圖片插入與設定夜間模式/動態過渡Vue模式
- VS+Qt+Halcon——顯示圖片，實現滑鼠縮放、移動圖片QT
- android短視訊開發，點選靜態圖片自動跳轉播放視訊Android
- 【Android 動畫】動畫詳解之仿微信檢視大圖效果（四）Android動畫
- android短影片開發，圖片視差滾動Android
- Android專案總結(3)-登入頁圖片迴圈過渡播放動畫效果Android動畫
- 移動開發時批處理壓縮圖片提高開發效率移動開發
- cdr怎麼檢視圖片縮圖win10_cdr如何檢視圖片縮圖win10Win10
- CSS3的過渡，動畫，圖形轉換CSSS3動畫
- Vue.js 動畫與過渡效果實戰Vue.js動畫
- .NetCore實現圖片縮放與裁剪 - 基於ImageSharpNetCore
- web前端頁面點選預覽圖片及大小縮放Web前端
- Android webview圖片過大AndroidWebView
- 視訊直播app原始碼，點選圖片放大再點選縮小APP原始碼
- css揭祕實戰技巧 - 過渡與動畫[七]CSS動畫
- 開源圖片工具箱(Img Toolbox) 格式轉換 新增水印 圖片壓縮 圖片裁剪 圖片旋轉 圖片縮放
- js實現移動端圖片預覽：手勢縮放， 手勢拖動，雙擊放大...JS
- 直播app開發搭建，Android studio 圖片壓縮APPAndroid
- SwiftUI圖片處理(縮放、拼圖)SwiftUI
- 短視訊app開發，短視訊動態功能上傳圖片時，規定圖片壓縮的大小APP
- Android檢視動畫集合AndoridViewAnimationsAndroid動畫View
- Android-壓縮大圖到容量超小的圖片Android
- 阿里Android開發規範：Bitmap、Drawable 與動畫阿里Android動畫
- 短視訊app原始碼，點選檢視圖片，雙指放大APP原始碼
- 【CSS】圖片動畫特效（相框）CSS動畫特效
- 從傳統動畫到react動畫過渡動畫React
- android短視訊開發，呼叫相機、相簿，壓縮圖片後上傳Android
- DRF思維導圖（單獨新視窗開啟圖片可檢視大圖）
- HarmonyOS NEXT應用開發之圖片縮放效果實現
- vant upload 圖片壓縮(個人筆記)筆記
- 移動端使用localResizeIMG4壓縮圖片並上傳
- 滑鼠拖動圖片，禁止在新視窗中開啟圖片