网站地图    收藏   

主页 > 前端 > css教程 >

通过编码和xml文件两种方式实现tween动画 - html/

来源:自学PHP网    时间:2015-04-14 14:51 作者: 阅读:

[导读] tween有四种动画效果:alpha(透明)、rotate(旋转), translate(移动),scale(缩放);可以通过硬编码和xml文件这两种方式来实现。xml实现:第一步:在项目的res文件下面新建一个文件夹名...

tween有四种动画效果:alpha(透明)、rotate(旋转), translate(移动),scale(缩放);

可以通过硬编码和xml文件这两种方式来实现。

xml实现:

第一步:在项目的res文件下面新建一个文件夹名字是anim(必须)

第二步:在anim文件夹下面新建新的xml文件,在xml文件中具体设置动画效果

第三步:在Activity中使用 AnimationUtils.loadAnimation(MainActivity.this,R.anim.xx);来获取。

1、alpha

alpha的xml配置文件:





在上面的代码中

duration:执行这个动画要用的时间

fillAfter:动画执行结束后是否停留在动画的最后一帧,默认为false,当动画结束后图片会回到开始的位置

fromAlpha:开始时的透明度

toAlpha:结束时的透明度

alpha的View:

    

    
成员变量:

	private ImageView ivalpha, ivrotate, ivtranslate, ivscale;
	private Animation alphaAnimation, rotateAnimation, translateAnimation,
			scaleAnimation;
	private Button btalpha, btrotate, bttranslate, btscale;


btalpha的点击事件:

			alphaAnimation = AnimationUtils.loadAnimation(MainActivity.this,
					R.anim.alpha);
			ivalpha.startAnimation(alphaAnimation);

这样一个完整的alpha动画就完成了。

2、scale

scale的xml文件:




fromXScale、fromYScale:动画开始时X轴和Y轴的缩放比例,比如:fromXScale为0.5,fromYScale为2,那么图片的宽就变为原来的一半,高为原来的2倍然后再开始缩放。

toXScale、toYScale: 结束时的图片X轴和Y轴的缩放比例.

编码实现:

1、创建Animation对象

2、设置动画的参数

3、ImageView设置setAnimation

translate

    

    

bttranslate的点击事件:

			 translateAnimation=new TranslateAnimation(0, 100, 0, 100);
			 translateAnimation.setDuration(2000);
			 ivtranslate.setAnimation(translateAnimation);
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
fromXDelta:开始的X轴坐标位置

toXDelta:结束时x轴坐标的位置

fromYDelta:开始的y轴坐标位置

toYDelta:结束时y轴坐标的位置

这是一个图片移动的动画效果。

rotate

			rotateAnimation=new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
			 rotateAnimation.setDuration(2000);
			 rotateAnimation.setFillAfter(true);
			 ivrotate.setAnimation(rotateAnimation);
new RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue);

fromDegrees:开始旋转时图片的角度

toDegrees:旋转到什么角度

pivotXType:以哪里为参考旋转,在这里是图片本身

pivotXValue:以本身哪个点开始旋转,这里是图片宽度的一半,也就是图片中心点。






自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论