Android buttom textview 顏色平滑過渡的動畫效果

1. TransitionDrawable。例如,在文件夾中繪製一個xml文件,你可以這樣寫:

<?xml version="1.0" encoding="UTF-8"?>
<transition xmlns:android=" CodeGo.net 
 <!-- The drawables used here can be solid colors, gradients, shapes, images, etc. -->
 <item android:drawable="@drawable/original_state" />
 <item android:drawable="@drawable/new_state" />
</transition>
然後,在你的xml的實際檢視你都引用這個TransitionDrawable在android:background屬性。 在這一點上,你可以通過執行啓動代碼中的過渡:
TransitionDrawable transition = (TransitionDrawable) viewObj.getBackground();
transition.startTransition(transitionTime);
或通過調用運行在反向過渡:
transition.reverseTransition(transitionTime);

我希望這可以幫助您解決您的問題! 


2. 屬性動畫的ValutAnimator動畫:
Integer colorFrom = getResources().getColor(R.color.red);
Integer colorTo = getResources().getColor(R.color.blue);
 ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(),colorFrom,colorTo);
            colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animator) {
                    setBackgroundColor((Integer)animator.getAnimatedValue());
                }
            });
            colorAnimation.setDuration(200);
            colorAnimation.start();

兼容低版本至Android 2.x,可以使用nineoldAndroids的庫。 


3. 根據您的觀點得到它的背景顏色,以及如何讓你的目標顏色有幾種不同的方法來做到這一點。 優先個Android的屬性動畫 如果使用對象的動畫: 你的觀點有其背景色定義爲argb在一個XML文件中的值。 你的觀點有它的顏色由設置view.setBackgroundColor()您的觀點已在繪製中定義它的背景色,不定義如中風或角落的任何額外的屬性 在繪製你的觀點有它的背景色定義和要刪除像中風或角落的任何額外的屬性牢記 CodeGo.net,去除多餘的屬性將不會動畫。 對象動畫作品通過調用view.setBackgroundColor它取代了定義繪製的,除非是它的一個實例ColorDrawable,它很少是。從像中風或角落的可繪製任何額外的背景屬性將被刪除。 如果使用一個值動畫: 在繪製也設置類似的行程或轉角的屬性你的觀點有它的背景色定義,你想改變它運行時決定一個新的顏色。 如果使用過渡繪製: 你認爲應該是以前已經定義了兩個可繪製之間切換 我曾與那當我打開,我一直沒能解決DrawerLayout運行轉換可繪製性能問題,因此,如果您遇到任何意外口吃你可能遇到的bug,因爲我有。 你將不得不修改值動畫的例子,如果你想有一個StateLists繪製或LayerLists繪製,否則會崩潰的。

finalGradientDrawable background = (GradientDrawable) view.getBackground();

GradientDrawable能設置button或者textview的邊框等等屬性


xml

<View
 android:background="#FFFF0000"
 android:layout_width="50dp"
 android:layout_height="50dp"/>
創建ObjectAnimator:
final ObjectAnimator backgroundColorAnimator = ObjectAnimator.ofObject(view,
                  "backgroundColor",
                  new ArgbEvaluator(),
                  0xFFFFFFFF,
                  0xff78c5f9);
backgroundColorAnimator.setDuration(300);
backgroundColorAnimator.start();

您還可以從AnimatorInflater加載動畫定義像XMight確實在Android的objectAnimator動畫布局的backgroundColor 值動畫: xml
<View
 android:background="@drawable/example"
 android:layout_width="50dp"
 android:layout_height="50dp"/>
可繪製對象的xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=" CodeGo.net 
 <solid android:color="#FFFFFF"/>
 <stroke
  android:color="#edf0f6"
  android:width="1dp"/>
 <corners android:radius="3dp"/>
</shape>

創建一個這樣的ValueAnimator
final ValueAnimator valueAnimator = ValueAnimator.ofObject(new ArgbEvaluator(),
                    0xFFFFFFFF,
                    0xff78c5f9);
            final GradientDrawable background = (GradientDrawable) getBackground();
            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(final ValueAnimator animator) {
                    background.setColor((Integer) animator.getAnimatedValue());
                }
            });
            valueAnimator.setDuration(300);
            valueAnimator.start();

過渡繪製: xml:
<View
 android:background="@drawable/example"
 android:layout_width="50dp"
 android:layout_height="50dp"/>
可繪製對象的xml:
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android=" 
 <item>
  <shape>
   <solid android:color="#FFFFFF"/>
   <stroke
    android:color="#edf0f6"
    android:width="1dp"/>
   <corners android:radius="3dp"/>
  </shape>
 </item>
 <item>
  <shape>
   <solid android:color="#78c5f9"/>
   <stroke
    android:color="#68aff4"
    android:width="1dp"/>
   <corners android:radius="3dp"/>
  </shape>
 </item>
</<span style="font-family: Arial, Helvetica, sans-serif;">transition></span>
使用TransitionDrawable
final TransitionDrawable background = (TransitionDrawable) view.getBackground();
background.startTransition(300);

你可以通過調用扭轉動畫.reverse()在動畫實例。 還有其他方法可以做到,但動畫這三個大概是我一個ValueAnimator。 


4. 另一種簡單的方法來實現這一目標是執行AlphaAnimation。 讓你的視圖的ViewGroup 添加一個子視圖將其索引爲0,與match_parent佈局 給你的子的背景作爲容器 改變到容器到目標色彩的背景 淡出AlphaAnimation。 取出子時的動畫效果(使用AnimationListener)



最終我是用的代碼如下


/**
         * Set whether this tag view is in the checked state.
         *
         * @param checked true is checked, false otherwise
         */
        public void setCheckedChangeColor(boolean checked) {
            isChecked = checked;
            changeColorTransition(checked);

        }

        private void changeColorTransition(final boolean checked){
            animUpdateDrawable = true;

            int fromColor,toColor;
            if (checked) {
                fromColor = backgroundColor;
                toColor = checkedBackgroundColor;
            } else {
                fromColor = checkedBackgroundColor;
                toColor = backgroundColor;
            }

            ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), fromColor, toColor);
            colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animator) {

                    GradientDrawable toDrawable = new GradientDrawable();
                    toDrawable.setCornerRadii(mRadius);
                    toDrawable.setColor((Integer)animator.getAnimatedValue());
                    toDrawable.setStroke(mStrokeWidth, !checked ? mStrokeColor.getDefaultColor() : mCheckedStrokeColor.getDefaultColor());

                    if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.JELLY_BEAN) {
                        setBackgroundDrawable(toDrawable);
                    } else {
                        setBackground(toDrawable);
                    }

                }

            });

            colorAnimation.addListener(new ValueAnimator.AnimatorListener(){
                @Override
                public void onAnimationEnd(Animator animator) {
                    animUpdateDrawable = false;

                    if (checked) {
                        setTextColor(checkedTextColor);
                    } else {
                        setTextColor(textColor);
                    }
                }

                @Override
                public void onAnimationCancel(Animator animator) {
                }

                @Override
                public void onAnimationRepeat(Animator animator) {
                }

                @Override
                public void onAnimationStart(Animator animator) {
                }
            });
            colorAnimation.setDuration(350);
            colorAnimation.start();
        }

        @Override
        protected boolean getDefaultEditable() {
            return true;
        }


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章