Androidアニメーションのアニメーションとフレームアニメーションを表示する

Androidアニメーションは、次の3つのカテゴリに分類できます。

1>ビューアニメーションは、トゥイーンとも呼ばれます。 

2>フレームアニメーション

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

 

================== [ アニメーションを表示 ] =========================

5つのタイプがあります。

アルファ                            勾配透明アニメーション効果の
スケール                            アニメーション効果をスケーリング勾配サイズ
翻訳                        画面遷移位置移動アニメーションエフェクト
回転                           画面転送回転アニメーション効果
layoutAnimation           コンテナ制御アプリケーション統一アニメーション

 

 

まず、ディレクトリを作成するための具体的な手順は次のとおりです。

 

選択:アニメーションディレクトリ

 

OK、ディレクトリを見て、アニメーションファイルを作成します。

 

名前:my_animat

 

では、このセットに必要なアニメーションを追加しましょう。

アニメーションまたは複数のアニメーションの組み合わせにすることができます    

では、水平モーションペインティングを1つずつ見ていきましょう。

【翻訳】

アニメーションターゲットビューの設定を確認すると、TextViewが使用されます。  注:使用される幅と高さは300pxピクセル、ピクセル、ピクセルです。

pxを使用する理由  

<TextView
            android:id="@+id/tv_animator"
            android:layout_width="300px"
            android:layout_height="300px"
            android:background="@color/color_00a3f3"
            android:text="animator"
            android:textColor="@color/color_7e4513"
            android:gravity="center"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
    />

 

次に、アニメーションtranslate_ani.xmlの      注:fillAfter = "true" ビューは、アニメーションの最後にとどまります。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true">

    <!-- 平移  对应 TranslateAnimation
    fromXDelta,fromYDelta   起始时X,Y座标,如果是0,0,就从远处开启
    toXDelta, toYDelta     动画结束时X,Y的座标 这个坐标是相对于 原始位置(0,0)的
    看下 toXDelta  toYDelta  和TextView 宽高同是 300
    -->
    <translate
            android:fromXDelta="0"
            android:fromYDelta="0"
            android:toXDelta="300"
            android:toYDelta="300"
            android:duration="500">
    </translate>

</set>

 

元のスクリーンショットを見てください

 

アクティビティのレイアウトを見てください:activity_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".animator.AnimatorActivity">


    <TextView
            android:id="@+id/tv_animator"
            android:layout_width="300px"
            android:layout_height="300px"
            android:background="@color/color_00a3f3"
            android:text="目标动画"
            android:textColor="@color/color_7e4513"
            android:gravity="center"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
    />


    <TextView
            android:id="@+id/tv_animator1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="@dimen/dp10"
            android:layout_marginTop="@dimen/dp100"
            android:text="平移动画"
            android:background="@color/color_999999"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tv_animator"/>

    <TextView
            android:id="@+id/tv_animator2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="@dimen/dp10"
            android:layout_marginTop="@dimen/dp10"
            android:text="透明动画"
            android:background="@color/color_999999"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tv_animator1"/>

    <TextView
            android:id="@+id/tv_animator3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="@dimen/dp10"
            android:layout_marginTop="@dimen/dp10"
            android:text="旋转动画"
            android:background="@color/color_999999"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tv_animator2"/>

    <TextView
            android:id="@+id/tv_animator4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="@dimen/dp10"
            android:layout_marginTop="@dimen/dp10"
            android:text="缩放动画"
            android:background="@color/color_999999"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tv_animator3"/>
</android.support.constraint.ConstraintLayout>

 

 

 

活動コード:

package com.leo.dicaprio.myutilapp.animator

import android.content.Context
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.view.animation.AnimationUtils
import android.widget.Toast
import com.leo.dicaprio.myutilapp.R
import kotlinx.android.synthetic.main.activity_animator.*
import org.jetbrains.anko.startActivity

class AnimatorActivity : AppCompatActivity() {

