Android動畫 - 隨着背景過渡向上放大和淡入淡出

我想要做這樣的事情。有人可以指出我在正確的方向嗎？Android動畫 - 隨着背景過渡向上放大和淡入淡出

現在，我使用的是縮放動畫和動畫淡出。它看起來像這樣..

如何添加背景色爲這個..也請記住，我想這從ICS /傑利貝恩

我的代碼工作到現在.. 。

fade_out_animation.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <alpha 
     android:fromAlpha="1.0" 
     android:toAlpha="0.1" 
     android:duration="100" /> 
</set>

scale_up_animation.xml

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

    <scale 
     android:duration="100" 
     android:fromXScale="0.1" 
     android:fromYScale="0.1" 
     android:pivotX="50%" 
     android:pivotY="50%" 
     android:toXScale="1" 
     android:toYScale="1" /> 
</set>

activity_main.xml中 - 只要相關部分

<RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:gravity="center"> 

      <TextView 
       android:id="@+id/textView4" 
       android:layout_width="60dp" 
       android:layout_height="60dp" 
       android:layout_centerInParent="true" 
       android:layout_margin="8dp" 
       android:background="@drawable/shape_circle" 
       android:gravity="center" 
       android:text="004" 
       android:textColor="@color/light_gray" 
       android:textSize="18sp" /> 

      <View 
       android:id="@+id/outer_view" 
       android:layout_width="120dp" 
       android:layout_height="120dp" 
       android:layout_centerInParent="true" 
       android:visibility="invisible" 
       android:background="@drawable/shape_circle_yellow"/> 


     </RelativeLayout>

shape_circle.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_focused="false" android:state_pressed="false" android:state_selected="false"> 
     <shape android:shape="oval"> 

      <solid android:color="@color/ash" /> <!-- Fill color --> 

      <stroke android:width="4dp" android:color="@color/medium_gray" /> <!-- Outerline color --> 

     </shape> 
    </item> 
    <item android:state_selected="true"> 

     <shape android:shape="oval"> 
      <solid android:color="@color/ash" /> <!-- Fill color --> 

      <stroke android:width="4dp" android:color="@color/yellow" /> <!-- Outerline color --> 
     </shape> 
    </item> 
    <item android:state_focused="true"> 

     <shape android:shape="oval"> 
      <solid android:color="@color/ash" /> <!-- Fill color --> 

      <stroke android:width="4dp" android:color="@color/yellow" /> <!-- Outerline color --> 
     </shape> 
    </item> 
    <item android:state_pressed="true"> 

     <shape android:shape="oval"> 
      <solid android:color="@color/ash" /> <!-- Fill color --> 

      <stroke android:width="4dp" android:color="@color/yellow" /> <!-- Outerline color --> 
     </shape> 
    </item> 
</selector>

shape_circle_yellow.xml

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

    <stroke android:color="@color/yellow" 
     android:width="4dp" /> 
</shape>

Java代碼：

textView4.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View view) { 

       final View view2 = findViewById(R.id.outer_view); 

       Animation scale_up_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale_up_animation); 
       final Animation fade_out_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade_out_animation); 

       scale_up_animation.setAnimationListener(new Animation.AnimationListener() { 
        @Override 
        public void onAnimationStart(Animation animation) { 
         view2.setVisibility(View.VISIBLE); 
        } 

        @Override 
        public void onAnimationEnd(Animation animation) { 
         view2.startAnimation(fade_out_animation); 
        } 

        @Override 
        public void onAnimationRepeat(Animation animation) { 

        } 
       }); 

       fade_out_animation.setAnimationListener(new Animation.AnimationListener() { 
        @Override 
        public void onAnimationStart(Animation animation) { 

        } 

        @Override 
        public void onAnimationEnd(Animation animation) { 
         view2.setVisibility(View.INVISIBLE); 
        } 

        @Override 
        public void onAnimationRepeat(Animation animation) { 

        } 
       }); 

       view2.startAnimation(scale_up_animation); 
      } 
     });

來源

2016-08-24 Vamsi Challa

郵政shape_circle_yellow.xml？ – sJy

