屬性動畫實現翻滾的控件

控件的3d翻滾動畫,即讓控件沿着自己的一邊進行3d的翻轉,例如一個button控件沿着自己的一邊翻轉180度,此時顯示的是自己的背面。效果如下



普通動畫的效果都是在平面上,因此想到了使用屬性動畫中 控制rotation屬性,實現3d旋轉,但是發現屬性動畫的旋轉都是以自己中心爲軸的自轉,而我們要得效果是以外部參照的“公轉”,因此想到了在控件自轉的時候添加一個同步的位移效果,這樣整體效果看起來像是控件在繞側邊旋轉一樣。有關屬性動畫的一些基本知識可以查找論壇上一些大神的博客,講的很詳細,3d翻轉的主要邏輯如下(以向下翻轉360度爲例):

<pre name="code" class="java">public void flipDown(final View v, float start, float end) {
		final int height = v.getMeasuredHeight();
		ObjectAnimator anim = ObjectAnimator.ofFloat(v, "rotationX", start, end);// 主動畫爲一個旋轉動畫,控制rotationX屬性
		anim.addUpdateListener(new AnimatorUpdateListener() {// 爲該動畫添加一個動畫更新監聽器

			@Override
			public void onAnimationUpdate(ValueAnimator a) {
				float f = Float.parseFloat(a.getAnimatedValue().toString());// 動畫變量的值獲取是一個0~360的角度值
				Log.i("info", "value:" + (int) f);
				int n = (int) (f / 180);
				double cons = Math.cos(Math.toRadians(f - n * 180));
				float transY = (float) ((1 + -cons) * height) / 2 + n * height;// 主要的算法步驟
				v.setTranslationY(transY);
			}
		});
		anim.setInterpolator(new OvershootInterpolator());// 可以添加一個interpolator,這個可以看做是決定數值變化快慢的一個函數
		anim.setDuration(1000).start();
	}



其他方向的翻轉可以類推之,不過這種實現有一點瑕疵,控件的3d旋轉是以自身爲軸,所以控件旋轉的時候在z軸的正負方向各有一半,所以在翻轉的時候會有一點的不協調,所以我加了一個overshoot的效果使得整體的翻轉跟自然。



加一個代碼下載


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章