有关oppo蝴蝶解锁的三Ｄ技术

oppo手机的界面设计也是很漂亮的。在很多界面中使用了３Ｄ技术塑造出了大量华丽的效果。在蝴蝶解锁中使用了两个对称的三Ｄ变幻，宛如蝴蝶翅膀上美丽的花纹。在受到用户点击后，随风缓慢上下扇动，充满浪漫的动感色彩。这里只在技术角度做一些探索。

这个效果由两个子view合成，每个各占整个屏幕的一半。左边子view以右边界为旋转中心，手指向右滑动距离转为绕Ｙ轴施转的角度，角度为正。右边子view以左边界为旋转中心，手指向左滑动距离转为绕Ｙ轴旋转的角度，角度为负，这样恰好与x轴方向一致。这种效果经过转为，可以转为像两扇门一样开关，也是很有意思的。为了保证两个view的对称性，我这里使用一张图片，沿中线分割为两个view的背景。

可以使用函数Bitmap.createBitmap实现.

 

左view的背景，LeftView.java:

 

 

package com.magcomm.lockscrenn;

import android.content.Context;
import android.content.res.Configuration;
import android.graphics.Bitmap;
import android.graphics.Camera;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.view.View;

class LeftView extends View {
	Bitmap leftbm = null;
	public int g_r = 0;
	private int scr_w = 0, scr_h = 0;

	public void refrashView(int gr) {
		g_r = gr;
		invalidate();
	}
	public LeftView(Context context) {
		super(context);
	}

	void setBitmap(Bitmap bm) {
		leftbm = bm;
		scr_w = bm.getWidth() * 2;
		scr_h = bm.getHeight();
	}

	@Override
	protected void onConfigurationChanged(Configuration newConfig) {
		// TODO Auto-generated method stub
		super.onConfigurationChanged(newConfig);
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);

	}

	@Override
	protected void onLayout(boolean changed, int left, int top, int right,
			int bottom) {
		// TODO Auto-generated method stub
		super.onLayout(changed, left, top, right, bottom);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		float deg = (g_r * 1.0f / scr_w) * 180;
		if (deg >= 90) {
			canvas.drawBitmap(leftbm, rotateY((int) deg), null);

		} else if (deg > 0) {
			canvas.drawBitmap(leftbm, rotateY((int) deg), null);
			// lv.bringToFront();
		} else {
			canvas.drawBitmap(leftbm, rotateY((int) 0), null);
		}
	}

	private int centerX = 0, centerY = 0;
	// 转动的总距离，跟度数比例1:1
	private int deltaX = 0, deltaY = 0;
	// 图片宽度高度
	private int bWidth, bHeight;
	// 摄像机
	private Camera mCamera = new Camera();
	private Matrix mMatrix = new Matrix();

	Matrix rotateXY(int degreeX, int degreeY) {
		deltaX = degreeX;
		deltaY = degreeY;
		centerX = scr_w / 2;
		centerY = scr_h / 2;
		mCamera.save();
		mCamera.rotateY(deltaY);
		mCamera.rotateX(-deltaX);
		mCamera.translate(0, 0, 0);
		mCamera.getMatrix(mMatrix);
		mCamera.restore();
		// 以图片的中心点为旋转中心,如果不加这两句，就是以（0,0）点为旋转中心
		mMatrix.preTranslate(-centerX, -centerY);
		mMatrix.postTranslate(centerX, centerY);
		// mCamera.save();

		// postInvalidate();
		return mMatrix;
	}

	Matrix rotateY(int degreeY) {
		return rotateXY(0, degreeY);
	}

}

右Ｖiew的 代码RightView.java:

 

 

package com.magcomm.lockscrenn;

import android.content.Context;
import android.content.res.Configuration;
import android.graphics.Bitmap;
import android.graphics.Camera;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.view.View;

class RightView extends View {
	Bitmap rightbm = null;
	public int g_r = 0;
	private int scr_w = 0, scr_h = 0;

