如何实现先渐显再渐隐的动画?

    我们知道在Android中Animation是实现动画的类,而AlphaAnimation是其子类,主要实现了透明度渐变的动画。我们可以在xml文件或者使用代码来令其渐隐或渐显。

    在实际项目中,也许产品会让你实现先渐显再渐隐的动画,这样使得下一个页面出现的不太突兀,那么怎么实现呢?

    

    其实,实现原理很简单。我们可以参考AlphaAnimation的源码,只需applyTransformation(float interpolatedTime, Transformation t)函数,将其中内容由线性变化变为折线段(先升后降)即可。代码如下:

   

public class FadeInOutAnimation extends Animation {
	/** fade-in到fade-out的转折点的defalut值*/
	public static final float DEFALUT_BREAK_POINT = 0.7f;

	private float mBreakPoint = 0;//fade-in到fade-out的转折点
	private float mFromAlpha;//fade-in的alpha起点
	private float mToAlpha;//最终完全显示时的的alpha

	public FadeInOutAnimation(float fromAlpha, float toAlpha) {
		this(fromAlpha, toAlpha, DEFALUT_BREAK_POINT);
	}

	public FadeInOutAnimation(float fromAlpha, float toAlpha, float breakpoint) {
		mBreakPoint = DEFALUT_BREAK_POINT;
		mFromAlpha = fromAlpha;
		mToAlpha = toAlpha;
	}

	@Override
	protected void applyTransformation(float interpolatedTime, Transformation t) {
		// TODO Auto-generated method stub
		// super.applyTransformation(interpolatedTime, t);
		final float alpha = mFromAlpha;
		float rate;
		
		//0-mBreakPoint处于fade-in阶段,mBreakPoint-1处于fade-out阶段
		if(interpolatedTime < mBreakPoint){
			rate  = mBreakPoint - 0;
			t.setAlpha(alpha + ((mToAlpha - alpha) * interpolatedTime / rate ));
		} else {
			rate  = 1 - mBreakPoint;
			t.setAlpha(mToAlpha - ((mToAlpha - alpha) * (interpolatedTime - mBreakPoint) / rate));
		}
		
	}

	@Override
	public boolean willChangeBounds() {
		// TODO Auto-generated method stub
		// return super.willChangeBounds();
		return false;
	}

	@Override
	public boolean willChangeTransformationMatrix() {
		// TODO Auto-generated method stub
		// return super.willChangeTransformationMatrix();
		return false;
	}
}


实现background-image图片渐渐隐动画,可以通过CSS3的transition和opacity属性来实现。具体实现步骤如下: 1. 首先,需要将要渐渐隐的图片设置为HTML元素的背景图,例如: ``` <div class="image"></div> ``` ``` .image { background-image: url('path/to/image.jpg'); width: 500px; height: 300px; } ``` 2. 接着,使用CSS3的transition属性来定义背景图的渐变效果,例如: ``` .image { background-image: url('path/to/image.jpg'); width: 500px; height: 300px; transition: opacity 0.5s ease-in-out; } ``` 其中,transition属性用于指定CSS属性及其过渡效果的持续时间、过渡方式和延时时间,这里指定了opacity属性在0.5秒内进行渐变,渐变方式为ease-in-out。 3. 最后,在需要触发图片渐变效果的事件中,使用opacity属性来控制图片的透明度,例如: ``` .image { background-image: url('path/to/image.jpg'); width: 500px; height: 300px; transition: opacity 0.5s ease-in-out; opacity: 0; /* 初始状态为透明 */ } .image:hover { opacity: 1; /* 鼠标悬浮时逐渐示 */ } ``` 这里假设需要在鼠标悬浮时触发背景图的渐渐隐效果,因此在原始状态下将图片的opacity属性设置为0,即完全透明。当鼠标悬浮在图片上时,通过:hover伪类将opacity属性设置为1,背景图将逐渐示出来,实现渐隐效果。 以上就是通过CSS3实现background-image图片渐渐隐动画的方法,希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值