Androidアニメーションの基本的な注意事項

その他 2021-01-27 18:46:41 訪問数: null

アニメーションの分類

  • フレームアニメーション
  • トゥイーンアニメーション（アニメーションを表示）
  • プロパティアニメーション

フレームアニメーション

前書き

  • アニメーションの各フレームを定義する必要があります。そうすると、システムはそれをフレームごとに再生します。
  • 短所：フレームごとのアニメーションのフレームシーケンスの内容が異なるため、制作に負担がかかるだけでなく、最終的な出力ファイルのボリュームも大きくなります。
  • 利点：フレームごとのアニメーションは柔軟性が高く、表現したいほとんどすべてのコンテンツを表現できます。これは、ムービー再生モードに似ており、繊細なアニメーションの実行に非常に適しています。

成し遂げる

Javaコードを使用する
  • フレームアニメーションプレーヤー：AnimationDrawable、一般的なメソッドは次のとおりです。

ここに画像の説明を挿入

  • AnimationDrawable.addFrame（Drawable、int）メソッドのDrawableオブジェクトは、各フレームの画像であり、次のように、画像名に従ってバッチで取得できます。
  for (int i = 0; i < 7; i++) {
animationDrawable.addFrame(getResources().getDrawable(getResources().getIdentifier ("ic_frame_" + i, "mipmap", getPackageName())), 200);
       }

getResources（）。getIdentifier（）名前に基づいてリソースを取得します

xmlを使用する
  • 次のように、res / drawableフォルダーでアニメーションframe.xmlを定義します。
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
 android:oneshot="false">
<item android:drawable="@drawable/ic_fingerprint_0" android:duration="100"/>
<item android:drawable="@drawable/ic_fingerprint_1" android:duration="100"/>
<item android:drawable="@drawable/ic_fingerprint_2" android:duration="100"/>
</animation-list>
  • 次に、次のように、コードで定義されたアニメーションファイルを取得します。
AnimationDrawable frame = (AnimationDrawable) ContextCompat.getDrawable(this, R.drawable.frame);

frame.start();

トゥイーンアニメーション（アニメーションを表示）

前書き

  • ビューアニメーションは、グラデーションアルファ、回転、スケール、平行移動の4つの基本的なアニメーションを定義し、これら4つの基本的なアニメーションを組み合わせることで、さまざまなインタラクティブ効果を実現できます。
  • ビューアニメーションは非常に簡単に使用できます。アニメーションはXMLファイルを介して定義できるだけでなく、アニメーションプロセスはJavaコードを介して実現することもできます。

成し遂げる