    companion object {
        fun launch(context: Context) {
            context.startActivity<AnimatorActivity>()
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_animator)
        tv_animator.setOnClickListener { Toast.makeText(this, "被单击了", Toast.LENGTH_LONG).show() }
        tv_animator1.setOnClickListener { startAni1() }
        tv_animator2.setOnClickListener { startAni2() }
        tv_animator3.setOnClickListener { startAni3() }
        tv_animator4.setOnClickListener { startAni4() }
    }


    /**
     *      平移动画
     * */
    private fun startAni1() {
        //先加载 平移动画
        val animation = AnimationUtils.loadAnimation(this, R.anim.translate_ani)
        tv_animator.startAnimation(animation)
    }

    

}

 

1回クリックすると、アニメーション効果はgifを生成せず、最終結果を直接アップロードします

 

最終結果を見ることができます。このとき、携帯電話は開発者モードのボーダーレイアウトを開きました。

分析:

ターゲットのビューの幅と高さは300 * 300ピクセルで、アニメーションのtoXDeltaとtoYDeltaはどちらも300です。つまり、XY軸の正の方向に300ピクセル移動します。

toXDeltaの単位がピクセルであると確信しているのはなぜですか?スクリーンショットから、ターゲットビューはソースポイント(左上隅の座標)によってXY方向に移動した距離に基づいていることがわかります。これは、ターゲットの幅と高さです。

ちなみに、この時、青い部分をクリックすると、Taostは再生されず、元の位置をクリックしたときのみToastが再生されます。したがって、ビューアニメーションは変更されていません

プロパティを表示します。したがって、対象のアニメーションビューにクリックイベントがある場合、ビューアニメーションでは機能を実現できません。これに注意してください。

 

わかりました、基本的に理解できます。実際、translateタグはTranslateAnimation()に対応しています 

あなたはそれを使うことができ、コードは次のように変更されます:

    /**
     *      平移动画
     * */
    private fun startAni1() {
        //先加载 平移动画
//        val animation = AnimationUtils.loadAnimation(this, R.anim.translate_ani)
//        tv_animator.startAnimation(animation)

        //单位是像素
        val translateAnimation = TranslateAnimation(0F, 300F,0F , 300F)
        translateAnimation.fillAfter = true//停留在结束地方
        translateAnimation.duration = 500//时间
        tv_animator.startAnimation(translateAnimation)
    }

同じ効果!

さらに、このTranslateAnimationを使用して、アニメーションの実行ステータスを監視することもできます。たとえば、開始、終了、繰り返しなどです。

といった:

    /**
     *      平移动画
     * */
    private fun startAni1() {
        //先加载 平移动画
//        val animation = AnimationUtils.loadAnimation(this, R.anim.translate_ani)
//        tv_animator.startAnimation(animation)

        val translateAnimation = TranslateAnimation(0F, 300F, 0F, 300F)
        translateAnimation.setAnimationListener(object : Animation.AnimationListener {
            override fun onAnimationRepeat(animation: Animation?) {
                //动画重复
            }

            override fun onAnimationEnd(animation: Animation?) {
                //动画结束
            }

            override fun onAnimationStart(animation: Animation?) {
                //动画开始
            }

        })
        translateAnimation.fillAfter = false//停留在结束地方
        translateAnimation.duration = 500//时间
        tv_animator.startAnimation(translateAnimation)
    }

 

【アルファ】

透明度は比較的単純です。alpha_ani.xmlコード:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true">

    <!--透明
        fromAlpha:开始时透明度 0.0- 1.0   0.0全透明  1.0不透明
        toAlpha: 结束时透明度 0.0- 1.0
        duration:动画持续时间 单位 毫秒
        fillAfter:动画结束后是否停留在结束位置,true停留
        -->
    <alpha android:fromAlpha="1"
           android:toAlpha="0"
           android:duration="10000"
    >
    </alpha>

</set>

 

