ホームページ  >  記事  >  ウェブフロントエンド  >  Android プロパティAnimationPropertyアニメーション シリーズ 1 つのオブジェクトAnimator_html/css_WEB-ITnose

Android プロパティAnimationPropertyアニメーション シリーズ 1 つのオブジェクトAnimator_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:44:031030ブラウズ

前回のブログでは、Android プロパティ アニメーション シリーズの 1 つである ValueAnimator の関連知識とその使用方法を説明しました。このブログではAndroidの属性アニメーションObjectAnimatorクラスの使い方を解説していきます。

ObjectAnimator

ValueAnimator クラスと比較すると、ObjectAnimator は実際にオブジェクトに作用できるため、より実用的です。ただし、ObjectAnimator は ValueAnimator から継承するため、main メソッドは引き続き ValueAnimator に実装されます。それでは、ObjectAnimator の使用法を見てみましょう。一般的に使用されるメソッドには、ofFloat()、ofInt()、ofObject()、ofArgb()、ofPropertyValuesHolder() があります。

ObjectAnimator は

Translation

ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "translationX", 0.0f, 350.0f, 0f);        animator.setDuration(2500).start();

ofFloat() を使用します。メソッドの最初のパラメータはアニメーション操作のオブジェクト (任意のオブジェクトにすることができます) を表し、2 番目のパラメータは操作オブジェクトの属性名を表します (ただし、これはオブジェクトの属性であるため)、両方とも OK)、3 番目のパラメーターの後にはアニメーションのトランジション値が入ります。もちろん、値の場合、デフォルト値はアニメーション トランジション値の終了値になります。 N 個の値がある場合、アニメーションはこれらの N 個の値の間で遷移します。

ズーム

rreee

回転アニメーション

 ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "scaleX", 1.0f, 1.5f);        animator.setDuration(2000).start();

透過アニメーション

ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "rotationX", 0.0f, 90.0f,0.0F);        animator.setDuration(2000).start();

簡単だと思いませんか? 2 行のコードでアニメーション効果を実現できます。もちろん、これは単純なアニメーション設定です。より優れた効果のアニメーションが必要な場合は、次のメソッドを使用して設定できます。

  1. setInterpolator(): アニメーション補間を設定します。 ) : アニメーション実行時間を設定
  2. setRepeatCount(): アニメーション繰り返し回数を設定
  3. setRepeatMode(): アニメーション繰り返しモードを設定
  4. setStartDelay(): アニメーション遅延動作を設定
  5. setTarget(): アニメーションオブジェクトを設定
  6. setEvaluator() : オーバーアニメーションのエバリュエーターを設定します。
  7. アニメーションの詳細な構成は次のとおりです:
ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "alpha", 1.0f, 0.3f, 1.0F);        animator.setDuration(2000);//动画时间

必要に応じて構成を調整できます。

組み合わせたアニメーション

上に表示されているのは単一のアニメーションですが、組み合わせたアニメーションを実装する必要がある場合はどうすればよいでしょうか?心配しないでください。Android エンジニアは、これを実装するための 2 つのメソッド、AnimatorSet クラスと ObjectAnimator.ofPropertyValuesHolder() メソッドを提供してくれました。

結合アニメーション 1? AnimatorSet の使用

このクラスは、Animator オブジェクト (ValueAnimator または ObjectAnimator) をこのメソッドに渡すと、AnimatorSet.Builder のインスタンスを返します。次の 4 つのメソッド:

after(Animator anim) 既存のアニメーションを受信アニメーションに挿入して実行します

after(long late) 既存のアニメーションを指定されたミリ秒間遅延させてから実行します

before(Animator anim) 既存のアニメーションを挿入しますアニメーションは、入力アニメーションの前に挿入され、実行されます

with(Animator anim) 既存のアニメーションと入力アニメーションを同時に実行します

これらのメソッドを使用して、組み合わせたアニメーションを実装しましょう: 画像の透明度から始めます不透明から不透明 0.2 で透明から不透明にすると、レイアウト全体の背景の色が変化するため、ImageView は最初に 200 ピクセル右に移動し、次に 2 回ズームインし、最後に X 軸に沿って 0 から 90 度まで回転します。その後0度に。

