坐標 ng- 設置 慕課 sca 偏移 ans href blog

在這篇文章中寫了

自己定義HorizontalScrollView實現qq側滑菜單

然而這個菜單效果僅僅是普通的側拉效果 我們還能夠實現抽屜式側滑菜單 就像這樣

第一種效果

另外一種效果

第三種效果

第四種效果

其他代碼都和上篇文章同樣，僅僅是在MyHorizontalScrollView.class重寫onScrollChanged這種方法

第一種的側滑效果代碼非常easy

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		// TODO Auto-generated method stub
		super.onScrollChanged(l, t, oldl, oldt);
		ViewHelper.setTranslationX(mMenu, l);
	}

通過setTranslationX方法設置mMenu的x坐標偏移量 當中的l=getScrollX()

設置完這些就能實現這種側滑效果

另外一種側滑效果代碼和第一種類似。僅僅只是是對mMenu的x坐標的偏移量再添加1倍，使得mMenu菜單仿佛從右邊出來一樣

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		// TODO Auto-generated method stub
		super.onScrollChanged(l, t, oldl, oldt);
		ViewHelper.setTranslationX(mMenu, 2*l);
	}

第三種側滑效果，我們發現用到了縮放動畫，所以要有個0~1的變化率，因為初始的l=getScrollX()=mMenuWidth 。終於的l=0 所以從這裏我們能夠得到

		//scale 1~0的變化率
		float scale = l*1.0f/mMenuWidth;

代碼例如以下

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		// TODO Auto-generated method stub
		super.onScrollChanged(l, t, oldl, oldt);
		//scale 1~0的變化率
		float scale = l*1.0f/mMenuWidth;
		//Content的縮放比例1~0.7
		float rightScale=scale*0.3f+0.7f;
		//設置縮放中心
		ViewHelper.setPivotX(mContent,0);
		ViewHelper.setPivotY(mContent,mContent.getHeight()/2);
		//進行縮放
		ViewHelper.setScaleX(mContent, rightScale);
		ViewHelper.setScaleY(mContent, rightScale);
		
	}

至於這裏我為什麽設置縮放中心為mContent x=0 y=height/2 是為了在側滑後 mContent左側離屏幕右側的距離不變 否則 距離也會進行縮放

第四種效果我們會發現相比著第三種 不過左側的mMenu的效果不同 會發現 進行了縮放 和透明

代碼例如以下

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		// TODO Auto-generated method stub
		super.onScrollChanged(l, t, oldl, oldt);
		//scale 1~0的變化率
		float scale = l*1.0f/mMenuWidth;
		//Content的縮放比例1~0.7
		float rightScale=scale*0.3f+0.7f;
		//Menu的透明度變化0~1
		float leftAlpha=1.0f-scale;
		//Menu的縮放變化0.3-1.0
		float leftScale=1.0f-scale*0.7f;
		//mContent設置縮放中心
		ViewHelper.setPivotX(mContent,0);
		ViewHelper.setPivotY(mContent,mContent.getHeight()/2);
		//mContent進行縮放
		ViewHelper.setScaleX(mContent, rightScale);
		ViewHelper.setScaleY(mContent, rightScale);
		
		/*
		 * 對mMenu進行縮放和設置透明度
		 * */
		ViewHelper.setScaleX(mMenu, leftScale);
		ViewHelper.setScaleY(mMenu, leftScale);
		ViewHelper.setAlpha(mMenu, leftAlpha);
	}

就實現了這種效果

這兩天我也嘗試著進行矩形翻轉的效果 模擬器上成功了 在真機上就不行了 就不帖上了 感覺浪費了好多時間 o(︶︿︶)o 唉

關於qqv6.2.3的側拉效果是

我們僅僅要降低mMenu的x坐標的偏移量就能實現 代碼例如以下

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		// TODO Auto-generated method stub
		super.onScrollChanged(l, t, oldl, oldt);
		ViewHelper.setTranslationX(mMenu, l*0.6f);
	}

效果如圖：

這幾個動畫 可能在別人看來非常easy 我想了好久啊啊 一天半的光陰啊啊 萬惡的矩陣切換。，。~~NN、DFAGDAJFHJK

看到qq才想起來 今天是我生日 都不敢想它 今年才大二就這麽大了 o(︶︿︶)o 唉

生日快樂。

參考：慕課網課程 qq5.0側滑菜單

android:QQ多種側滑菜單的實現