Javaコードを使用する
  • 回転アニメーション
 /**
     * 旋转动画
     */
    private void rotateAnim() {
        /**
         参数分别是:
          开始角度
          结束角度
           X轴起始点类型
           X轴起始点值
           Y轴起始点类型
           Y轴起始点值

         * 起始点类型 :RotateAnimation.RELATIVE_TO_SELF,RotateAnimation.RELATIVE_TO_PARENT,
         * RotateAnimation.ABSOLUTE,若起始点类型为ABSOLUTE，则起始点的值是指定的值如：720，
         * 其他的是0(0%)到1(100%)按百分比
         */
        RotateAnimation animation = new RotateAnimation(0f, 360f, RotateAnimation.RELATIVE_TO_SELF,
                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        animation.setDuration(2000);
        //动画监听
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) { }

            @Override
            public void onAnimationEnd(Animation animation) { }

            @Override
            public void onAnimationRepeat(Animation animation) { }
        });
        animation.setRepeatMode(Animation.REVERSE);//Animation.REVERSE 第二次反向；Animation.RESTART:一个方向
        animation.setInterpolator(new AccelerateDecelerateInterpolator());//修改旋转过程中的速度
        animation.setRepeatCount(200);//重复的次数
        iv.setAnimation(animation);
        //如果需要立即执行则可使用 iv.startAnimation(animation)

    }
  • パンニング
 private void translate() {
        /**
         * 参数分别是: 
          X轴起始点类型
         X轴起始点值
         X轴终点类型
         X轴终点值
         Y轴起始点类型
         Y轴起始点值
         Y轴终点类型
         Y轴终点值

         * 起始点类型 :RotateAnimation.RELATIVE_TO_SELF,RotateAnimation.RELATIVE_TO_PARENT,
         * RotateAnimation.ABSOLUTE,若起始点类型为ABSOLUTE，则起始点的值是指定的值如，
         * 其他的是0(0%)到1(100%)按百分比
         */
        TranslateAnimation translateAnimation = new TranslateAnimation(
                TranslateAnimation.RELATIVE_TO_SELF, 0f,
                TranslateAnimation.RELATIVE_TO_SELF, 1f,
                TranslateAnimation.RELATIVE_TO_SELF, 0f,
                TranslateAnimation.RELATIVE_TO_SELF, 1f);
        translateAnimation.setDuration(2000);
        translateAnimation.setRepeatMode(Animation.REVERSE);
        translateAnimation.setRepeatCount(200);
        iv.setAnimation(translateAnimation);
    }
  • ズームアニメーション
 private void scale() {
        /**
         * fromX：起始X坐标上的伸缩尺寸。
         * toX：结束X坐标上的伸缩尺寸。
         * fromY：起始Y坐标上的伸缩尺寸。
         * toY：结束Y坐标上的伸缩尺寸。
         * pivotXType：X轴的伸缩模式，可以取值为ABSOLUTE、RELATIVE_TO_SELF、RELATIVE_TO_PARENT。
         * pivotXValue：X坐标的伸缩值。
         * pivotYType：Y轴的伸缩模式，可以取值为ABSOLUTE、RELATIVE_TO_SELF、RELATIVE_TO_PARENT。
         * pivotYValue：Y坐标的伸缩值。
         *
         * 伸缩模式 :RotateAnimation.RELATIVE_TO_SELF,RotateAnimation.RELATIVE_TO_PARENT,
         * RotateAnimation.ABSOLUTE,若伸缩模式为ABSOLUTE，则起始点的值是指定的值如
         * 其他的是0(0%)到1(100%)按百分比
         */
        ScaleAnimation scaleAnimation = new ScaleAnimation(0f, 1, 0f, 1f,
                ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
                ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
        scaleAnimation.setDuration(2000);
        scaleAnimation.setRepeatMode(Animation.REVERSE);
        scaleAnimation.setRepeatCount(200);
        iv.setAnimation(scaleAnimation);
    }
  • グラデーションアニメーション
 private void alpha() {
        AlphaAnimation alphaAnimation = new AlphaAnimation(1f, 0f);
        alphaAnimation.setDuration(2000);
        alphaAnimation.setRepeatCount(200);
        alphaAnimation.setRepeatMode(AlphaAnimation.REVERSE);
        iv.setAnimation(alphaAnimation);
    }
  • 組み合わせたアニメーション

    private void set() {
        /**
         * shareInterpolator ：使用同一个插值器
         */
         animationSet = new AnimationSet(true);
        animationSet.setDuration(2000);
        animationSet.setFillAfter(true);// 为true动画结束时，View将保持动画结束时的状态
        animationSet.setFillBefore(true);// 为true动画结束时，View将还原到开始开始时的状态
        animationSet.setRepeatMode(Animation.REVERSE);
        animationSet.setFillEnabled(true);//是否设置动画结束状态
        animationSet.setInterpolator(new AccelerateDecelerateInterpolator());
        animationSet.addAnimation(alphaAnimation);
        animationSet.addAnimation(scaleAnimation);
        animationSet.addAnimation(translateAnimation);
        iv.setAnimation(animationSet);
    }
達成するためにxmlファイルを使用する
  • 次の内容でres / animフォルダーにview.xmlを作成します。
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fillAfter="true"
    android:repeatMode="restart"
    android:shareInterpolator="true">
    <alpha

        android:fromAlpha="1"
        android:toAlpha="0" />
    <rotate
        android:fromDegrees="0"
        android:pivotY="50%"
        android:toDegrees="360" />
    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.5"
        android:toYScale="0.5" />
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100%"
        android:toYDelta="0" />
</set>

Javaコードアニメーションクラスのメソッドには、ここに対応する属性があります

  • コードでview.xmlファイルを使用します。
 Animation animation=AnimationUtils.loadAnimation(this, R.anim.view);
       iv.startAnimation(animation);

プロパティアニメーション

前書き

  • 属性アニメーションのオブジェクトは任意のJavaオブジェクトであり、フレームアニメーションとビューアニメーションが非ビューオブジェクトをアニメーション化できないという欠点を補います。また、さまざまなアニメーション効果をカスタマイズできます。
  • 一定の時間間隔で、値を絶えず変更し、オブジェクトのプロパティに値を絶えず割り当てて、プロパティに対するオブジェクトのアニメーション効果を実現します。
  • 動作ロジック：
    ここに画像の説明を挿入

使用する

ValueAnimatorクラス

  • ValueAnimatorの主なメソッドは次のとおりです。

    • ValueAnimator.ofInt（）
    • ValueAnimator.ofFloat（）
    • ValueAnimator.ofObject（）
    • ValueAnimator.ofArgb（）
    • ValueAnimator.ofPropertyValuesHolder（）

  • 基本的な使用法、例としてofInt（）を取り上げます

// 步骤1：设置动画属性的初始值 & 结束值
 // ofInt（）作用有两个
        // 1. 创建动画实例
        // 2. 将传入的多个Int参数进行平滑过渡:此处传入0和1,表示将值从0平滑过渡到1
        // 如果传入了3个Int参数 a,b,c ,则是先从a平滑过渡到b,再从b平滑过渡到C，以此类推
        // ValueAnimator.ofInt()内置了整型估值器,直接采用默认的.不需要设置，即默认设置了如///何从初始值 过渡到 结束值
ValueAnimator anim = ValueAnimator.ofInt(0, 3);
       
    
// 步骤2：设置动画的播放各种属性
        anim.setDuration(500);
        // 设置动画运行的时长
        //设置动画的插值器
         anim.setInterpolator(new AccelerateDecelerateInterpolator());
         //设置动画的估值器
        anim.setEvaluator(new IntEvaluator());
        
        anim.setStartDelay(500);
        // 设置动画延迟播放时间

        anim.setRepeatCount(0);
        // 设置动画重复播放次数 = 重放次数+1
        // 动画播放次数 = infinite时,动画无限重复
        
        anim.setRepeatMode(ValueAnimator.RESTART);
        // 设置重复播放动画模式
        // ValueAnimator.RESTART(默认):正序重放
        // ValueAnimator.REVERSE:倒序回放
     
// 步骤3：将改变的值手动赋值给对象的属性值：通过动画的更新监听器
        // 设置 值的更新监听器
        // 即：值每次改变、变化一次,该方法就会被调用一次
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {

                int currentValue = (Integer) animation.getAnimatedValue();
                // 获得改变后的值
                
                System.out.println(currentValue);
                // 输出改变后的值

        // 步骤4：将改变后的值赋给对象的属性值,
        //如：view.setX( currentValue); 改变view的x坐标

                view.setproperty（currentValue）;

       // 步骤5：刷新视图，即重新绘制，从而实现动画效果，View的某些属性改变会自动调用重绘的方法，这一步可以省略
                view.requestLayout();
            }
        });

        anim.start();
        // 启动动画
    }

  • xmlで使用

    1. 次の内容で、res / animatorフォルダーに新しいvalue.xmlを作成します。