	public void refrashView(int gr) {
		g_r = gr;
		invalidate();
	}
	public RightView(Context context) {
		super(context);
	}

	void setBitmap(Bitmap bm) {
		rightbm = bm;
		scr_w = bm.getWidth() * 2;
		scr_h = bm.getHeight();
	}

	@Override
	protected void onConfigurationChanged(Configuration newConfig) {
		// TODO Auto-generated method stub
		super.onConfigurationChanged(newConfig);
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}

	@Override
	protected void onLayout(boolean changed, int left, int top, int right,
			int bottom) {
		// TODO Auto-generated method stub
		super.onLayout(changed, left, top, right, bottom);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		float deg = (g_r * 1.0f / scr_w) * 180;
		if (deg <= -90) {
			canvas.drawBitmap(rightbm, rotateY2((int) deg), null);
		} else if (deg < 0) {
			canvas.drawBitmap(rightbm, rotateY2((int) deg), null);
			// rv.bringToFront();

		} else {
			canvas.drawBitmap(rightbm, rotateY2(0), null);
		}
	}

	// 图片的中心点坐标
	private int centerX = 0, centerY = 0;
	// 转动的总距离，跟度数比例1:1
	private int deltaX = 0, deltaY = 0;
	// 图片宽度高度
	private int bWidth, bHeight;
	// 摄像机
	private Camera mCamera = new Camera();
	private Matrix mMatrix = new Matrix();

	Matrix rotateXY2(int degreeX, int degreeY) {
		deltaX = degreeX;
		deltaY = degreeY;
		centerX = scr_w / 2;
		centerY = scr_h / 2;
		mCamera.save();
		mCamera.rotateY(deltaY);
		mCamera.rotateX(-deltaX);
		mCamera.translate(scr_w / 2, 0, 0);
		mCamera.getMatrix(mMatrix);
		mCamera.restore();
		// 以图片的中心点为旋转中心,如果不加这两句，就是以（0,0）点为旋转中心
		mMatrix.preTranslate(-centerX, -centerY);
		mMatrix.postTranslate(centerX, centerY);
		// mCamera.save();

		// postInvalidate();
		return mMatrix;
	}

	Matrix rotateY2(int degreeY) {
		return rotateXY2(0, degreeY);
	}
}

 

下面代码是两个view的动画效果，手指放开时出现缓慢的上下的有衰减的扇动效果，宛如蝴蝶颤抖的翅膀。本来自己写了一个弹簧振子的模型，通过滑动距离转化为弹簧的能量波动，进而转化为扇动的初速度，加上弹簧的阻尼运动的衰减系数，使其做带负加速度的圆周运动。但运行效果不太满意，大概需要使用ＪＮＩ来实现才能满足吧，后来采取了系统自带的动画实现。

 

