初级文章，大神请轻喷
先上效果图：
效果.gif
知识要点：
属性动画的使用
Android顶部状态栏的隐藏（Theme）
一、属性动画
本文主要用了缩放动画，重点在于缩放动画的起始位置的计算。
1、先计算原小图与全屏大图的缩放比例mScale
public static float getCurrentPicOriginalScale(Context context, JPhotosInfos infos){
float mScale;
int width = infos.getWidth();
int height = infos.getHeight();
float imgScale = JBitmapUtils.getImgScale(width, height);
float mWindowScale = JWindowUtil.getWindowScale(context);
if(imgScale >= mWindowScale){
mScale = width * 1.0f / JWindowUtil.getWindowWidth(context);
}else{
mScale = height * 1.0f / JWindowUtil.getWindowHeight(context);
}
return mScale;
}
2、计算缩放动画的起始点
首先获取到小图在整个屏幕中的位置及大小
public static Rect getDrawableBoundsInView(ImageView iv) {
if (iv == null || iv.getDrawable() == null) {
return null;
}
Drawable d = iv.getDrawable();
Rect result = new Rect();
iv.getGlobalVisibleRect(result);
Rect tDrawableRect = d.getBounds();
android.graphics.Matrix drawableMatrix = iv.getImageMatrix();
float[] values = new float[9];
if (drawableMatrix != null) {
drawableMatrix.getValues(values);
}
result.left = result.left + (int) values[android.graphics.Matrix.MTRANS_X];
result.top = result.top + (int) values[android.graphics.Matrix.MTRANS_Y];
result.right = (int) (result.left + tDrawableRect.width() * (values[android.graphics.Matrix.MSCALE_X] == 0 ? 1.0f : values[android.graphics.Matrix.MSCALE_X]));
result.bottom = (int) (result.top + tDrawableRect.height() * (values[android.graphics.Matrix.MSCALE_Y] == 0 ? 1.0f : values[android.graphics.Matrix.MSCALE_Y]));
return result;
}
图片宽高及大小用于计算缩放动画的起始位置pivotX，pivotY
pivot.png
先取X轴为例，如上图：
红点为起始缩放点，黑线为最终长度，那么只要计算红点距离起始点的长度就可以了，可得公式：
localX = pivot / (1-mScale)
Y轴同上逻辑，以代码形式：
int width = infos.getWidth();
int height = infos.getHeight();
int localX = infos.getLeft();
int localY = infos.getTop();
float windowScale = JWindowUtil.getWindowScale(JApp.getIns());
float imgScale = JBitmapUtils.getImgScale(width, height);
if(imgScale >= windowScale){
animImgStartHeight = JWindowUtil.getWindowHeight(JApp.getIns()) * originalScale;
pivotX = localX / (1 - originalScale);
pivotY = (localY - (animImgStartHeight - height) / 2) / (1 - originalScale);
}else{
animImgStartWidth = JWindowUtil.getWindowWidth(JApp.getIns()) * originalScale;
pivotX = (localX - (animImgStartWidth - width) / 2) / (1 - originalScale);
pivotY = localY / (1 - originalScale);
}
PS：关于起始位置的计算，我脑子短路了好久，其实就是缩放度为0的那个点的坐标，那既然知道小图片的位置，宽高，以及缩放度，那就简单了。
最后别忘了setPivotX和setPivotY，至此打开动画的设置完成。
3、手势滑动
这里借用了GalleryFinal的PhotoView，在其基础上添加了自定义的OnViewDragListener
public static interface OnViewDragListener {
/**
* A callback to receive where the user taps on a ImageView. You will receive a callback if
* the user taps anywhere on the view, dragging on 'whitespace' will not be ignored.
*
* @param x - where the user dragged from the left of the View.
* @param y - where the user dragged from the top of the View.
*/
void onViewDrag(float x, float y);
void onDragFinish();
}
x和y分别是在其坐标轴上的偏移量。
手势移动监听回调：
private void startDrag(float x, float y){
mViewPager.setTranslationX(x);
mViewPager.setTranslationY(y);
if(y > 0){
mViewPager.setPivotX(JWindowUtil.getWindowWidth(this) / 2);
mViewPager.setPivotY(JWindowUtil.getWindowHeight(this) / 2);
float scale = Math.abs(y) / JWindowUtil.getWindowHeight(this);
if(scale < 1 && scale > 0) {
mViewPager.setScaleX(1-scale);
mViewPager.setScaleY(1-scale);
mRlRoot.setBackgroundColor(Color.parseColor(JStringUtils.getBlackAlphaBg(1-scale)));
}
}
}
这里重新设置了PivotX和PivotY，设置为大图中心，不然滑动的缩放会跑偏。
4、退出动画
这个和开始动画差不多，唯一要注意的是，当用手势滑动过以后，由于重新设置过PivotX和PivotY，所以移动动画需要加上偏移量。
对比.png
由上图可知，改变了pivot之后，Translation动画需要加上相应地偏移量才能保证初始位置没有变化。
ObjectAnimator animatorTransX = ObjectAnimator.ofFloat(target, View.TRANSLATION_X,
target.getTranslationX() +
(JWindowUtil.getWindowWidth(JApp.getIns()) / 2 * (1 - target.getScaleX()) -
target.getPivotX() * (1 - target.getScaleX())),
0);
ObjectAnimator animatorTransY = ObjectAnimator.ofFloat(target, View.TRANSLATION_Y,
target.getTranslationY() +
(JWindowUtil.getWindowHeight(JApp.getIns()) / 2 * (1 - target.getScaleY()) -
target.getPivotY() * (1 - target.getScaleY())),
0);
好了，一整套流程总算是走完了。
二、主题设置
这个比较简单了
在入口的activity的主题
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
布局文件上记得
android:fitsSystemWindows="true"
查看大图的activity主题
<style name="FullscreenTransTheme" parent="AppTheme">
<item name="android:actionBarStyle">@style/FullscreenActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowBackground">@color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowFullscreen">true</item>
</style>
<style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
<item name="android:background">@color/transparent</item>
</style>
主要是为了防止返回的时候入口activity跳动。
最后是传送门。
网友评论