Android属性アニメーション(Property Animation)完全解析(下)
14147 ワード
転載は出典を明記してください:http://blog.csdn.net/lmj623565791/article/details/38092093
前回のAndroid属性アニメーション(Property Animation)完全解析(上)では、プロパティアニメーションの核心的な使い方が基本的に示されています.
ObjectAnimator実装アニメーション、ValueAnimator実装アニメーション、AnimatorSetの使用など~
もちろん、属性アニメーションには一部の知識点があり、良い効果も得られるので、本編ブログでお見せします~
1、xmlファイルを使用して属性アニメーションを作成する方法
ViewAnimator、Drawable Animatorはanimフォルダの下でアニメーションを作成し、プログラムで使用したり、Themeで属性値に設定したりすることができることはよく知られています.もちろん、プロパティアニメーションはファイルに宣言することもできます.
まずresの下にanimatorフォルダを作成し、res/animator/scalexを作成します.xml
縦と横を同時にスケールしたい場合は?プロパティ・ファイルを定義する方法は、次のとおりです.
setラベルを使用すると、orderringプロパティがtogetherに設定され、【もう1つの値:sequentially(次から次へ実行を表す)】があります.
前のブログでは、ズーム、反転などに中心点や軸があり、デフォルトの中心ズームと中間対称線が反転線であるため、左上隅を中心に縦に縮小することにしました.
コード:
簡単で、直接ViewにpivotXとpivotYを設定してinvalidateを呼び出してOKです.
効果図を次に示します.
では、xml宣言アニメーションを書くことで、setネストsetを使用してorderringプロパティと組み合わせて、基本的に任意のアニメーションを実現することができます~~pivotの設定も説明しました.
2、レイアウトアニメーション(Layout Animations)
主にLayoutTransitionを使用してレイアウトのコンテナをアニメートし、コンテナ内のビュー階層が変化すると遷移するアニメーション効果があります.
基本コード:
遷移のタイプは全部で4種類あります.
LayoutTransition.APPEARINGビューがビューグループに表示されると、そのビューに設定されたアニメーション
LayoutTransition.CHANGE_APPEARINGは、ビューがビューグループに表示されると、そのビューが他のビューの位置に影響し、他のビューに設定されたアニメーションに影響します.
LayoutTransition.DISAPPEARINGビューがビューグループから消えたときに、そのビューに設定されたアニメーション
LayoutTransition.CHANGE_DISAPPEARING 1つのViewがView Groupで消失した場合、そのViewは他のView位置に影響を与え、他のView設定のアニメーションに影響を与えます.
LayoutTransition.CHANGEは、ビューの出現や消失による他のビューの位置への影響ではなく、他のビューに設定されたアニメーションです.
アニメーションが誰に設定されているのか、このViewは他のViewなのかに注意してください.
総合的な例を見てみましょう
レイアウトファイル:
コード:
効果図:
アニメーションは少し長くて、辛抱強く見て、必ず注意して、現在のViewに対してそれともその他のViewに対して設定するアニメーションです.
もちろん、アニメーションはカスタマイズをサポートし、時間の設定もサポートします.たとえば、修正して追加したアニメーションは次のようになります.
次のような効果が得られます.
本来のフェードインは、幅を真ん中から大きくする効果になっています~~まあまあかな~~
3、Viewのanim方法
SDK 11では、Viewにanimateメソッドを追加し、より便利にアニメーション効果を実現します.
レイアウトファイル:
簡単にmBlueBallを使います.animate().alpha(0).y(mScreenHeight/2).setDuration(1000).start()はアニメーションを実現できます~~ただし、SDK 11が必要です.その後、SDK 12、SDK 16にはwithStartActionとwithEndActionがそれぞれ追加され、アニメーションの前、アニメーションの後にいくつかの操作を実行します.もちろんいいです.setListener(listener)などの操作.
ObjectAnimatorを使用して上記の変更を実現するには、PropertyValueHolderを使用します.
効果は上と同じです.
実行結果:
さて、アトリビュートアニメーションの基本的な使い方についてはこれで終わります~~~~
ソースをクリックしてダウンロード
前回のAndroid属性アニメーション(Property Animation)完全解析(上)では、プロパティアニメーションの核心的な使い方が基本的に示されています.
ObjectAnimator実装アニメーション、ValueAnimator実装アニメーション、AnimatorSetの使用など~
もちろん、属性アニメーションには一部の知識点があり、良い効果も得られるので、本編ブログでお見せします~
1、xmlファイルを使用して属性アニメーションを作成する方法
ViewAnimator、Drawable Animatorはanimフォルダの下でアニメーションを作成し、プログラムで使用したり、Themeで属性値に設定したりすることができることはよく知られています.もちろん、プロパティアニメーションはファイルに宣言することもできます.
まずresの下にanimatorフォルダを作成し、res/animator/scalexを作成します.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:propertyName="scaleX"
android:valueFrom="1.0"
android:valueTo="2.0"
android:valueType="floatType" >
</objectAnimator>
コード:public void scaleX(View view)
{
//
Animator anim = AnimatorInflater.loadAnimator(this, R.animator.scalex);
anim.setTarget(mMv);
anim.start();
}
AnimatorInflaterを使用してアニメーションのリソースファイルをロードし、ターゲットを設定するとok~~簡単ではありませんか.これは単純な横方向の倍になります.縦と横を同時にスケールしたい場合は?プロパティ・ファイルを定義する方法は、次のとおりです.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="together" >
<objectAnimator
android:duration="1000"
android:propertyName="scaleX"
android:valueFrom="1"
android:valueTo="0.5" >
</objectAnimator>
<objectAnimator
android:duration="1000"
android:propertyName="scaleY"
android:valueFrom="1"
android:valueTo="0.5" >
</objectAnimator>
</set>
setラベルを使用すると、orderringプロパティがtogetherに設定され、【もう1つの値:sequentially(次から次へ実行を表す)】があります.
前のブログでは、ズーム、反転などに中心点や軸があり、デフォルトの中心ズームと中間対称線が反転線であるため、左上隅を中心に縦に縮小することにしました.
コード:
//
Animator anim = AnimatorInflater.loadAnimator(this, R.animator.scale);
mMv.setPivotX(0);
mMv.setPivotY(0);
// invalidate
mMv.invalidate();
anim.setTarget(mMv);
anim.start();
簡単で、直接ViewにpivotXとpivotYを設定してinvalidateを呼び出してOKです.
効果図を次に示します.
では、xml宣言アニメーションを書くことで、setネストsetを使用してorderringプロパティと組み合わせて、基本的に任意のアニメーションを実現することができます~~pivotの設定も説明しました.
2、レイアウトアニメーション(Layout Animations)
主にLayoutTransitionを使用してレイアウトのコンテナをアニメートし、コンテナ内のビュー階層が変化すると遷移するアニメーション効果があります.
基本コード:
LayoutTransition transition = new LayoutTransition();
transition.setAnimator(LayoutTransition.CHANGE_APPEARING,
transition.getAnimator(LayoutTransition.CHANGE_APPEARING));
transition.setAnimator(LayoutTransition.APPEARING,
null);
transition.setAnimator(LayoutTransition.DISAPPEARING,
null);
transition.setAnimator(LayoutTransition.CHANGE_DISAPPEARING,
null);
mGridLayout.setLayoutTransition(transition);
遷移のタイプは全部で4種類あります.
LayoutTransition.APPEARINGビューがビューグループに表示されると、そのビューに設定されたアニメーション
LayoutTransition.CHANGE_APPEARINGは、ビューがビューグループに表示されると、そのビューが他のビューの位置に影響し、他のビューに設定されたアニメーションに影響します.
LayoutTransition.DISAPPEARINGビューがビューグループから消えたときに、そのビューに設定されたアニメーション
LayoutTransition.CHANGE_DISAPPEARING 1つのViewがView Groupで消失した場合、そのViewは他のView位置に影響を与え、他のView設定のアニメーションに影響を与えます.
LayoutTransition.CHANGEは、ビューの出現や消失による他のビューの位置への影響ではなく、他のビューに設定されたアニメーションです.
アニメーションが誰に設定されているのか、このViewは他のViewなのかに注意してください.
総合的な例を見てみましょう
レイアウトファイル:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/id_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="addBtn"
android:text="addBtns" />
<CheckBox
android:id="@+id/id_appear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="APPEARING" />
<CheckBox
android:id="@+id/id_change_appear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="CHANGE_APPEARING" />
<CheckBox
android:id="@+id/id_disappear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="DISAPPEARING" />
<CheckBox
android:id="@+id/id_change_disappear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="CHANGE_DISAPPEARING " />
</LinearLayout>
コード:
package com.example.zhy_property_animation;
import android.animation.LayoutTransition;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.GridLayout;
public class LayoutAnimaActivity extends Activity implements
OnCheckedChangeListener
{
private ViewGroup viewGroup;
private GridLayout mGridLayout;
private int mVal;
private LayoutTransition mTransition;
private CheckBox mAppear, mChangeAppear, mDisAppear, mChangeDisAppear;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_animator);
viewGroup = (ViewGroup) findViewById(R.id.id_container);
mAppear = (CheckBox) findViewById(R.id.id_appear);
mChangeAppear = (CheckBox) findViewById(R.id.id_change_appear);
mDisAppear = (CheckBox) findViewById(R.id.id_disappear);
mChangeDisAppear = (CheckBox) findViewById(R.id.id_change_disappear);
mAppear.setOnCheckedChangeListener(this);
mChangeAppear.setOnCheckedChangeListener(this);
mDisAppear.setOnCheckedChangeListener(this);
mChangeDisAppear.setOnCheckedChangeListener(this);
// GridLayout
mGridLayout = new GridLayout(this);
// 5
mGridLayout.setColumnCount(5);
//
viewGroup.addView(mGridLayout);
//
mTransition = new LayoutTransition();
mGridLayout.setLayoutTransition(mTransition);
}
/**
*
*
* @param view
*/
public void addBtn(View view)
{
final Button button = new Button(this);
button.setText((++mVal) + "");
mGridLayout.addView(button, Math.min(1, mGridLayout.getChildCount()));
button.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
mGridLayout.removeView(button);
}
});
}
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked)
{
mTransition = new LayoutTransition();
mTransition.setAnimator(
LayoutTransition.APPEARING,
(mAppear.isChecked() ? mTransition
.getAnimator(LayoutTransition.APPEARING) : null));
mTransition
.setAnimator(
LayoutTransition.CHANGE_APPEARING,
(mChangeAppear.isChecked() ? mTransition
.getAnimator(LayoutTransition.CHANGE_APPEARING)
: null));
mTransition.setAnimator(
LayoutTransition.DISAPPEARING,
(mDisAppear.isChecked() ? mTransition
.getAnimator(LayoutTransition.DISAPPEARING) : null));
mTransition.setAnimator(
LayoutTransition.CHANGE_DISAPPEARING,
(mChangeDisAppear.isChecked() ? mTransition
.getAnimator(LayoutTransition.CHANGE_DISAPPEARING)
: null));
mGridLayout.setLayoutTransition(mTransition);
}
}
効果図:
アニメーションは少し長くて、辛抱強く見て、必ず注意して、現在のViewに対してそれともその他のViewに対して設定するアニメーションです.
もちろん、アニメーションはカスタマイズをサポートし、時間の設定もサポートします.たとえば、修正して追加したアニメーションは次のようになります.
mTransition.setAnimator(LayoutTransition.APPEARING, (mAppear
.isChecked() ? ObjectAnimator.ofFloat(this, "scaleX", 0, 1)
: null));
次のような効果が得られます.
本来のフェードインは、幅を真ん中から大きくする効果になっています~~まあまあかな~~
3、Viewのanim方法
SDK 11では、Viewにanimateメソッドを追加し、より便利にアニメーション効果を実現します.
レイアウトファイル:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="@+id/id_ball"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/bol_blue" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="viewAnim"
android:text="View Anim" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="propertyValuesHolder"
android:text="PropertyValuesHolder " />
</LinearLayout>
</RelativeLayout>
コード:package com.example.zhy_property_animation;
import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
public class ViewAnimateActivity extends Activity
{
protected static final String TAG = "ViewAnimateActivity";
private ImageView mBlueBall;
private float mScreenHeight;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.view_animator);
DisplayMetrics outMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
mScreenHeight = outMetrics.heightPixels;
mBlueBall = (ImageView) findViewById(R.id.id_ball);
}
public void viewAnim(View view)
{
// need API12
mBlueBall.animate()//
.alpha(0)//
.y(mScreenHeight / 2).setDuration(1000)
// need API 12
.withStartAction(new Runnable()
{
@Override
public void run()
{
Log.e(TAG, "START");
}
// need API 16
}).withEndAction(new Runnable()
{
@Override
public void run()
{
Log.e(TAG, "END");
runOnUiThread(new Runnable()
{
@Override
public void run()
{
mBlueBall.setY(0);
mBlueBall.setAlpha(1.0f);
}
});
}
}).start();
} }
簡単にmBlueBallを使います.animate().alpha(0).y(mScreenHeight/2).setDuration(1000).start()はアニメーションを実現できます~~ただし、SDK 11が必要です.その後、SDK 12、SDK 16にはwithStartActionとwithEndActionがそれぞれ追加され、アニメーションの前、アニメーションの後にいくつかの操作を実行します.もちろんいいです.setListener(listener)などの操作.
ObjectAnimatorを使用して上記の変更を実現するには、PropertyValueHolderを使用します.
PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("alpha", 1f,
0f, 1f);
PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("y", 0,
mScreenHeight / 2, 0);
ObjectAnimator.ofPropertyValuesHolder(mBlueBall, pvhX, pvhY).setDuration(1000).start();
効果は上と同じです.
実行結果:
さて、アトリビュートアニメーションの基本的な使い方についてはこれで終わります~~~~
ソースをクリックしてダウンロード