最近做一個專案類似於QQ空間，做到照片瀏覽的功能，對於QQ空間中點選圖片放大至全屏，感覺效果很贊，於是也做了個類似的效果。如下。

我不知道QQ那個是怎麼做的，我的思路如下：

首先，從圖片縮略介面跳轉到圖片詳情頁面，應該是從一個Activity跳轉到另外一個Activity，應該圖片詳情頁面也有很多操作，用View或者Dialog不是很好。所以現在難點就是，如何使得前一個介面的ImageView在另外一個介面做縮放切割動畫。

一般縮略介面的ImageView的是如上圖所示的正方形的，並且是CENTER_CROP縮放屬性的。CENTER_CROP屬性會導致ImageView中顯示的Bitmap有被切割達到填充的效果。

而詳情頁面的ImageView一般都是FIT_CENTER的縮放屬性。所以要保證這個跳轉動畫的流暢，要做如下的變化：

1、Bitmap的縮放，因為縮圖和詳情圖的縮放比例肯定不一樣

2、Bitmap位置的平移，因為縮圖的位置是不確定的，我們要使他平移到中間

3、Bitmap的切割，因為CENTER_CROP是切割過得，而FIT_CENTER是沒有切割的，那麼兩幅圖顯示的內容區域是不同的，所以也要顯示區域的平滑變換。

要完成上面的效果，如果單單是指對ImageView做一個動畫變換，我覺得是完成不了這個要求的。所以自己重寫了ImageView來完成上述的變換。

直接貼上主要的ImageView

[java]  view plain  copy  

