Android プロパティAnimationPropertyアニメーション シリーズ 1 つのValueAnimator_html/css_WEB-ITnose

Android アニメーションの分類

市場の多くのアプリはアニメーション効果を使用しており、アニメーション効果をうまく使用するとユーザー エクスペリエンスを向上させることができます。では、Android システムにはどのようなアニメーション メカニズムがあるのでしょうか?
1. フレームごとのアニメーション。実際、フレームごとのアニメーションの動作原理は非常に単純で、漫画の動作原理と同様に、完全なアニメーションを別々の画像に分割し、それらを結合して再生します。
2. トゥイーン アニメーションを使用すると、ビュー上でフェードインとフェードアウト、スケーリング、移動、回転などの一連のアニメーション操作を実行できます。
3. プロパティ アニメーション プロパティ アニメーションは、オブジェクトのプロパティを変更することで、より魅力的なアニメーション効果を実現できます。

属性アニメーションとトゥイーン アニメーションの比較

1. トゥイーン アニメーションはビューの位置とリアルな効果を変更するだけで、その属性を変更することはできません。たとえば、トゥイーン アニメーションを使用してボタンを移動し、再度クリックした場合、ボタンはクリック イベントに応答しませんが、属性アニメーションを使用するとこれを行うことができます。
2. トゥイーン アニメーションのオブジェクトは View に限定されますが、属性アニメーションのオブジェクトは View に限定されず、すべてのオブジェクトに影響します。たとえば、属性アニメーションは色の値を変更できますが、トゥイーン アニメーションではこれを変更できません。

ValueAnimator

ValueAnimator は、属性アニメーションの重要なクラスです。値の間のアニメーションの遷移を計算するために内部でタイム ループ メカニズムを使用します。初期値と終了値を ValueAnimator に提供し、アニメーションの長さを伝えるだけです。を実行する必要があり、ValueAnimator が自動的に初期値から終了値にスムーズに移行するのに役立ちます。例を通してその使用法を見てみましょう。 ValueAnimator の使用法は非常に簡単です。

private void startAnimation() {        ValueAnimator animator = ValueAnimator.ofInt(0, 20，0);        //为了看到动画值的变化，这里添加了动画更新监听事件来打印动画的当前值        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                int value = (int) animation.getAnimatedValue();                Log.e("TAG", "the value is " + value);            }        });        animator.setDuration(1000);//动画时间        animator.start();//启动动画    }

ValueAnimator ofInt (int...values); 1 つ以上のパラメータを指定できます。ただし、通常は 2 つ以上のパラメータがあり、それが 2 つのパラメータで表される場合、値は時間の経過とともに最初のパラメータから 2 番目のパラメータに変化します。パラメータが 3 つ以上ある場合: これらの値の間は時間の経過とともに変化します。上記の印刷結果を次のように見てください:

ValueAnimator には他のメソッドもあります。たとえば、浮動小数点データのアニメーション変更が必要な場合は、次のメソッドを使用できます:

ValueAnimator animator = ValueAnimator.ofFloat(0f,10.5f,5.0f,0f);        animator.setDuration(500);//动画时间        animator.start();//启动动画

カラー値を変更するアニメーション

ValueAnimator animator = ValueAnimator.ofArgb(0x00ffff,0x00ffee);        animator.setDuration(500);//动画时间        animator.start();//启动动画

Animation to一般的な値を ValueAnimator animator = ValueAnimator.ofObject() に変更します。それについては以下でお話します。

ValueAnimator の使用法

上記の例で ValueAnimator が使用されている場所を見ていなかったことに驚いたかもしれません?心配しないでください。その有用性を証明するために例をあげましょう。携帯電話の画面上に直線を動的に描きます。

ValueAnimator animator = ValueAnimator.ofObject (TypeEvaluator エバリュエーター、Object… 値) を使用しました。このメソッドの最初のパラメーターはアニメーション遷移アルゴリズム クラスで、後続のパラメーターはアニメーション遷移値です。
ここでは主に TypeEvaluator 型について説明します。 ofObject() メソッドは ofInt() および ofFloat() とは異なります。TypeEvaluator は自分で実装する必要がありますが、他の 2 つのメソッド システム (IntEvaluator および FloatEvaluator 型) はメソッドの実装に役立ちます。 。
次のように FloatEvaluator の実装を見てください:

package com.xjp.animations;import android.animation.TypeEvaluator;import android.animation.ValueAnimator;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.os.Bundle;import android.support.v7.app.ActionBarActivity;import android.util.AttributeSet;import android.view.View;import android.view.ViewGroup;public class MainActivity extends ActionBarActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ViewGroup parent = (ViewGroup) findViewById(R.id.parent);        parent.addView(new SingleLine(this));    }    private class SingleLine extends View {        private Paint mPaint;        private float x = 0;        private float y = 150;        public SingleLine(Context context) {            super(context);            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);            mPaint.setColor(Color.RED);        }        public SingleLine(Context context, AttributeSet attrs) {            super(context, attrs);            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);            mPaint.setColor(Color.RED);        }        public SingleLine(Context context, AttributeSet attrs, int defStyleAttr) {            super(context, attrs, defStyleAttr);        }        @Override        protected void onDraw(Canvas canvas) {            if (0 == x) {                startAnimation();            }            canvas.drawLine(0, y, x, x + y, mPaint);        }        private void startAnimation() {            ValueAnimator animator = ValueAnimator.ofObject(new SingleLineEvaluator(), 0, 500);            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                @Override                public void onAnimationUpdate(ValueAnimator animation) {                    float i = (float) animation.getAnimatedValue();                    x = i;                    //不断的刷新UI                    invalidate();                }            });            animator.setDuration(2000);            animator.start();        }    }    private class SingleLineEvaluator implements TypeEvaluator {        @Override        public Object evaluate(float fraction, Object startValue, Object endValue) {            return fraction * (((Number) endValue).floatValue() - ((Number) startValue).floatValue());        }    }}

FloatEvaluator が TypeEvaluator インターフェイスを実装し、evaluate() メソッドをオーバーライドしていることがわかります。 3 つのパラメータがevaluate()メソッドに渡されます。最初のパラメータであるfractionは、アニメーションの完了を示すために使用されます(fractionの値は0と1の間で変化します)。 2 番目と 3 番目のパラメータはそれぞれアニメーションの初期値と終了値を表します。上記のコードのロジックは比較的明確で、終了値から初期値を減算し、それらの差を計算し、それに分数の係数と初期値を乗算すると、現在のアニメーションの値が得られます。 。

それでは、実装した TypeEvaluator を見てみましょう

public class FloatEvaluator implements TypeEvaluator {    public Object evaluate(float fraction, Object startValue, Object endValue) {        float startFloat = ((Number) startValue).floatValue();        return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);    }}

インターフェイス メソッドの Evaluate は、線形直線アルゴリズムを実装します。 y=n*x;

システム TypeEvaluator

システムの組み込み TypeEvaluator には次の型が含まれており、コード内で直接使用できます。

ArgbEvaluator: このエバリュエーターは、ARGB カラーを表す整数値のタイプ間で補間を実行するために使用できます。
FloatEvaluator: このエバリュエーターは、浮動小数点値間の補間を実行するために使用できます。
IntEvaluator: このエバリュエーターは、int 型の値の間の補間を実行するために使用できます。
RectEvaluator: このエバリュエーターは、型間の長方形値の補間を実行するために使用できます。

次のセクション: ObjectAnimator の学習