Androidフルプロシージャインスタンス解析プロパティアニメーション
5275 ワード
最近、プロパティアニメーションを研究しています.あまり複雑ではないインスタンスを通じて、インスタンス内のアニメーションがどのように実現されているかを一歩一歩分析し、コードを引っ張り始めました.まず、効果を見てみましょう.
属性アニメーションgif
上の効果は完全に属性アニメーションで、編集者はスライドリスニングをサボって、直接ボタンで代用しました.赤いボタンをクリックすると、最初の画面が後ろにアニメーション化され、2番目の画面が下から滑り出します.X番をクリックして、復元します.タグの最初のインタフェースはfirst_ですView、下から弾き出したのはsecond_View.
一、アニメーションの実行を開始する
first_View:
1.アニメーションを反転します.2.透明度アニメーション;3.アニメーションのズーム4.アニメーション5を前に反転する.アニメーションをパンする(上に移動するプロセスがある)この5つのアニメーションは1つも少なくできません.見ていない場合はよく分析してください.
second_View:
1.アニメーションをパン(上)
次に、コードの削除を開始します.
この5つのアニメーションはすべて一緒に実行されますが、4番目のアニメーションは遅延操作をしました.setStartDelay(200);
二、逆方向のアニメーションの実行(復元)を開始する
first_View:
1.アニメーションを反転します.2.透明度アニメーション;3.アニメーションのズーム4.アニメーション5を前に反転する.アニメーションをパンする(上に移動するプロセスがある)この5つのアニメーションは1つも少なくできません.見ていない場合はよく分析してください.
second_View:
1.パンアニメーション(下)は上の面とあまり変わらないようですが、コードには注意が必要です.透明度アニメーション;3.スケーリングアニメーションの値は必ず逆ですが、1.アニメーションを反転します.4.アニメーションを前に反転するには、逆のコードは必要ありません(これはよく理解できません).
アニメーションの実行過程を理解することが最も重要で、さもなくば手書きのコードを下りにくいです.
属性アニメーションgif
上の効果は完全に属性アニメーションで、編集者はスライドリスニングをサボって、直接ボタンで代用しました.赤いボタンをクリックすると、最初の画面が後ろにアニメーション化され、2番目の画面が下から滑り出します.X番をクリックして、復元します.タグの最初のインタフェースはfirst_ですView、下から弾き出したのはsecond_View.
一、アニメーションの実行を開始する
first_View:
1.アニメーションを反転します.2.透明度アニメーション;3.アニメーションのズーム4.アニメーション5を前に反転する.アニメーションをパンする(上に移動するプロセスがある)この5つのアニメーションは1つも少なくできません.見ていない場合はよく分析してください.
second_View:
1.アニメーションをパン(上)
次に、コードの削除を開始します.
public void startFirstAnimation(View v){
//1.
ObjectAnimator firstRotationAnim = ObjectAnimator.ofFloat(first_View, "rotationX", 0f,25f);
firstRotationAnim.setDuration(300);
//2.
ObjectAnimator firstAlphaAnim = ObjectAnimator.ofFloat(first_View, "alpha", 1f,0.5f);
firstAlphaAnim.setDuration(200);
//3.
ObjectAnimator firstScaleXAnim = ObjectAnimator.ofFloat(first_View, "scaleX", 1f,0.8f);
firstScaleXAnim.setDuration(300);
ObjectAnimator firstScaleYAnim = ObjectAnimator.ofFloat(first_View, "scaleY", 1f,0.8f);
firstScaleYAnim.setDuration(300);
// ,
// firstRotationAnim.addUpdateListener(listener)
//4.
ObjectAnimator firstResumeRotationAnim = ObjectAnimator.ofFloat(first_View, "rotationX",25f, 0f);
firstResumeRotationAnim.setDuration(200);
firstResumeRotationAnim.setStartDelay(200);//
// 5. , ,
ObjectAnimator firstTranslationAnim = ObjectAnimator.ofFloat(first_View, "translationY",0f, -0.1f*first_View.getHeight());
firstTranslationAnim.setDuration(200);
//second_View --
ObjectAnimator secondeTranslationAnim = ObjectAnimator.ofFloat(second_View, "translationY",second_View.getHeight(), 0f);
secondeTranslationAnim.setDuration(200);
secondeTranslationAnim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
second_View.setVisibility(View.VISIBLE);
bt.setClickable(false);
}
});
AnimatorSet set = new AnimatorSet();
set.playTogether(firstRotationAnim,firstAlphaAnim,firstScaleXAnim,firstScaleYAnim,firstResumeRotationAnim,firstTranslationAnim,secondeTranslationAnim);
set.start();
}
この5つのアニメーションはすべて一緒に実行されますが、4番目のアニメーションは遅延操作をしました.setStartDelay(200);
二、逆方向のアニメーションの実行(復元)を開始する
first_View:
1.アニメーションを反転します.2.透明度アニメーション;3.アニメーションのズーム4.アニメーション5を前に反転する.アニメーションをパンする(上に移動するプロセスがある)この5つのアニメーションは1つも少なくできません.見ていない場合はよく分析してください.
second_View:
1.パンアニメーション(下)は上の面とあまり変わらないようですが、コードには注意が必要です.透明度アニメーション;3.スケーリングアニメーションの値は必ず逆ですが、1.アニメーションを反転します.4.アニメーションを前に反転するには、逆のコードは必要ありません(これはよく理解できません).
public void startSecondAnimation(View v){
//1.
ObjectAnimator firstRotationAnim = ObjectAnimator.ofFloat(first_View, "rotationX", 0f,25f);
firstRotationAnim.setDuration(300);
// firstRotationAnim.start();
//2.
ObjectAnimator firstAlphaAnim = ObjectAnimator.ofFloat(first_View, "alpha",0.5f, 1f);
firstAlphaAnim.setDuration(200);
//3.
ObjectAnimator firstScaleXAnim = ObjectAnimator.ofFloat(first_View, "scaleX",0.8f, 1f);
firstScaleXAnim.setDuration(300);
ObjectAnimator firstScaleYAnim = ObjectAnimator.ofFloat(first_View, "scaleY",0.8f, 1f);
firstScaleYAnim.setDuration(300);
//4. ,
// firstRotationAnim.addUpdateListener(listener)
ObjectAnimator firstResumeRotationAnim = ObjectAnimator.ofFloat(first_View, "rotationX",25f, 0f);
firstResumeRotationAnim.setDuration(200);
firstResumeRotationAnim.setStartDelay(200);//
//5. , ,
ObjectAnimator firstTranslationAnim = ObjectAnimator.ofFloat(first_View, "translationY", -0.1f*first_View.getHeight(),0f);
firstTranslationAnim.setDuration(200);
//second_View -—
ObjectAnimator secondeTranslationAnim = ObjectAnimator.ofFloat(second_View, "translationY", 0f,second_View.getHeight());
secondeTranslationAnim.setDuration(300);
secondeTranslationAnim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
second_View.setVisibility(View.VISIBLE);
}
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
bt.setClickable(true);
}
});
AnimatorSet set = new AnimatorSet();
set.playTogether(firstRotationAnim,firstAlphaAnim,firstScaleXAnim,firstScaleYAnim,firstResumeRotationAnim,firstTranslationAnim,secondeTranslationAnim);
set.start();
}
アニメーションの実行過程を理解することが最も重要で、さもなくば手書きのコードを下りにくいです.