1. package com.roamer.ui.view;  
2.   
3. import android.animation.Animator;  
4. import android.animation.PropertyValuesHolder;  
5. import android.animation.ValueAnimator;  
6. import android.app.Activity;  
7. import android.content.Context;  
8. import android.graphics.Bitmap;  
9. import android.graphics.Canvas;  
10. import android.graphics.Matrix;  
11. import android.graphics.Paint;  
12. import android.graphics.Paint.Style;  
13. import android.graphics.drawable.BitmapDrawable;  
14. import android.util.AttributeSet;  
15. import android.util.Log;  
16. import android.view.animation.AccelerateDecelerateInterpolator;  
17. import android.widget.ImageView;  
18.   
19. /** 
20.  * 2d平滑變化的顯示圖片的ImageView 
21.  * 僅限於用於:從一個ScaleType==CENTER_CROP的ImageView，切換到另一個ScaleType= 
22.  * FIT_CENTER的ImageView，或者反之 (當然，得使用同樣的圖片最好) 
23.  *  
24.  * @author Dean Tao 
25.  *  
26.  */  
27. public class SmoothImageView extends ImageView {  
28.   
29.     private static final int STATE_NORMAL = 0;  
30.     private static final int STATE_TRANSFORM_IN = 1;  
31.     private static final int STATE_TRANSFORM_OUT = 2;  
32.     private int mOriginalWidth;  
33.     private int mOriginalHeight;  
34.     private int mOriginalLocationX;  
35.     private int mOriginalLocationY;  
36.     private int mState = STATE_NORMAL;  
37.     private Matrix mSmoothMatrix;  
38.     private Bitmap mBitmap;  
39.     private boolean mTransformStart = false;  
40.     private Transfrom mTransfrom;  
41.     private final int mBgColor = 0xFF000000;  
42.     private int mBgAlpha = 0;  
43.     private Paint mPaint;  
44.       
45.     public SmoothImageView(Context context) {  
46.         super(context);  
47.         init();  
48.     }  
49.   
50.     public SmoothImageView(Context context, AttributeSet attrs) {  
51.         super(context, attrs);  
52.         init();  
53.     }  
54.   
55.     public SmoothImageView(Context context, AttributeSet attrs, int defStyle) {  
56.         super(context, attrs, defStyle);  
57.         init();  
58.     }  
59.   
60.     private void init() {  
61.         mSmoothMatrix = new Matrix();  
62.         mPaint=new Paint();  
63.         mPaint.setColor(mBgColor);  
64.         mPaint.setStyle(Style.FILL);  
65. //      setBackgroundColor(mBgColor);  
66.     }  
67.   
68.     public void setOriginalInfo(int width, int height, int locationX, int locationY) {  
69.         mOriginalWidth = width;  
70.         mOriginalHeight = height;  
71.         mOriginalLocationX = locationX;  
72.         mOriginalLocationY = locationY;  
73.         // 因為是螢幕座標，所以要轉換為該檢視內的座標，因為我所用的該檢視是MATCH_PARENT，所以不用定位該檢視的位置,如果不是的話，還需要定位檢視的位置，然後計算mOriginalLocationX和mOriginalLocationY  
74.         mOriginalLocationY = mOriginalLocationY - getStatusBarHeight(getContext());  
75.     }  
76.   
77.     /** 
78.      * 獲取狀態列高度 
79.      *  
80.      * @return 
81.      */  
82.     public static int getStatusBarHeight(Context context) {  
83.         Class<?> c = null;  
84.         Object obj = null;  
85.         java.lang.reflect.Field field = null;  
86.         int x = 0;  
87.         int statusBarHeight = 0;  
88.         try {  
89.             c = Class.forName("com.android.internal.R$dimen");  
90.             obj = c.newInstance();  
91.             field = c.getField("status_bar_height");  
92.             x = Integer.parseInt(field.get(obj).toString());  
93.             statusBarHeight = context.getResources().getDimensionPixelSize(x);  
94.             return statusBarHeight;  
95.         } catch (Exception e) {  
96.             e.printStackTrace();  
97.         }  
98.         return statusBarHeight;  
99.     }  
100.   
101.     /** 
102.      * 用於開始進入的方法。 呼叫此方前，需已經呼叫過setOriginalInfo 
103.      */  
104.     public void transformIn() {  
105.         mState = STATE_TRANSFORM_IN;  
106.         mTransformStart = true;  
107.         invalidate();  
108.     }  
109.   
110.     /** 
111.      * 用於開始退出的方法。 呼叫此方前，需已經呼叫過setOriginalInfo 
112.      */  
113.     public void transformOut() {  
114.         mState = STATE_TRANSFORM_OUT;  
115.         mTransformStart = true;  
116.         invalidate();  
117.     }  
118.   
119.     private class Transfrom {  
120. 相關推薦

     Android點選縮圖，放大至全圖

     最近做一個專案類似於QQ空間，做到照片瀏覽的功能，對於QQ空間中點選圖片放大至全屏，感覺效果很贊，於是也做了個類似的效果。如下。 我不知道QQ那個是怎麼做的，我的思路如下： 首先，從圖片縮略介面跳轉到圖片詳情頁面，應該是從一個Activity跳轉到另外一個Activ

     Android點選縮圖檢視大圖的縮放動畫

     其實點選小圖顯示大圖非常簡單的一種實現方式就是，在佈局中加一個全屏的ImageView，然後隱藏。點選小圖就把圖片設定給大圖，然後大圖顯示。 這個文章裡也是這麼做的，不過這邊課程的重心在於講從縮圖到大圖的動畫過程。動畫的目的是讓過程看起來像是從小的縮圖

     android 點選縮圖檢視大圖

     android中點選縮圖檢視大圖的方法一般有兩種，一種是想新浪微博list頁面那樣，彈出一個視窗顯示大圖（原activity為背景）。另一種就是直接開啟一個新的activity顯示大圖。 1、第一種方法我們可以使用自定義的Dialog來實現： /** * 點選縮圖開啟

     Android 點選PopWindow外圍，PopWindow消失

     popupWindow.setOutsideTouchable(true); ColorDrawable dw = new ColorDrawable(Color.BLACK); popupWindow.setBackgroundDrawable(dw); popupWindow.

     Android 點選改變圖片，鬆開變成原來圖片

     這個是放在drawable下的檔案： <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">

     android點選home鍵，再次點選程式圖示重新啟動程式

     今天無意中在網上看到一個部落格，上邊記錄著一個問題，就是程式，點選home鍵，返回 桌面，然後再次點選圖示，結果程式重啟。 我當時覺得我的軟體應該沒這個問題吧，結果一試，竟然也有這樣的問題，就搜尋了一下，現在把解決方法記錄一下 分析原因：我將啟動的Activ

     Android瀏覽圖片，點選放大至全屏效果

     最近做一個專案類似於QQ空間，做到照片瀏覽的功能，對於QQ空間中點選圖片放大至全屏，感覺效果很贊，於是也做了個類似的效果。如下。 我不知道QQ那個是怎麼做的，我的思路如下： 首先，從圖片縮略介面跳轉到圖片詳情頁面，應該是從一個Activit

     android ImageView 手勢縮放，雙擊放大，自由滑動，多點觸控，慣性滑動

     相容viewPager import android.animation.ObjectAnimator; import android.animation.ValueAnimator; import android.content.Context; import android.graphics

     Android 點選圖片放大展示 展示中可調節圖片的縮放顯示 圖片檢視器

     1.首先需要初始化一個全域性常量 這個是常量的工具類 public final class GlobalConstant { private static int DEVICE_WIDTH; private static int D

     Android點選檢視大圖過渡動畫與圖片縮放與移動

     從一個activity到另一個activity的過渡 1.小圖點選事件程式碼 @Override public void onClick(View view) { switch (view.getId()) { case R.id.img_1:

     Android實現仿微信朋友圈釋出動態（拍照、相簿選擇、照片壓縮、顯示、儲存、縮圖、點選縮圖刪除對應檔案等）附原始碼

              原創作品，轉載請註明出處：http://blog.csdn.net/zhang3776813/article/details/52092591 最近專案需求中要用到類似微信朋友圈釋出動態選擇圖片的UI效果，研究了一下，特來分享成果，多的不說來看程式碼。

     js點選縮圖,整屏居中放大圖片

     需要實現的效果圖： 今天開發的時候，遇到要點選縮圖之後居中顯示圖片的大圖檢視（大致效果如上圖所示）~想了好幾種實現方式，最開始的時候，是想通過animate來點選圖片進行顯示，可是後來當我想要讓放大的圖片進行居中顯示和點選別的地方隱藏已顯示的

     Android 點選空白處自動隱藏輸入法，適用於activity與fragment和Dialog

     點選空白處自動隱藏輸入法這個需求很常見，最近也要用到，但是需要處理的頁面很零散的幾個。看到網上的有很多種方法，但是在fragment上會無效，後來發現一中思路，其實也很簡單，就是監聽需要處理介面的父佈局做處理就可以了。理論上無論是哪裡都適用。 <RelativeLayout xmlns

     android點選極光推送的通知跳轉到webview頁面顯示網頁，webview返回錯誤程式碼-6，無法連線伺服器

     這個bug比較坑，在webview中無法開啟，將地址複製到電腦瀏覽器中能正常開啟，網上搜索到的說無法連線伺服器是沒有加"http://"，可我是加了的，我加了還是打不開。某法了，去看看IP地址，終於讓我找到問題了。 後臺伺服器我搭建的是本地的，請求地址也是後臺返回來的，結果

     Android 點選 Home 鍵後再點選 APP圖示，APP 重新啟動了

     正常情況下，點選 Home 鍵回到桌面，App 程序沒有被殺掉，再次進入 APP 應該都是回到之前顯示的頁面。 但是在某些不知名的情況下，也可能是某些手機會有這個問題。點選了 APP圖示 是重新開啟 APP，但是從近期工作列裡面開啟是回到之前已經開啟的頁面。 解決辦法： 在

     手機端圖片點選預覽，雙指放大，完整demo，引入hammer.js

     程式碼凌亂，自己寫的絕對能用！ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

     Django寫一個裝飾器：從首頁點選詳情頁，如已登入，進詳情頁；如未登入，跳轉至登入頁面，登入成功後，跳轉至詳情頁

     有的網站需求，如果使用者未登入，能夠進入首頁，但當點選想要進入詳情頁的時候，就會跳轉到登入頁面，登入完成之後，有的需求需要進入首頁；有的需要進入點選登入之前你的意向頁面 第一種：登入之後，進入首頁。 第二種：登入之後，進入登入之前你點選想進入的意向頁面 那麼，對於第一種，登入之後，進入首

     Android點選文字編輯進行縮放、移動和改變字型、顏色的實現

     實現效果如下： 需求功能點包含： 1：介面的文字為動態新增； 2：點選介面中的文字，開啟編輯模式：可編輯文字內容，可設定字型顏色，字型型別，粗體及對齊等； 3：點選刪除從介面上清除文字塊； 4：拖動編輯模式下的文字塊的四個錨點，可以按文字中心位置縮放,同時工具欄跟隨文字

     Echarts統計圖，點選統計圖時，判斷點選的區域是不是統計圖區域

     下面的程式碼，是獲取點選統計圖區域的，也就是 X 軸和 Y 軸中的這個框框區域，如下圖的紅色框框中。 myCharts.getZr().on('click', function (params) {        const pointInPixel = [params.

     jquery 點選元素後，滾動條滾動至該元素位置

     點選元素後，滾動條滾動至該元素位置： $('a.lead-link').bind('click', function(e) { e.preventDefault(); $('html,body').animate({ scrollTop: $(this.