Androidanimation – 随着背景过渡放大和淡入淡出

我正在尝试做这样的事情。有人能指出我正确的方向吗?

在这里输入图像说明

现在,我正在使用Scale Animation和FadeOut Animation。 它看起来像这样..

在这里输入图像说明

我如何添加背景颜色..也请记住,我想这从ICS / Jellybean工作

我的代码,直到现在…

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); } }); 

Solutions Collecting From Web of "Androidanimation – 随着背景过渡放大和淡入淡出"

在Android上达到这种效果最简单的方法是创build一些自定义视图。 比如我们可以把animation分成两个视图 (按照分治规律)。 第一个视图让我们命名CircleButton 。 这将是button,可以在两种状态 – 默认和select。

状态默认 国家选定

第二个视图让我们命名CircularRippleEffect ,它将成为状态改变期间的animation容器。

圆形波纹效应在这里

当我们将这些观点结合在一起时,我们将会得到如下效果:

最终效果

所以,问题是如何创buildCircleButtonCircularRippleEffect类;)第一个是简单的。 我们应该扩展View类和Override onDraw方法。 在onDraw方法中,我们必须绘制两个圆圈(第一个是表示button背景,第二个是黄色边框)。 我们的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 backgroundPaint.setStyle(FILL); 而我们的borderPaint应该有STROKE风格。 我为这个Paint对象设置了合适的颜色。 我们应该在onDraw方法中做的最后一件事是在View的中心绘制文本。 我为这个实现创build了drawCenter()方法,可以在这个答案中find来自https://stackoverflow.com/a/32081250/1722808

这就是我们应该了解的CircleButton类。 其他一切都与每个自定义视图相似。

CircularRippleEffect类更复杂。 我们也画两个圈子,但我们必须顺利地animation。 这就是为什么每个形状的大小取决于进度值。

这个类的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); 

因为我想获得里面有透明区域的圆。 为了达到这个效果,我们必须创buildtempCanvas和tempBitmap。 类似的实现在这里: Android的canvas:在图像上绘制透明的圆形

最后一步是将这些视图组合在一起(我们可以在FrameLayout中完成),并在用户单击它的同时更改这些视图的状态。 整个源代码,你可以find我的github帐户https://github.com/ljarka/CircleAnimation

看看这个 ,

 @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> 

要设置TextView的背景,请改变你的select器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_animation onAnimationEnd()

 @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)); } } 

在你的活动中实现代码来制作一些animation

 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> 

可爱的视图animation集合: https : //github.com/daimajia/AndroidViewAnimations

您可以在自定义形状或带有白色背景的视图上使用像TakingOffAnimator或ZoomOutAnimator这样的animation,并且在位于第一个形状或视图中心的灰色视图上延迟播放相同的animation。

尝试这个;

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