コードは次のとおりです:

 ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "alpha", 1.0f, 0.3f, 1.0F);        animator.setDuration(2000);//动画时间        animator.setInterpolator(new BounceInterpolator());//动画插值        animator.setRepeatCount(-1);//设置动画重复次数        animator.setRepeatMode(ValueAnimator.RESTART);//动画重复模式        animator.setStartDelay(1000);//动画延时执行        animator.start();//启动动画

最初に 5 つの ObjectAnimator アニメーションを作成し、次に AnimatorSet オブジェクトを新規作成し、実行のために 5 つのアニメーションを AnimatorSet オブジェクトに再生したことがわかります。実行効果は上記のレンダリングです。

もちろん、AnimatorSet クラスの playTogether(Animator... items) メソッドを使用して、複数のアニメーションを同時に実行する効果を実現できます。

PropertyValuesHolder の使用
上記の Animator クラスに加えて、PropertyValuesHolder クラスを使用して結合アニメーションを実装することもできます。 ただし、この結合アニメーションは、複数のアニメーションのみを実行できます。 PropertyValuesHolder クラスを使用して一緒に使用します。もちろん、ObjectAnimator.ofPropertyValuesHolder(Object target,

PropertyValuesHolder…values); メソッドと組み合わせて使用​​する必要があります。最初のパラメータはアニメーションのターゲット オブジェクトで、後続のパラメータは PropertyValuesHolder クラスのインスタンスです。このようなインスタンスは複数存在する可能性があります。コードは次のとおりです。

 ObjectAnimator animator = ObjectAnimator.ofInt(container, "backgroundColor", 0xFFFF0000, 0xFFFF00FF);        ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageView, "translationX", 0.0f, 200.0f, 0f);        ObjectAnimator animator2 = ObjectAnimator.ofFloat(imageView, "scaleX", 1.0f, 2.0f);        ObjectAnimator animator3 = ObjectAnimator.ofFloat(imageView, "rotationX", 0.0f, 90.0f, 0.0F);        ObjectAnimator animator4 = ObjectAnimator.ofFloat(imageView, "alpha", 1.0f, 0.2f, 1.0F);        //组合动画方式1        AnimatorSet set = new AnimatorSet();        ((set.play(animator).with(animator1).before(animator2)).before(animator3)).after(animator4);        set.setDuration(5000);        set.start();

同様に、最初に PropertyValuesHolder クラスの 4 つのアニメーションを作成し、次に ObjectAnimator.ofPropertyValuesHolder() メソッドを通じてアニメーションを実行するオブジェクトを 4 つのアニメーションと結合しました。返されるオブジェクトは ObjectAnimator です。このアニメーションは、ObjectAnimator オブジェクトの start() メソッドを通じて開始できます。


そんな疑問はありませんか? プロパティアニメーションとは、オブジェクトのプロパティ値を変更することでアニメーション効果を実現することです。では、このオブジェクトの属性名は何になるでしょうか?答えは、set で始まる任意のメソッド属性名です。おそらく私たちはよく次のことを使用します:

translation translationX、translationY、X、Y。

スケールscaleX、scaleY。
  1. 回転 回転X、回転Y。
  2. 透明度アルファ。
  3. 也就是说我们所有控件都有以上setTranslationX(),setScaleX(),setRotationX(),setAlpha()等方法。
    我们不仅限于这几个属性,就拿TextView控件来说,只要是TextView有的属性都可以用来实现动画效果,比如 字体大小:“textColor”,字体颜色“textSize”等。

动画监听器

很多时候我们可能要在某一个动画执行之前 或者动画结束之后进行一些其他的操作,比如:动画结束之后进行网络数据请求等。那么我们就需要去获得该动画的一些状态,幸好,android系统给我们提供了一个动画监听器接口,来监听不同状态下的动画情况。实现也很简单,只要调用addListener(AnimatorListener listener)方法给动画添加监听器就好了,然后实现AnimatorListener接口即可。代码如下:

