初级文章,大神请轻喷
先上效果图:
知识要点:
属性动画的使用
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
先取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,所以移动动画需要加上偏移量。
由上图可知,改变了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的主题
布局文件上记得
android:fitsSystemWindows="true"
查看大图的activity主题
主要是为了防止返回的时候入口activity跳动。
最后是传送门。
转载请注明出处:https://www.jianshu.com/p/dffca954fb52