int ani_index = 0;

	private void applyRotation(float start, float end, final View v) {
		// 计算中心点
		final float centerX = scr_w / 2.0f;
		final float centerY = scr_h / 2.0f;
		final Rotate3dAnimation rotation = new Rotate3dAnimation(start, end, 0,
				0, 0, 0, 0, 0, centerX, centerY, true);
		rotation.setDuration(500);
		// rotation.setFillAfter(true);
		rotation.setRepeatCount(1);
		rotation.setRepeatMode(Animation.REVERSE);
		// rotation.setFillAfter(true);
		// rotation.setDetachWallpaper(true);
		rotation.setInterpolator(new AnticipateInterpolator());
		// 设置监听
		rotation.setAnimationListener(new Animation.AnimationListener() {
			public void onAnimationStart(Animation animation) {
			}

			// 动画结束
			public void onAnimationEnd(Animation animation) {
				// tv.post(new SwapViews());
				startAni(ani_index++);
			}

			public void onAnimationRepeat(Animation animation) {
			}
		});
		v.startAnimation(rotation);
	}

	/**
	 * 
	 * AccelerateDecelerateInterpolator 在动画开始与介绍的地方速率改变比较慢，在中间的时候加速
	 * 
	 * AccelerateInterpolator 在动画开始的地方速率改变比较慢，然后开始加速
	 * 
	 * AnticipateInterpolator 开始的时候向后然后向前甩
	 * 
	 * AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值
	 * 
	 * BounceInterpolator 动画结束的时候弹起
	 * 
	 * CycleInterpolator 动画循环播放特定的次数，速率改变沿着正弦曲线
	 * 
	 * DecelerateInterpolator 在动画开始的地方快然后慢
	 * 
	 * LinearInterpolator 以常量速率改变
	 * 
	 * OvershootInterpolator 向前甩一定值后再回到原来位置
	 * 
	 * @param start
	 * @param end
	 * @param v
	 * @param time
	 */
	private void applyRotation2(float start, float end, final View v, long time) {
		// 计算中心点
		final float centerX = scr_w / 2.0f;
		final float centerY = scr_h / 2.0f;
		final Rotate3dAnimation rotation = new Rotate3dAnimation(start, end, 0,
				0, 0, 0, 0, 0, centerX, centerY, true);
		rotation.setDuration(time);
		// rotation.setFillAfter(true);
		rotation.setRepeatCount(0);
		rotation.setRepeatMode(Animation.REVERSE);
		// rotation.setFillAfter(true);
		// rotation.setDetachWallpaper(true);
		rotation.setInterpolator(new LinearInterpolator());
		// 设置监听
		rotation.setAnimationListener(new Animation.AnimationListener() {
			public void onAnimationStart(Animation animation) {
			}

			// 动画结束
			public void onAnimationEnd(Animation animation) {
				// tv.post(new SwapViews());
				startAni(ani_index++);
			}

			public void onAnimationRepeat(Animation animation) {
			}
		});
		v.startAnimation(rotation);
	}

	void startAni(int index) {
		// final int ani_deg1[][] = {{60, 0}, {40, 0}, {20, 0}};
		// final int ani_deg1[][] = {{0, 60}, {0, 40}, {0, 20}};
		final int ani_deg1[][] = { { 0, 80 }, { 80, 0 }, { 0, 60 }, { 60, 0 },
				{ 0, 40 }, { 40, 0 } };
		// final int ani_deg2[][] = {{-60, 0}, {-40, 0}, {-20, 0}};
		final int ani_deg2[][] = { { 0, -80 }, { -80, 0 }, { 0, -60 },
				{ -60, 0 }, { 0, -40 }, { -40, 0 } };
		final int time[] = { 500, 500, 400, 400, 200, 200 };
		if (index > 5) {
			ani_index = 0;
		} else {
			if (u_x <= (scr_w / 2)) {
				applyRotation2(ani_deg1[index][0], ani_deg1[index][1], lv,
						time[index]);
			} else {
				applyRotation2(ani_deg2[index][0], ani_deg2[index][1], rv,
						time[index]);
			}
		}

	}

在oppo的解锁效果中，view的背面加入了对窗口buffer的特殊处理。使我们能够看到一个打开新窗口的效果，如下图：

 

需要添加如下函数。这里调用了系统的隐藏函数Surface.screenshot，必须使用系统签名。加入系统app中才能使用。当然，也许你也可以使用反射实现。

publicBitmap getScreenBuffer()

{

DisplaymDisplay;

DisplayMetricsmDisplayMetrics;

MatrixmDisplayMatrix = new Matrix();

 

WindowManagermWindowManager = (WindowManager) mContext

.getSystemService(Context.WINDOW_SERVICE);

mDisplay= mWindowManager.getDefaultDisplay();

mDisplayMetrics= new DisplayMetrics();

mDisplay.getRealMetrics(mDisplayMetrics);

mDisplay.getRealMetrics(mDisplayMetrics);

float[]dims = { mDisplayMetrics.widthPixels,

mDisplayMetrics.heightPixels};

 

mlock= Surface.screenshot((int) dims[0], (int) dims[1]);

returnmlock;

}