Androidプロパティアニメーションとカスタムプロパティアニメーション

12081 ワード

  • 1.アニメーションの基礎知識
  • 1.アニメーション分類
  • 2.いつどんなアニメを使いますか?

  • 2.実際のアニメーションの例
  • 1.ObjectAnimatorによる通常属性アニメーション
  • 2.ObjectAnimatorカスタムアニメーション
  • を実現
  • 3.ValueAnimatorによるアニメーション
  • 4.RecyclerView単一Itemのプロパティアニメーション
  • 三.結語
  • 一.アニメーションの基礎知識
    1.アニメーション分類
    補間アニメーション:Tween Animationフレームアニメーション:Frame Animationプロパティアニメーション:Property Animation
    2.いつどんなアニメを使いますか.
    1.トゥイーンアニメーションとフレームアニメーションの両方がビューに作用するため、両者はビューアニメーションとも呼ばれ、位置、サイズ、回転、透明度など、ビューオブジェクト上で一連の簡単な変換を実行することができます.注意:この2つのアニメーションを実行するとき、Viewの焦点は変わっていません.ビューがクリックイベントなどに関連している場合は、このようなアニメーションを使用するのは適切ではありません.
    2.アトリビュートアニメーションの機能は比較的強力で、アニメーションを実行するときのViewの焦点もリアルタイムで変化します.例えば、携帯電話の方向センサーを傍受して設定画面の回転を行う場合は、属性アニメーションを使用するのが適切です.ValueAnimatorによって実行される開始点と終了点、例えばViewオフの効果を制御することもできます.
    二.実際のアニメーションの例
    1.ObjectAnimator通常のプロパティアニメーションを実現
    public static ObjectAnimator ofFloat(Object target,String propertyName,float...values){}通常は静的関数ofFloatを呼び出してObjectAnimatorを初期化します.いくつかのパラメータの意味target:アニメーションを実行するView propertyName:Viewのプロパティを実行するには、setメソッドとgetメソッドが必要です.これは可変パラメータです.いくつかの値、開始値、中間値、終了値を入力できます.注意:入力0はViewが初期位置にあることを示します.
    インスタンス1:複数のViewが同時に1つの回転アニメーションを実行する
    //  View          
    private fun startRotationAnim(degree: Float) {
            val animatorSet = AnimatorSet()
            val animatorShotAbumImg = ObjectAnimator.ofFloat(shotAlbumImg, "rotation", degree)
            val animatorShotAlbumCardView = ObjectAnimator.ofFloat(cardView, "rotation", degree)
            val animatorShotMoreImg = ObjectAnimator.ofFloat(shotMoreImg, "rotation", degree)
            val animatorShotSwitchCamera = ObjectAnimator.ofFloat(shotSwitchCamera, "rotation", degree)
            val animatorCountDownTv = ObjectAnimator.ofFloat(countDownTv, "rotation", degree)
            val animatorShotBeautyImg = ObjectAnimator.ofFloat(shotBeautyImg, "rotation", degree)
            animatorSet.play(animatorShotAbumImg)
                    .with(animatorShotMoreImg)
                    .with(animatorShotSwitchCamera)
                    .with(animatorCountDownTv)
                    .with(animatorShotAlbumCardView)
                    .with(animatorShotBeautyImg)
            animatorSet.duration = 300
            animatorSet.start()
        }

    例2:Viewが回転+パンアニメーションを同時に実行する方法PropertyValuesHolderクラスを使用する
        private fun startAnim(degree: Float) {
            var videoScaleX: PropertyValuesHolder ?= null
            var videoScaleY: PropertyValuesHolder ?=null
            var videoRotation: PropertyValuesHolder ?= null
            var scale :Float = 0f
            val layoutParams = mRootView!!.surfaceView.layoutParams as FrameLayout.LayoutParams
            scale = layoutParams.width / layoutParams.height.toFloat()
            videoScaleX = PropertyValuesHolder.ofFloat("scaleX", scale)
            videoScaleY = PropertyValuesHolder.ofFloat("scaleY", scale)
            videoRotation = PropertyValuesHolder.ofFloat("rotation", degree)
            val videoAnimation = ObjectAnimator.ofPropertyValuesHolder(mRootView!!.surfaceView, videoScaleX, videoScaleY, videoRotation)
            val animatorSet = AnimatorSet()
            animatorSet.play(videoAnimation)
            animatorSet.duration = 300
            animatorSet.start()
            }

    2.ObjectAnimatorカスタムアニメーションを実現
    ObjectAnimatorカスタムアニメーションを実装するには、propertyNameをビューにないプロパティとして定義し、onAnimationUpdateコールバック関数で関連する論理を処理すればよい.アニメーションは3秒または5秒のアニメーションであってもよく、常駐アニメーションであってもよい.
    インスタンス1:3秒カスタムアニメーション
    mAnimator = ObjectAnimator
                    .ofFloat(fl_container, "liuxu", 1.0f, 0.0f)
            mAnimator!!.duration = 3000
            mAnimator!!.start()
            CommonPreference.putBoolean(CommonPreference.IS_FIRST_FRAME, true)
            mIsFirstFrame = true
            mAnimator?.addUpdateListener(object : ValueAnimator.AnimatorUpdateListener {
                override fun onAnimationUpdate(p0: ValueAnimator?) {
                //do something what you want
                //         
                 }

    例2:常駐アニメーション
    1の上でアニメーションを无限循环のアニメーションmCurrentSelectAnimatorに设定します!!!repeatCount = ValueAnimator.INFINITE
    注:アニメーションの停止方法
                    //           
                    if (mCurrentSelectAnimator != null) {
                        mCurrentSelectAnimator!!.repeatMode = ValueAnimator.RESTART
                        mCurrentSelectAnimator!!.end()
                        //      ,              
                        fl_guild_current_select.clearAnimation()
                        mCurrentSelectAnimator = null
                    }

    3.ValueAnimatorによるアニメーション化
    ValueAnimator自体はアニメーションを実行することはできません.彼はただのコントローラで、設定した開始点から終了点まで時間通りに一歩一歩過剰に実行することができます.
        //    
        fun startCloseAnim() {
            //            
            val va = ValueAnimator.ofInt(0, MoliveKit.getPixels(295 / 2f))
            val layoutParams = login_collect.fl_login_top.layoutParams
            val layoutParams1 = login_collect.fl_login_bottom.layoutParams
            va.addUpdateListener { animation ->
                //     
                val h = animation?.animatedValue as Int
                // View             
                layoutParams.height = h + login_collect.fl_login_top.height
                login_collect.fl_login_top.layoutParams = layoutParams
                login_collect.fl_login_top.requestLayout()
                layoutParams1.height = h + login_collect.fl_login_bottom.height
                login_collect.fl_login_bottom.layoutParams = layoutParams1
                login_collect.fl_login_bottom.requestLayout()
            }
            va.addListener(object : AnimatorListenerAdapter() {
                override fun onAnimationEnd(animation: Animator?) {
                    super.onAnimationEnd(animation)
                    mLogInListener?.onCollectEnd()
                }
    
                override fun onAnimationStart(animation: Animator?) {
                    super.onAnimationStart(animation)
                }
            })
            va.duration = 1000
            va.start()
        }

    4.RecyclerView単一Itemのプロパティアニメーション
    コールコード
    //     xml     ,         
    detailRecyclerView.layoutAnimation = AnimationUtils.loadLayoutAnimation(context, R.anim.anim_recyclerview_left)
    detailRecyclerView.adapter.notifyDataSetChanged()
    detailRecyclerView.scheduleLayoutAnimation()

    anim_recyclerview_leftファイル
    
    <layoutAnimation
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:animation="@anim/item_beauty_detail_left"
        android:animationOrder="normal"
        android:interpolator="@android:anim/overshoot_interpolator"/>

    item_beauty_detail_leftファイル
    
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="300">
        <translate
            android:interpolator="@android:anim/decelerate_interpolator"
            android:fromXDelta="-100%p"
            android:toXDelta="0" />
    
        <alpha
            android:fromAlpha="0"
            android:toAlpha="1"
            android:interpolator="@android:anim/accelerate_decelerate_interpolator" />
    
    set>

    三.締めくくり
    足りないところは指摘して、みんなが共に学ぶことを望んで、ありがとうございます!もっとクールなアニメがあれば、良いオープンソースライブラリを共有して共同研究することができます!