<?xml version="1.0" encoding="utf-8"?>
<animator xmlns:android="http://schemas.android.com/apk/res/android"
android:repeatMode="reverse"
android:repeatCount="100"
android:duration="2000"
android:valueFrom="0"
android:valueTo="500" />
  1. コードでvalue.xmlを使用します
 ValueAnimator valueAnimator= (ValueAnimator) AnimatorInflater.loadAnimator(this,R.animator.object);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                iv.setRadius((Float) animation.getAnimatedValue());
            }
        });
        valueAnimator.start();

ObjectAnimatorクラス

  • 主な方法：

    • ObjectAnimator.ofInt（）;
    • ObjectAnimator.ofArgb（）;
    • ObjectAnimator.ofMultiFloat（）;
    • ObjectAnimator.ofObject（）;
    • ObjectAnimator.ofMultiInt（）;
    • ObjectAnimator.ofPropertyValuesHolder（）

  • Javaコードで使用

ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(iv, "rotationX", 0, 120, 240, 360);
       objectAnimator.setDuration(2000);
       objectAnimator.setRepeatCount(100);
       objectAnimator.setRepeatMode(ValueAnimator.REVERSE);
       objectAnimator.start();

  • xmlで使用

    1. 次の内容で、res / animatorフォルダーに新しいobject.xmlを作成します。
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:repeatMode="reverse"
    android:repeatCount="100"
    android:duration="2000"
    android:valueFrom="0"
    android:valueTo="500"
    android:propertyName="scaleX"
    android:valueType="floatType" />
  1. コードでobject.xmlを使用する