アクティビティリファレンス

    /**
     *      透明动画
     * */
    private fun startAni2() {
        //先加载 透明动画
        val animation = AnimationUtils.loadAnimation(this, R.anim.alpha_ani)
        tv_animator.startAnimation(animation)

        /*
        *       或者
        * */
        val alphaAnimation = AlphaAnimation(1.0F, 0F)
        alphaAnimation.fillAfter = true
        alphaAnimation.duration = 5000
        tv_animator.startAnimation(alphaAnimation)
    }

 

【回転】

回転、通常4つのパラメータ

fromDegrees    开始时的角度
toDegrees      结束时角度 ,正代表顺时针
pivotX         旋转中心轴点 X坐标 不指定 默认是View 左上角 X坐标   单位像素
pivotY         旋转中心轴点 Y坐标 不指定 默认是View 左上角 Y坐标   单位像素

 

ばかげたことを言わないでください。ターゲットビューに移動してください。これは、300 * 300ピクセルのTextViewでもあります。

    <TextView
            android:id="@+id/tv_animator"
            android:layout_width="300px"
            android:layout_height="300px"
            android:background="@color/color_00a3f3"
            android:text="目标动画"
            android:textColor="@color/color_7e4513"
            android:gravity="center"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
    />

 

 

アニメーションファイルをアップロード:anim /rotate_ani.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true">

    <!--
        fromDegrees  	开始时的角度
        toDegrees    	结束时角度 ,正代表顺时针
        pivotX  	    旋转中心轴点 X坐标 不指定 默认是View 左上角 X坐标
        pivotY 	        旋转中心轴点 Y坐标 不指定 默认是View 左上角 Y坐标
        -->
    <rotate android:fromDegrees="0"
            android:toDegrees="180"
            android:pivotY="150"
            android:pivotX="150"
            android:duration="5000">
    </rotate>

</set>

 

注意!ピボットXとピボットYは150で、TextViewの幅と高さのちょうど半分です。

アクティビティコール:

    /**
     *      旋转动画
     * */
    private fun startAni3() {
        //先加载 旋转动画
        val animation = AnimationUtils.loadAnimation(this, R.anim.rotate_ani)
        tv_animator.startAnimation(animation)

        /*
        *       或者
        * */
        val rotateAnimation = RotateAnimation(0F, 180F, 150F, 150F)
        rotateAnimation.fillAfter = true
        rotateAnimation.duration = 5000
        tv_animator.startAnimation(rotateAnimation)
    }

テストの結果は、TextViewが300 * 300ピクセルの場合、

1>ピボットXとピボットYはどちらも150で、回転の中心はTextViewの中心です。

1>ピボットXとピボットYはどちらも0で、回転の中心はTextViewの左上隅です。

したがって、結論は次のとおりです。回転するドットの座標は、ターゲットビューの左上隅(0,0)の座標に基づいています。

 

 

【規模】

ズーム。

fromXScale,fromYScale   X Y 方向  缩放起始值
toXScale, toYScale     X Y 方向  缩放结束值
pivotX ,pivotY          X Y 方向  缩放中心值   中心点也是和上面的基准规则一样

コードは掲載されていません。すべて同じ原則です。

 

============ [複数のアニメーションが一緒にまたは順番に再生されます] =============

複数のアニメーションを同時に再生する

my_toget__animat.xml代码:   多个动画(透明,旋转,缩放)一起
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha android:fromAlpha="1"
           android:toAlpha="0"
           android:duration="5000">
    </alpha>

    <rotate android:fromDegrees="0"
            android:toDegrees="180"
            android:pivotY="150"
            android:pivotX="150"
            android:duration="5000">
    </rotate>

    <scale android:fromXScale="0"
           android:fromYScale="0"
           android:toXScale="1"
           android:toYScale="1"
           android:pivotX="150"
           android:pivotY="150"
           android:duration="5000">
    </scale>

</set>

 

ビューレイヤーの処理:操作の結果は、同僚による(透明度、回転、ズーム)です。

private fun animationSet(){
        //加载 
        val animation = AnimationUtils.loadAnimation(this, R.anim.my_toget__animat)
        tv_animator_view.startAnimation(animation)
    }

 

