Android アニメーションの基本 --PropertyAnimation_html/css_WEB-ITnose

この記事には、サンプルのダウンロードが含まれています: Github

この記事では、Android 3.0 で導入された属性アニメーション フレームワークについて説明します。 前回の記事でビュー アニメーションについて書いたときに、ViewAnimation の欠点について言及しました。アニメーションはビュー自体の視覚的な部分に影響しますが、ビューの実際のプロパティはアニメーションによって変更されません。多くの場合、アニメーションによって引き起こされるイベントの非同期に追加で対処する必要があります。たとえば、ViewAnimation はビューを画面外に移動しましたが、ビューのイベントトリガーはまだ残っているため、追加の処理が必要です。 ただし、PropertyAnimation の導入により、この問題は完全に解決され、アニメーションとイベントの変更が常に同時に発生するようになります。重要なのは、ビューのプロパティを変更すると、ビューの再描画が行われてアニメーションが完了するということです。

ディレクトリ

属性アニメーション フレーム構造

個人的な理解

TypeEvaluator と Interpolators

ObjectAnimator

ValueAnimator

アニメーション セット: AnimatorSet のキーフレーム

属性アニメーション フレーム構造

個人的には、継承を理解するのが良いと感じています構造はフレームワークを学ぶのに役立ちます。それでは、属性アニメーションのフレームワークから始めましょう。StartUML を使用して、次のクラス図を描画しました。描画は比較的ラフです (StartUML はうまく使用されていません、-_-!)。 ）、TypeEvaluator と Interpolator は描画されていません。これは、第一に、複雑すぎて重要な情報を読み取ることができないため、そして第二に、後で説明するためです。各クラスの機能について簡単に説明します。

Animator クラス: アニメーション時間、リスナー、およびアニメーション ステータスの制御をカプセル化する、属性アニメーション フレームワークの基本クラス。

AnimatorListener: さまざまな状態で呼び出す必要があるメソッドをカプセル化するアニメーション状態インターフェイス 次のメソッドがあります

onAnimationStart() - アニメーションの開始時に呼び出されます

onAnimationEnd() - アニメーションの終了時に呼び出されます

onAnimationRepeat() - アニメーションが繰り返されるときに呼び出されます。

onAnimationCancel() - アニメーションがキャンセルされたときに呼び出されます。 onAnimationEnd() は、このメソッドが呼び出された後に呼び出されることに注意してください。アニメーションセットを作成し、アニメーションセット内の各アニメーションの順序を指定することができ、複雑なアニメーションを実現するために不可欠なツールです。

ValueAnimation: 属性アニメーションのコア クラス。View の属性変更を駆動してアニメーションを実現できます。

AnimationUpdateListenr: ValueAnimation と組み合わせて使用​​すると、アニメーション フレームを更新する必要があるたびにこのインターフェイスのメソッドが呼び出され、アニメーションを完了するために実際の View のプロパティが設定されます。これには、インターフェイス メソッドが含まれています:

onAnimationUpdate()

ObjectAnimator: ValueAnimator の便利なバージョンであり、リフレクション呼び出しを通じて View 属性の設定を自動的に完了します。

TimeAnimator: アニメーションの同期に使用される補助クラスであり、アニメーション フレームがトリガーされると、インターフェイスを通じて指定された時点でアニメーションを実行できます。

上記は属性アニメーション フレームワークの一般的な構造です。typeEvaluator と Interpolator については後で説明します。

2. 個人的な理解

1. 属性アニメーションは「本物の」アニメーション メカニズムですか? 私はそうは思わない（レンガを置いて終わりにさせてくださいㄟ( ▔, ▔ )ㄏ)、なぜ私がノーと言うのですか？アニメーションを直接生成するのではなく、多くのアニメーション フレームでビューのプロパティを変更し、ビューを再描画することでアニメーションの目的を達成します。あるいは、アニメーション フレームの各時点で遷移値を生成し、この値を対応する属性に設定する遷移値ジェネレーターと考える方が適切です。 2. プロパティ アニメーション VS ビュー アニメーション: ビュー アニメーションと比較したプロパティ アニメーションの利点は明らかです。これは、アニメーションのソースがビュー プロパティの変更によって引き起こされる再描画であるため、イベントとアニメーションの間に不一致がないためです。 ビューアニメーションの最大の利点はシンプルであり、さまざまなリスナーを追加することなくアニメーションを実装できることです。 2 つのアニメーションのパフォーマンスを比較したことはないので、同じ効果を実現する場合にどちらが優れているかはわかりません。議論は後回しにしておきましょう！ 3. ValueAnimator VS ObjectAnimator ObjectAnimator は、複雑な実装を避けるために、ObjectAnimator を使用するようにしてください。

3. TypeEvaluator と Interpolators

アニメーション フレーム (Frame) については何度も言及しました。これはビュー アニメーションのフレーム アニメーションに相当します。つまり、個々のページはフィルム ムービーのフレームに似ています。人間の目で認識できるリフレッシュ レートは 24 フレーム/秒です。この周波数より低いアニメーションでは、画像が連続していないことがわかります。 setFrameDelay() メソッドは、一般的なアニメーションでアニメーションの更新頻度を指定するために使用されます。デフォルトでは、その値は 10ms、つまり 1 秒あたり 100 フレームです。更新頻度を値にマッピングするにはどうすればよいでしょうか?これには、TypeEvaluator と Interpolators を使用する必要があります。 まずインターポレーターについて話しましょう。その一般的な目的は、時間の部分を値の部分に変換することです。これら 2 つの間の相対関係は、アニメーションの形式 (均一速度、加速、最初に加速してから減速する、またはその他の数学的変換) を反映します。時間部分が値部分に変換されることはどのように理解できますか?インターフェースを見てみましょう！したがって、インターポレーターはすべて TimeInterpolator インターフェースのサブクラスであり、そこで宣言されているメソッドは次のとおりです:

abstract float getInterpolation(float input)

input是一个已经过去的时间占总时间的比例，也就是动画已经完成的百分比。返回的也是个小数，代表了希望这个点完成的总动画的百分数。假设有这样一个插值器，它接受0.5，返回0.8。这意味着这个差值器在经过50%的时间时，希望动画完成了80%。为什么是希望呢？因为真正映射为属性值是由TypeEvaluator来完成的。 TypeEvaluator：（翻译成类型求值器吧！这样比较贴合它的意思）它完成了差值器返回的值到实际值的映射？或许你会疑问为什么需要这个值，不应该是下面这个公式吗？

startVal:起始值 endVal：结束值 percent：完成百分比 progress：当前值 progress = startVal + (endVal-startVal)*progress

对，的确是这样的。内置的IntEvator、floatEvator也是这样的，但是我们动画的类型不一定都是这种数值类型的值吧！我们还可以动画字符串，在不同的时间点显示不同的字串，这时上述公式就不成立了。所以TypeEvaluator就是为了达到自定义装换的需求的。要实现满足自己需求的TypeEvaluator也很简单，只需要实现TypeEvaluator接口就可以了，它声明的方法如：

abstract T evaluate(float fraction, T startValue, T endValue)

T是要动画的属性类型，fraction是值分数，startValue、endValue是进行动画属性的起始值和终止值。返回映射的中间值。 到这，可以对属性动画的工作原理做个简单的接受了。 动画需要指定持续时间，属性起始值，属性终止值，帧延时。然后每过帧延时的时间间隔，触发插值器，接着触发值装换器，接下来是触发AnimationUpdateListenr中的onAnimationUpdate()方法重新设置View的属性，接着View重绘，如此循环知道动画结束。为了方便，我画了如下流程图：

ps:这符图不是很严谨，因为有些内容是不好表达，比如动画帧的计时是连续的，并不是等到上一帧完成了才开始计数下一帧。其次就是Animator本身的Listener是班法画上去的，当Animator调用cance(),end()之类的方法是能打断这个流程的。但是这图对理解过程还是不错的。

四、ObjectAnimator

先来讲最常使用的属性动画，ObejectAnimator，通过置顶好动画作用对象个对用属性等设置值后，ObjectAnimator能够通过反射区设置对象属性达到动画的目的。 ObjectAnimator提供了四种静态方法来构造自己的对象，分别是：ofInt、ofFloat、ofArgb、ofObject 。它们动画的值类型正如名字中说的那样，如ofInt动画作用于一个int域，offArgb注意与一个带透明的颜色域。 来看一个用动画改变栏背景的例子

public class MainActivity extends AppCompatActivity { @Bind(R.id.btn_bg) Button mGradientBg; ObjectAnimator mAnimator; @TargetApi(Build.VERSION_CODES.LOLLIPOP) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final View view = findViewById(android.R.id.content); final Drawable bgd =view.getBackground(); mAnimator = ObjectAnimator.ofArgb(view,"backgroundColor",0x881DDA38,0x88D48AB2); mAnimator.setDuration(5*1000); mAnimator.setRepeatMode(ObjectAnimator.REVERSE); mAnimator.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); view.setBackground(bgd); } }); ButterKnife.bind(this); } @OnClick(R.id.btn_bg) void onGradientActionbarClicked() { mAnimator.start(); }}

效果如下：

上面就是ObjectAnimation使用过程，先通过四个静态方法构造出一个ObjectAnimation对象，这里使用的是ofArgb：

static ObjectAnimator ofArgb(Object target, String propertyName, int... values)

第一个是作用的对象

第二个是string指定的属性名

第三个可变参数是动画的起始值（可省略，省略以当前值算，且必须有getter）、终止值。

ObjectAnimator作用的域在对象是必须有相应的setter，getter（用于省略初始值的情况）方法，否则反射调用不了会报错。至于没有setter方法的域如何动画，官方Guide提供了如下解决方案：

使用包装类，加入setter，getter。

添加相应方法（自己定义View适合）

换用ValueAnimator。

讲一下使用包装类，假设有类A，且A类中有域a，我可以正常操作A.a(访问和写值)，现在我要动画A的a域，直接用ObjectAnimator是不行了，因为A类中没有A.setA()这个方法，那该怎么办呢？使用包装类，写一个A的包装类AWrapper，它接受一个A对象来构造自己，然后里面有一个setter和getter方法来设置和读取A的a域。现在就可以在AWrapper上使用ObjectAnimator了。

六、ValueAnimator

ValueAnimator提供的便利性大大强于ObejectAnimator，因为需要你自己去更新对象的值，ValueAnimator只是为了提供了一个过渡值。为了更新对象的值，你就必须去设置前面讲的AnimationUpdateListenr接口。一个简单的例子来完成ValueAnimator的使用：

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); final float X = 0, Y = 500; LogUtil.d("X,Y = "+X+","+Y); mValueAnimator = ValueAnimator.ofFloat(0f, 1f); mValueAnimator.setDuration(3 * 1000); mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mChangelocation.setY(Y * (Float)animation.getAnimatedValue()); mChangelocation.invalidate(); } }); mValueAnimator.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); mChangelocation.setY(Y); } }); } @OnClick(R.id.btn_cl) void onChangeLocationClicked() { mValueAnimator.start(); }}

效果：

七、动画集： Keyframes于AnimatorSet

类似于ViewAnimation中的动画集，参考资料：AnimatorSet
Keyframes实现动画集：Keyframes

本篇涉及例子下载：Github