ObjectAnimator animator1 = (ObjectAnimator)AnimatorInflater.loadAnimator(this, R.animator.object);
        animator1.setTarget(iv);
        animator1.start();

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

  • Javaコードを使用する
//使用ObjectAnimator
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(iv, "radius", 0, 120, 240, 360);
        objectAnimator.setRepeatMode(ValueAnimator.REVERSE);
        
        //使用ValueAnimator
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 120, 240, 360);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                iv.setRadius(value);
            }
        });
        AnimatorSet animatorSet=new AnimatorSet();
        animatorSet.setDuration(2000);
        animatorSet.playSequentially(objectAnimator,valueAnimator);//动画顺序播放
        animatorSet.playTogether(objectAnimator,valueAnimator);//动画同时播放
        /*
        *还可以使用BUilder指定播放顺序
         animatorSet.play(objectAnimator1)
                .after(valueAnimator1)
                .before(objectAnimator2)
                .with(objectAnimator2);
                */
        animatorSet.start();
  • xmlを使用して、res / animatorフォルダーの下に新しいset.xmlを作成します。内容は次のとおりです。
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="sequentially">
    <animator
        android:duration="2000"
        android:propertyName="scaleX"
        android:repeatCount="100"
        android:repeatMode="reverse"
        android:valueFrom="0"
        android:valueTo="500"
        android:valueType="floatType" />
    <animator
        android:duration="2000"
        android:propertyName="scaleX"
        android:repeatCount="100"
        android:repeatMode="reverse"
        android:valueFrom="0"
        android:valueTo="500"
        android:valueType="floatType" />
</set>
  • コードにset.xmlをロードします
 animatorSet = (AnimatorSet) AnimatorInflater.loadAnimator(this,R.animator.set);
        animatorSet.setTarget(iv);
        animatorSet.start();

おすすめ

転載: blog.csdn.net/genmenu/article/details/88571304
おすすめ
openKylinコミュニティ生態委員会の第6回会議が無事に開催されました
Alibaba Cloud、Tongyi Qianwen 2.5を正式リリース
Python 3.13 が最初のベータ版をリリース: 実験的なフリー スレッド モードと JIT、改善された対話型インタープリター
Stack Overflow は私のコードを使用して大規模な AI モデルをトレーニングし、私のアカウントを禁止しました。
Pop!_OS の COSMIC デスクトップが App Store のリストに掲載される
レポート: Django は依然として 74% の開発者にとって第一の選択肢です
「2024年第1四半期のインターネット投融資業務」調査レポート
15 年前、彼は「FFmpeg 恥の柱」に立っていたのに、今でも私たちに感謝しなければなりません - Tencent QQPlayer はその恥を晴らしますか?
ランキング
ブルーブリッジカップクロップハイブリッド（再帰的）
java线程、线程池
关于毕业前后的道路
JVMの基本
OpenCV ヒストグラムの原理と表示、マスキング、イコライゼーション、適応イコライゼーション
PHPのAES暗号化と復号化、MCRYPT_ENCRYPTとopenssl_encrypt
スコアボードを回転poj3335
Vueで要求されたデータ：タイムスタンプ変換時間
Javaの合併のpng画像
HttpServletResponseアプリケーションリクエストのリダイレクト
アーカイブ
もっと
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)

コードワールド

© 2018 codetd.com