@sJy，更新了問題 –

你可以檢查答案，看看是否有效？ – sJy

在Android上達到此效果最簡單的方法是創建一些自定義視圖。例如我們可以將動畫分成兩個視圖（根據分治規則）。第一個視圖讓我們叫CircleButton。它將是可以處於兩種狀態的按鈕 - 默認和選擇。

第二種觀點讓我們命名CircularRippleEffect，這將是在狀態改變動畫的容器。

當我們結合在一起這個觀點，我們將獲得的效果是這樣的：

所以，現在的問題是如何創造CircleButton和CircularRippleEffect班;）第一個是簡單。我們應該擴展View類和OverrideonDraw方法。在onDraw方法中，我們必須繪製兩個圓圈（第一個代表按鈕背景，第二個代表黃色邊框）。我們的onDraw方法是這樣的：

@Override 
protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 
    canvas.drawCircle(getWidth()/2, getHeight()/2, radius, backgroundPaint); 

    canvas.drawCircle(getWidth()/2, getHeight()/2, radius, borderPaint); 
    drawCenter(canvas, textPaint, text); 
}

我們必須記住，我們的backgroundPaint應使用方法backgroundPaint.setStyle(FILL);已設置樣式了爲FILL和我們borderPaint有風情STROKE。我爲這個Paint對象設置了合適的顏色。在onDraw方法中我們應該做的最後一件事是在視圖中心繪製文本。我創建這個實現drawCenter()方法，可以在這個答案從計算器https://stackoverflow.com/a/32081250/1722808

中找到，這就是我們應該知道CircleButton類。其他一切都與每個自定義視圖相似。

的CircularRippleEffect類的，更復雜。我們也繪製兩個圓圈，但我們必須順利地製作它們。這就是爲什麼每個形狀的大小取決於進度值。從這個類

OnDraw的方法是這樣的：

@Override 
protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 
    tempCanvas.drawColor(Color.WHITE, PorterDuff.Mode.CLEAR); 
    tempCanvas.drawCircle(getWidth()/2, getHeight()/2, outerCircleRadiusProgress * maxCircleSize, circlePaint); 
    tempCanvas.drawCircle(getWidth()/2, getHeight()/2, innerCircleRadiusProgress 
       * (maxCircleSize + ADDITIONAL_SIZE_TO_CLEAR_ANTIALIASING), maskPaint); 
    canvas.drawBitmap(tempBitmap, 0, 0, null); 
}

實現，這是一個有點棘手。我用過

tempCanvas.drawColor(Color.WHITE, PorterDuff.Mode.CLEAR);

因爲我想獲得內部有透明區域的圓。爲了達到這個效果，我們必須創建tempCanvas和tempBitmap。類似的實現在這裏：Android canvas: draw transparent circle on image

最後一步是將這些視圖組合在一起（我們可以在FrameLayout中完成），並在用戶單擊它時同時更改這些視圖的狀態。整個源代碼，你可以找到我的github帳戶https://github.com/ljarka/CircleAnimation

來源

2016-11-26 16:50:50 lukjar

大部分答案都很好..但是這個答案是最接近的。 –

要設置TextView的背景，請改變您的選擇器android:state_selected，如下所示。

<item android:state_selected="true"> 
    <shape android:shape="oval"> 
     <solid android:color="#81fde980" /> <!-- Fill color --> 
     <stroke android:width="2dp" android:color="@color/yellow" /> <!-- Outerline color --> 
    </shape> 
</item>

現在更新scale_up_animationonAnimationEnd()作爲

@Override 
public void onAnimationEnd(Animation animation) { 
    view2.startAnimation(fade_out_animation); 
    if(textView4.isSelected()) { 
     textView4.setSelected(false); 
     textView4.setTextColor(getResources().getColor(R.color.light_gray)); 
    } else { 
     textView4.setSelected(true);              
     textView4.setTextColor(getResources().getColor(R.color.yellow)); 
    } 
}

來源

2016-08-24 16:22:36 sJy

工作正常即使您將代碼添加到onAnimationStart（）方法 – Rajeev

