アトリビュートアニメーション、フレームアニメーション、補間アニメーションの紹介使用と比較

33977 ワード

アトリビュートアニメーション、フレームアニメーション、補間アニメーションの紹介使用と比較
南軒のブログから転載したことを明記しなければならない.http://blog.csdn.net/nanxuan521
androidの開発では、android SDKに付属のアニメーションに依存して実行できるアニメーションの一部があり、5.0以降、アンドロイドシステムにはジャンプ、オフなどのアニメーションが多くなっています.など多くのアニメーション、私达のAPPを使う中でそんなに硬くなくて、使うのがもっと心地よくて、はっきり言ってユーザーの体験がもっと良くて、それでは今日みんなに今Androidのアニメーションがすべてどれらがあることを教えて、彼らの违いは何で、后でどのアニメーションがもっとかっこいいですか.
トゥイーンアニメーション
1、補間アニメーションの特性:
  • a.グラデーションアニメーションは、平行移動(Translate)、回転(Rotate)、スケール(Scale)、不透明度
  • の4種類をサポートします.
  • b.表示される位置の変動のみであり、Viewの実際の位置は変化せず、Viewが他の場所に移動したと表現され、クリックイベントは元の場所で応答することができる.
  • c.組み合わせの使用手順は複雑である.
  • d.Viewアニメーションもこのアニメーションを指します.

  • 2、アニメーションの長所と短所を補う:
  • 欠点:パンアニメーションの実行が最後の位置に停止すると、フォーカスは元の位置(コントロールのプロパティが本当に変更されていない)
  • に残ります.
  • の利点:フレーム単位のアニメーションに比べて、補間アニメーションは自然
  • に一貫している.
    3、補間アニメーションの実現:
    まず、あなたの補間アニメーションのコードを用意して、彼をリソースフォルダの下のanimフォルダに配置します.平行移動、反転、スケール、透明アニメーションを例にとります.透明補間アニメーション:
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:fillEnabled="true"
        android:fillAfter="true"
        >
        <alpha
            android:duration="2000"
            android:fromAlpha="1"
            android:repeatCount="1"
            android:repeatMode="reverse"
            android:toAlpha="0" />
    set>

    回転補間アニメーション:
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:fillEnabled="true"
        android:fillAfter="true"
        >
           <rotate
            android:duration="2000"
            android:fromDegrees="0"
            android:interpolator="@android:anim/accelerate_interpolator"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="720" >
        rotate>
    
        <rotate
            android:duration="2000"
            android:fromDegrees="360"
            android:interpolator="@android:anim/accelerate_interpolator"
            android:pivotX="50%"
            android:pivotY="50%"
            android:startOffset="2000"
            android:toDegrees="0" >
        rotate>
    set>

    補間アニメーションのスケール:
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:fillEnabled="true"
        android:fillAfter="true"
        >
          <scale android:fromXScale="1"
            android:interpolator="@android:anim/decelerate_interpolator"
            android:fromYScale="1"
            android:toXScale="2.0"
            android:toYScale="2.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:fillAfter="true"
            android:repeatCount="1"
            android:repeatMode="reverse"
            android:duration="2000"/>
    set>

    補間アニメーションを移動するには:
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:fillEnabled="true"
        android:fillAfter="true"
        >
          <translate
            android:fromXDelta="0"
            android:toXDelta="860"
            android:fromYDelta="0"
            android:toYDelta="0"
            android:fillAfter="true"
            android:repeatMode="reverse"
            android:repeatCount="1"
            android:duration="2000">
        translate>
    set>

    次に、アニメーションを表示する必要があるときに呼び出します.
    /**
     *     
     *
     * @author wangyangke
     * @date:2016.9.1 @time 23:40
     */
    public class TweenActivity extends AppCompatActivity {
        private Button b1, b2, b3, b4;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_tween);
            final Animation rotate = AnimationUtils.loadAnimation(this,
                    R.anim.anim_rotate);
            final Animation translate = AnimationUtils.loadAnimation(this,
                    R.anim.anim_translate);
            final Animation scale = AnimationUtils.loadAnimation(this,
                    R.anim.anim_scale);
            final Animation alpha = AnimationUtils.loadAnimation(this,
                    R.anim.anim_alpha);
            final ImageView iv = (ImageView) findViewById(R.id.imageview);
    
            b1 = (Button) findViewById(R.id.btnAlpha);
    
            b2 = (Button) findViewById(R.id.btnRotate);
    
            b3 = (Button) findViewById(R.id.btnScale);
    
            b4 = (Button) findViewById(R.id.btnTranslate);
    
            b1.setOnClickListener(new View.OnClickListener() {
    
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    iv.startAnimation(alpha);
    
                }
            });
            b2.setOnClickListener(new View.OnClickListener() {
    
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    iv.startAnimation(rotate);
                }
            });
            b3.setOnClickListener(new View.OnClickListener() {
    
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    iv.startAnimation(scale);
                }
            });
            b4.setOnClickListener(new View.OnClickListener() {
    
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    iv.startAnimation(translate);
                }
            });
        }
    
        public void mToast(View iv) {
            Toast.makeText(this, "      !", Toast.LENGTH_SHORT).show();
        }
    }

    フレームアニメーション(Frame Animation)
    1、フレームアニメーションの特性:
  • a.連続Gif効果図を生成するために使用される.
  • b.DrawableAnimationもこのアニメ
  • を指す
    2、フレームアニメーションの長所と短所:
  • 欠点:効果は単一で、フレームごとに再生するには多くの画像が必要で、コントロールが大きい
  • 利点:作成が簡単
  • 3、フレームアニメーションの実現:
    フレームアニメーションの効果は単一で、もちろん実現方法も簡単で、効果はGIF図とflanshの効果を達成しました:
    
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true">
        <item android:drawable="@drawable/f1" android:duration="300" />
        <item android:drawable="@drawable/f2" android:duration="300" />
        <item android:drawable="@drawable/f3" android:duration="300" />
        <item android:drawable="@drawable/f4" android:duration="300" />
        <item android:drawable="@drawable/f5" android:duration="300" />
        <item android:drawable="@drawable/f6" android:duration="300" />
        <item android:drawable="@drawable/f7" android:duration="300" />
        <item android:drawable="@drawable/f6" android:duration="300" />
        <item android:drawable="@drawable/f5" android:duration="300" />
        <item android:drawable="@drawable/f4" android:duration="300" />
        <item android:drawable="@drawable/f4" android:duration="300" />
        <item android:drawable="@drawable/f3" android:duration="300" />
        <item android:drawable="@drawable/f2" android:duration="300" />
        <item android:drawable="@drawable/f7" android:duration="300" />
    animation-list>

    次の操作を行います.
    /**
     *    
     *
     * @author wangyangke
     * @date:2016.9.1 @time 23:50
     */
    public class FrameActivity extends AppCompatActivity {
        private ImageView image;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_frame);
            image = (ImageView) findViewById(R.id.frame_image);
    
        }
    
    
        public void startFrame(View view) {
            image.setBackgroundResource(R.anim.anim_frame);
            AnimationDrawable anim = (AnimationDrawable) image.getBackground();
            anim.start();
        }
        public void stopFrame(View view) {
            AnimationDrawable anim = (AnimationDrawable) image.getBackground();
            if (anim.isRunning()) { //      ,   
                anim.stop();
            }
        }
        public void startFrame1(View view) {
            image.setBackgroundResource(R.anim.anim_frame1);
            AnimationDrawable anim = (AnimationDrawable) image.getBackground();
            anim.start();
        }
    }

    プロパティアニメーション(Property Animation)
    次に、属性アニメーション、干物について重点的に紹介します.
    1、属性アニメーションの特性:
  • a.すべてのViewで更新可能なプロパティのアニメーション(プロパティが必要なsetXxx()とgetXxx())をサポートします.
  • b.は、Viewの実際のプロパティを変更しているので、アニメーションの実行後の位置での通常の使用には影響しません.
  • c.Android 3.0(API 11)以降に登場する機能で、3.0以前のバージョンではgithubサードパーティのオープンソースライブラリnineoldandroids.jarを使用してサポートされています.

  • 2、属性アニメーションの長所と短所:
  • 欠点:(3.0+APIで発生)下位互換性の問題
  • 利点:カスタマイズしやすく、効果が強い
  • 3、属性アニメーションの実現:
    フレームアニメーションと補間アニメーションの違いに比べて、アトリビュートアニメーションはリソースファイルでアニメーションを定義することなくアニメーション効果を達成することができます.また、任意にアニメーションを組み合わせることができます.アニメーションを組み合わせることは一度に行うこともできます.同時に行うこともできます.よりクールな効果を達成することができます.コードでどのように使用するかを見てみましょう.
    
    /**
     *     
     *
     * @author wangyangke
     * @date:2016.9.2 @time 01:12
     */
    public class PropertyActivity extends AppCompatActivity {
        private ImageView iv;
        Button btn;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_property);
            iv = (ImageView) findViewById(R.id.iv);
            btn = (Button) findViewById(R.id.btn);
        }
    
        public void mToast(View iv) {
            Toast.makeText(this, "      !", Toast.LENGTH_SHORT).show();
        }
    
        public void play1(View view) {
            //btn.setTranslationX(100);
            //100   View X     
            TranslateAnimation animation = new TranslateAnimation(0, 100, 0, 0);
            animation.setDuration(1000);
            animation.setFillAfter(true);
            iv.startAnimation(animation);
        }
    
        public void play2(View view) {
            //1.    ObjectAnimator
            //btn.setTranslationX(translationX)
            //translationX    float  
            //      ,    translationX    ,0,100
            //translationX        setter getter  
            ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationX", 0f, 100f);
            oa.setDuration(1000);
            oa.start();
            //c.getMethod("setTranslationX", int.class);
        }
    
        public void play3(View view) {
            //3.     
            PropertyValuesHolder pvh1 = PropertyValuesHolder.ofFloat("translationX", 0, 100);
            //    ,X Y          ,     ,        1f
            PropertyValuesHolder pvh2 = PropertyValuesHolder.ofFloat("scaleX", 1f, 0f, 1f);
            PropertyValuesHolder pvh3 = PropertyValuesHolder.ofFloat("scaleY", 1f, 0f, 1f);
            //        
            ObjectAnimator oa = ObjectAnimator.ofPropertyValuesHolder(iv, pvh1, pvh2, pvh3);
            oa.setDuration(1000);
            oa.start();
        }
    
        public void play4(View view) {
            //4.     
            //          :         ,   
            AnimatorSet set = new AnimatorSet();
            //   
            ObjectAnimator anim1 = ObjectAnimator.ofFloat(iv, "alpha", 0f, 1f);
            anim1.setDuration(4000);
            //    
            ObjectAnimator anim2 = ObjectAnimator.ofFloat(iv, "translationX", 0f, 100f);
            anim2.setDuration(3000);
            //    
            ObjectAnimator anim3 = ObjectAnimator.ofFloat(iv, "translationY", 0f, 100f);
            anim3.setDuration(3000);
            //  
            ObjectAnimator anim4 = ObjectAnimator.ofFloat(iv, "rotation", 0f, 360f);
            anim4.setDuration(500);
    
            //         
            //anim1   anim2     
            set.play(anim1).before(anim2);
            //anim2 anim3     
            set.play(anim2).with(anim3);
            //anim4   anim3    
            set.play(anim4).after(anim3);
    
            set.start();
        }
    
        public void play5(View view) {
            //5.   
            //Keyframe                  
            //   0,       ,   0,     (0 )
            Keyframe kf0 = Keyframe.ofFloat(0f, 0f);
            //     30% ,     360 
            Keyframe kf1 = Keyframe.ofFloat(0.2f, 360f);
            //     100%,     0 
            Keyframe kf2 = Keyframe.ofFloat(1f, 0f);
    
    
            //  :ObjectAnimator.ofFloat(iv, "rotation", 0f,360f,0f);
            //      
            PropertyValuesHolder holder = PropertyValuesHolder.ofKeyframe("rotation", kf0, kf1, kf2);
            //        
            ObjectAnimator oa = ObjectAnimator.ofPropertyValuesHolder(iv, holder);
            oa.setDuration(2000);
            oa.start();
        }
    
        public void play6(View view) {
            //6.       
            //AnimatorListener
            ObjectAnimator oa = ObjectAnimator.ofFloat(btn, "alpha", 1f, 0f);
            oa.setDuration(1000);
            oa.addListener(new Animator.AnimatorListener() {
    
                @Override
                public void onAnimationStart(Animator animation) {
                    //       
                }
    
                @Override
                public void onAnimationRepeat(Animator animation) {
                    //       
                }
    
                @Override
                public void onAnimationEnd(Animator animation) {
                    ////       
                    //    
                    ViewGroup parent = (ViewGroup) btn.getParent();
                    if (parent != null) {
                        parent.removeView(btn);
                    }
                }
    
                @Override
                public void onAnimationCancel(Animator animation) {
                    //       
                }
            });
            oa.start();
        }
    
        public void play7(View view) {
            //7.TimeInterpolator :    ,          
    
            ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationY", 0, 300);
            oa.setDuration(1500);
            oa.setInterpolator(new BounceInterpolator());
            oa.start();
    
        }
    
        public void play8(View view) {
            //8.ValueAnimator      ,   AnimatorUpdateListener  
            //  :    “    ”          
    
            final View btn8 = findViewById(R.id.btn8);
            ValueAnimator va = ValueAnimator.ofFloat(0f, 200f);
            //ObjectAnimator.ofFloat(iv, "translationX", 0f,200f);
            //va.setTarget(iv);
            va.setDuration(2000);
            va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    float v = Float.parseFloat(animation.getAnimatedValue().toString());
                    ViewHelper.setTranslationX(iv, v);
                    //  :          ,         
                    //  ObjectAnimator  ValueAnimator                    
                    ViewHelper.setTranslationY(btn8, v);
                }
            });
            va.start();
    
        }
    
        public void play9(View view) {
            //9.TypeEvaluator    ,               
            //(0,100)->(100,200)
            //   int、float    ,            ,          
            //     
    
            final PointF point = new PointF();
            TypeEvaluator typeEvaluator = new TypeEvaluator() {
                //
                @Override
                public PointF evaluate(float fraction, PointF startValue, PointF endValue) {
                    //fraction       0->1
                    //         
                    float time = fraction * 3;//3 
                    //x    :200px/s
                    //y    :
                    point.x = 200 * time;
                    point.y = 0.5f * 200 * time * time;
    
                    return point;
                }
            };
    
            ValueAnimator valueAnimator = ValueAnimator.ofObject(typeEvaluator, new PointF(0, 0));
            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    //getAnimatedValue      , evaluate     
                    PointF point = (PointF) animation.getAnimatedValue();
                    ViewHelper.setX(iv, point.x);
                    ViewHelper.setY(iv, point.y);
                }
            });
            valueAnimator.setDuration(3000);
            valueAnimator.start();
    
        }
    
    }
    

    三者の最大の違い
    アトリビュートアニメーションは、その名の通り変更されたコントロールのアトリビュートです.注意深い学生は発見するかもしれません:補間アニメーションの中で彼の位置が変化しても、彼のクリックイベント、傍受などは、まだその場にとどまっていて、コントロールの位置の変化に従って変化することはありません.アトリビュートアニメーションの最大の特徴は、位置が変化しても使用に影響を与えないリスニングなどのアトリビュートを保持することです.
    リストの内容
    Android内蔵動画
    Android SDK内蔵アニメーションも豊富で、簡単なアニメーションもあります.googleエンジニアは私たちのために書いてくれました.呼び出すだけでいいです.
    まとめ
    アニメーションの効果はプログラマーによって異なり、あなたが考えることができる効果はほとんど実現できますが、難易度、時間のかかること、プログラマーの空間想像能力、思考能力に関係しています.以上は簡単な属性アニメーションにすぎません.一部の人は直接ネットで検索してほしい効果を直接使うのが好きで、原理さえ知らないかもしれません.これはプログラマーとしてはいけないことです.ネットに頼るだけでなく、自分が感じているクールなアニメーション効果を自分で作ってみてほしい.そうすれば、自分の達成感を信じてもいい.
    の最後の部分
    自分で属性のアニメーションに対してまだ深く研究していないで、みんなが贵重な意见あるいは提案を出して、共に进歩することを望みます.
    ソースアドレス:http://download.csdn.net/detail/nanxuan521/9636672