animator.addListener(new Animator.AnimatorListener() {            @Override            public void onAnimationStart(Animator animation) {                //TODO 动画开始前的操作                /** * 比如这里可以初始化一些UI */            }            @Override            public void onAnimationEnd(Animator animation) {                //TODO 动画结束的操作                /** * 比如这里可以等动画结束进行一些账号登录或者网络数据请求等。 */            }            @Override            public void onAnimationCancel(Animator animation) {                //TODO 动画取消的操作            }            @Override            public void onAnimationRepeat(Animator animation) {                //TODO 动画重复的操作            }        });

可以根据不同需求来实现接口里面的四个方法。有时候你会觉得我不需要监听动画的四种状态,我只需要监听动画结束时候的状态,如果使用上面的方法就会感觉代码臃肿了,不过没关系,Android系统给我们提供了一个更好用的方法

animator.addListener(new AnimatorListenerAdapter() {            @Override            public void onAnimationEnd(Animator animation) {                //TODO 动画结束的操作                /** * 比如这里可以等动画结束进行一些账号登录或者网络数据请求等。 */            }        });

可以看出,我们使用了AnimatorListenerAdapter 动画接口适配器代替AnimatorListener接口。其实AnimatorListenerAdapter的源码只是一个实现了AnimatorListener接口的抽象类而已,你需要监听哪种动画状态就重写哪种方法就可以了。是不是觉得这个方法很nice~?如果你仅仅满足于这个那就OUT了,Android系统还给我们提供了一个更加精确的方法来时刻监听当前动画的执行情况。那就是addUpdateListener(AnimatorUpdateListener listener)方法了。调用该方法只需实现AnimatorUpdateListener接口就可以读取到动画的每个更新值了。来看看代码:

animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                float value = (float) animation.getAnimatedValue();                //可以根据自己的需要来获取动画更新值。                Log.e("TAG", "the animation value is " + value);            }        });

这个方法具体用在哪些地方可以参看上一节Android属性动画Property Animation系列一之ValueAnimator的动态的画一条斜线动画实现。

使用XML编写动画

除了代码实现以上所有的动画,跟补间动画一样,Android系统也提供xml来实现属性动画。
相对于代码实现动画,xml可能显得麻烦些,不过xml动画可重复性好,编写一个xml动画可以多次使用。那么就来看看xml实现动画吧。和补间动画不同的是,在res目录下新建一个animator目录,补间动画是新建anim目录。在xml中实现动画会使用到如下三个标签

  • 对应代码中的ValueAnimator
  • 对应代码中的ObjectAnimator
  • 对于代码中的Animator
  • 比如实现一个0?10的值的平滑过渡动画xml代码如下:

    <?xml version="1.0" encoding="utf-8"?><animator xmlns:android="http://schemas.android.com/apk/res/android" android:valueFrom="0" android:valueTo="10" android:duration="2000" android:valueType="intType"></animator>

    在比如实现一个从0旋转到90度的动画xml代码如下:

    <?xml version="1.0" encoding="utf-8"?><objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:propertyName="rotationX" android:valueFrom="0" android:valueTo="90" android:valueType="floatType" />

    我们来个组合动画吧。

    <?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:ordering="sequentially"><!--动画执行顺序 sequentially:顺序执行;together:同时执行。 -->    <objectAnimator  android:propertyName="translationX" android:valueFrom="0" android:valueTo="200" android:valueType="floatType" />    <set android:ordering="together">        <objectAnimator  android:propertyName="scaleX" android:valueFrom="1" android:valueTo="2" android:valueType="floatType" />        <objectAnimator  android:propertyName="rotationX" android:valueFrom="0" android:valueTo="90" android:valueType="floatType" /><!--动画值的类型-->    </set></set>

    xml动画写好了,接下来看看怎么在代码中调用它吧:

    Animator animator = AnimatorInflater.loadAnimator(context, R.animator.anim_file); animator.setTarget(view); animator.start(); 

    通过AnimatorInflater.loadAnimator方法加载xml动画返回一个Animator的对象,然后调用setTarget方法给动画设置对象调用哪个start启动动画即可完成xml动画效果啦。是不是也很简单呢?最后发现xml的动画可读性还是挺高的,点个赞~。

    下一节我们继续学习 LayoutTransition:布局动画

    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。