實施代碼在您的活動，使一些動畫

private View mContentView; 
private View mLoadingView; 
private int mShortAnimationDuration; 

... 

private void crossfade() { 

    // Set the content view to 0% opacity but visible, so that it is visible 
    // (but fully transparent) during the animation. 
    mContentView.setAlpha(0f); 
    mContentView.setVisibility(View.VISIBLE); 

    // Animate the content view to 100% opacity, and clear any animation 
    // listener set on the view. 
    mContentView.animate() 
      .alpha(1f) 
      .setDuration(mShortAnimationDuration) 
      .setListener(null); 

    // Animate the loading view to 0% opacity. After the animation ends, 
    // set its visibility to GONE as an optimization step (it won't 
    // participate in layout passes, etc.) 
    mLoadingView.animate() 
      .alpha(0f) 
      .setDuration(mShortAnimationDuration) 
      .setListener(new AnimatorListenerAdapter() { 
       @Override 
       public void onAnimationEnd(Animator animation) { 
        mLoadingView.setVisibility(View.GONE); 
       } 
      }); 
}

使用此代碼的任何組件以XML褪色

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> 

    <fade> 
    <targets> 
    <target android:targetClass="android.widget.TextView" /> 
    <target android:targetClass="android.widget.FrameLayout" /> 
    <target android:targetClass="android.widget.LinearLayout" /> 
    <target android:targetClass="android.widget.ImageView" /> 
    </targets> 
    </fade> 

    </transitionSet>

來源

2016-11-22 12:57:10

試試這個;

Animation fadeOut = new AlphaAnimation(1, 0); 
fadeOut.setDuration(1000); 
AnimationSet animation = new AnimationSet(true); 
animation.addAnimation(sizingAnimation); 
animation.addAnimation(fadeOut); 
this.setAnimation(animation);

來源

2016-11-23 06:15:38

可愛的視圖動畫集合： https://github.com/daimajia/AndroidViewAnimations

您可以使用自定義形狀或白色背景的觀點一樣TakingOffAnimator或ZoomOutAnimator動畫，並與該定位在一個灰色的觀點延遲播放同樣的動畫第一個形狀或視圖的中心。

來源

2016-11-23 10:10:52 misagh

Have a look at this，

@Override 
public void onClick(View view) { 
    switch (view.getId()) { 
     case R.id.textView4: 
      ((TextView)findViewById(R.id.textView4)).setBackground(getResources().getDrawable(R.drawable.shape_circle)); 
      ((TextView)findViewById(R.id.textView4)).setTextColor(getResources().getColor(R.color.lightgrey)); 

      scale_up_animation.setAnimationListener(new Animation.AnimationListener() { 
       @Override 
       public void onAnimationStart(Animation animation) { 
        view2.setVisibility(View.VISIBLE); 
       } 

       @Override 
       public void onAnimationEnd(Animation animation) { 
        view2.startAnimation(fade_out_animation); 
       } 

       @Override 
       public void onAnimationRepeat(Animation animation) { 

       } 
      }); 

      fade_out_animation.setAnimationListener(new Animation.AnimationListener() { 
       @Override 
       public void onAnimationStart(Animation animation) { 

       } 

       @Override 
       public void onAnimationEnd(Animation animation) { 
        view2.setVisibility(View.INVISIBLE); 
        ((TextView) findViewById(R.id.textView4)).setBackground(getResources().getDrawable(R.drawable.circle_yellow)); 
        ((TextView) findViewById(R.id.textView4)).setTextColor(getResources().getColor(R.color.yellow_600)); 
       } 

       @Override 
       public void onAnimationRepeat(Animation animation) { 

       } 
      }); 

      view2.startAnimation(scale_up_animation); 
      break;

circle_yellow。xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="oval" 
     android:tint="@color/yellow_100"> 
     <stroke 
      android:width="3dp" 
      android:color="@color/yellow_600" /> 
     <solid android:color="@color/grey_500" /> 
</shape>

來源

2016-11-23 11:10:29 Bhavnik

Android動畫 - 隨着背景過渡向上放大和淡入淡出

回答

相關問題