これはxmlタイプなしで実行でき、次のような動的コードを使用できます。

private fun animationSet(){
        val rotateAnimation = RotateAnimation(0F, 180F, 150F, 150F)
        val alphaAnimation = AlphaAnimation(1.0F, 0F)
        val scaleAnimation = ScaleAnimation(0F, 1F, 0F, 1F, 150F, 150F)

        //多个动画 放进 AnimationSet 
        val animationSet = AnimationSet(true)
        animationSet.addAnimation(rotateAnimation)
        animationSet.addAnimation(alphaAnimation)
        animationSet.addAnimation(scaleAnimation)
        animationSet.duration = 5000
        tv_animator_view.startAnimation(animationSet)
    }

動的コードによってAnimationSetコレクションを設定し、必要なアニメーションをそれに入れます。効果は同じです

 

 

複数のアニメーションが順番に再生されます

順次再生のアイデアは、xmlのdelayメソッドを使用して、startOffsetによるアニメーションの遅延実行指定することです

といった:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha android:fromAlpha="0"
           android:toAlpha="1"
           android:duration="3000"
           android:fillAfter="true">
    </alpha>

    <!--第2个动画延迟3000毫秒-->
    <rotate
            android:startOffset="3000"
            android:fromDegrees="0"
            android:toDegrees="180"
            android:pivotY="150"
            android:pivotX="150"
            android:duration="3000"
            android:fillAfter="true">
    </rotate>
    
</set>

 

読み込み設定の使用法は同じなので、投稿しません

 

コードを使用してシーケンスを設定し、最初のアニメーションの完了を監視してから、2番目のアニメーションを実行します

private fun animationOrder(){
        val rotateAnimation = RotateAnimation(0F, 180F, 150F, 150F)
        rotateAnimation.fillAfter = true
        rotateAnimation.duration = 5000
        rotateAnimation.setAnimationListener(object :Animation.AnimationListener{
            override fun onAnimationRepeat(animation: Animation?) {
                //动画重复
            }

            override fun onAnimationEnd(animation: Animation?) {
                //动画结束
                val alphaAnimation = AlphaAnimation(1.0F, 0F)
                alphaAnimation.fillAfter = true
                alphaAnimation.duration = 5000
                tv_animator_view.startAnimation(alphaAnimation)
            }

            override fun onAnimationStart(animation: Animation?) {
                //动画开始

            }

        })
        tv_animator_view.startAnimation(rotateAnimation)
    }

 

 

=======【【レイアウトアニメーション】==========

ViewGroupに作用し、ViewGroupのアニメーションを指定します。そのすべての子要素は、ファクトリーから出るときにこのアニメーション効果を持ちます

たとえば、RecycleViewが指定されている場合、各アイテムには

たとえば、ViewGroupが指定されている場合、各子ビューには

まず、layoutAnimationを作成します。anim/ layout_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
                 android:delay="1"
                 android:animationOrder="random"
                 android:animation="@anim/alpha_ani">

    <!--
            delay: 每个子View时间间隔 如果有多个子view的话,如果设定的动画周期是 duration = 1000毫秒,
                    如果 delay=0.1,则下一个子View 会在100(duration * delay)毫秒执行动画

            animationOrder:子view经常顺序,normal是最前面的先进来,
                                            reverse是最后的先进来
                                            random 正看英文就知道。。。。哈哈

            顺序就是View.getChildView(index)  里面的这个index
    -->
</layoutAnimation>

layoutAnimationを作成します。anim/ alpha.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true">

    <!--透明
        fromAlpha:开始时透明度 0.0- 1.0   0.0全透明  1.0不透明
        toAlpha: 结束时透明度 0.0- 1.0
        duration:动画持续时间 单位 毫秒
        fillAfter:动画结束后是否停留在结束位置,true停留
        -->
    <alpha android:fromAlpha="0"
           android:toAlpha="1"
           android:duration="5000"
    >
    </alpha>

</set>

 

親レイアウトレイアウトファイル:

<android.support.constraint.ConstraintLayout
            android:id="@+id/tv_animator_contain"
            android:layout_width="0dp"
            android:layout_height="300px"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layoutAnimation="@anim/layout_animation"
            android:visibility="invisible"
    >

        <TextView
                android:id="@+id/tv_animator_view"
                android:layout_width="300px"
                android:layout_height="300px"
                android:background="@color/color_00a3f3"
                android:text="目标动画1"
                android:textColor="@color/color_7e4513"
                android:gravity="center"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toLeftOf="@id/tv_animator_view2"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintHorizontal_chainStyle="spread"/>


        <TextView
                android:id="@+id/tv_animator_view2"
                android:layout_width="300px"
                android:layout_height="300px"
                android:background="@color/color_00a3f3"
                android:text="目标动画1"
                android:textColor="@color/color_7e4513"
                android:gravity="center"
                app:layout_constraintLeft_toRightOf="@id/tv_animator_view"
                app:layout_constraintRight_toLeftOf="@id/tv_animator_view3"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintHorizontal_chainStyle="spread"/>

        <TextView
                android:id="@+id/tv_animator_view3"
                android:layout_width="300px"
                android:layout_height="300px"
                android:background="@color/color_00a3f3"
                android:text="目标动画1"
                android:textColor="@color/color_7e4513"
                android:gravity="center"
                app:layout_constraintLeft_toRightOf="@id/tv_animator_view2"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintHorizontal_chainStyle="spread"/>

    </android.support.constraint.ConstraintLayout>

 

注意!!   親レイアウトの  可視性=非表示、親レイアウトが可視になると、3つの子ビューが表示されます

もちろん、現れる形はアニメーションの形です。

コードで呼び出す:

private fun layoutAnimation() {
        tv_animator_contain.visibility = View.VISIBLE
    }

親レイアウトを表示するだけで、すべての子ビューにアニメーション効果が表示されます。

LayoutAnimationControllerを使用して、親レイアウトにレイアウトを設定することもできません 

コードに直接:

private fun layoutAnimation() {
        val loadAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha_ani)
        val animationController = LayoutAnimationController(loadAnimation)
        animationController.delay = 0.1F
        animationController.order = LayoutAnimationController.ORDER_NORMAL
        tv_animator_contain.layoutAnimation = animationController
        tv_animator_contain.visibility = View.VISIBLE
    }

注意!

コードが指す  alpha_ani.xml直接、アニメーションファイルにない意味、   layoutAnimation 

 

================== [ フレームアニメーション ] =========================

まず、フレームアニメーションは動画再生に似ており、1秒間に26枚の画像が表示され、肉眼で見える効果は動画です。

フレームアニメーションは、すべての画像を一度にメモリに読み込み、期間が設定されるたびに次の画像を表示します。

推奨されません!それはメモリを消費するからです!

まず、ドローアブルディレクトリにあるフレームアニメーションを作成します。

次に、アニメーションリストを選択します

 

その後 

 

コントロールでの使用:

    /**
     *      帧动画
     * */
    private fun startFrameAni() {
        //先设置
        tv_animator_view.setBackgroundResource(R.drawable.frame_animation)
        //再获取  强转成 AnimationDrawable
        val background = tv_animator_view.background as AnimationDrawable
        //开启动画
        background.start()
    }

繰り返しますが、写真が多すぎると、簡単にOOMにつながります

フレームアニメーションを使用する必要がある場合は、必要なドローアブルのすべてのIDをリストに入れることができます

次に、数秒ごとに自分でタイマーを記述し(ハンドラーを使用するなど)、IDを介してドローアブルを取得して画像を表示し、一度にすべての画像がメモリに読み込まれるのを回避します。

大丈夫。ここです

 

 

次の記事が書かれています:属性アニメーション

上記のコードはプロテストでは問題ありませんが、問題がある場合は修正のためにメッセージを残してください、、、ありがとうございます!

 

おすすめ

転載: blog.csdn.net/Leo_Liang_jie/article/details/90752748