浅析Android动画(一)——Tween Anim

作者: JC_Hou | 来源:发表于2016-08-15 01:11 被阅读220次
  • 变换动画有四种 :alpha(透明度)、translate(平移)、rotate(旋转)、scale(伸缩),动画可以在xml实现,需要在res文件夹下新建一个anim文件夹,把xml文件放在这里;当然也可以在代码中实现。
  • 所有变换动画共有的属性
    duration:动画持续时间(单位:毫秒)
    fillAfter:布尔类型,表示动画结束后是否维持动画结束时的状态
    fillBefore:布尔类型,表示动画结束后是否维持动画开始时的状态
    interpolator:动画插值器(加速、减速等)
    repeatCount:重复次数
    repeatMode:重复模式,restart/reverse(顺序/倒序)
    startOffset:动画延迟运行时间(单位:毫秒)
基础动画
alpha

xml形式

alpha.png
  • fromAlpha:表示起始透明度,0~1,0为完全透明,1为完全不透明
  • toAlpha:表示终止透明度,0~1,0为完全透明,1为完全不透明

xml文件的使用方法都是以下这样:
使用方法:

//通过AnimationUtils的loadAnimation调取xml动画文件
Animation animation= AnimationUtils.loadAnimation(this,R.anim.alpha);
//启动动画
mImageView.startAnimation(animation);

代码形式

AlphaAnimation aa=new AlphaAnimation (0.1f,1f);//第一个参数为起始透明度,第二个参数为终止透明度
aa.setDuration(1000);//设置动画时间
imageView.startAnimation(aa);//启动动画```

######tanslate

xml形式

![translate.png](https://img.haomeiwen.com/i1814117/90bdfcba25d9e87b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- fromXDelta:表示相对于自己左上角X方向上的起始位置,具体到数值,也可以用%p表示宽的百分比,如100%p表示相当于自己左上角X方向上100%宽度的距离
- toXDelta:表示相对于自己左上角X方向上的终点
- fromYDelta:表示相对于自己左上角Y方向上的起点
- toYDelta:表示相对于自己左上角Y方向上的终点

代码形式:

TranslateAnimation ta=new TranslateAnimation (0f,100f,0f,100f);//第一个参数为X起始点,第二个参数为X终点,第三个参数为Y起始点,第四个参数为Y终点
ta.setDuration(1000);//设置动画时间
imageView.startAnimation(ta);//启动动画```

rotate

xml形式

rotate.png
  • fromDegrees:表示起始角度
  • toDegrees:表示终止角度
  • pivotY:旋转中心相对于自身左上角Y轴上的百分比距离坐标
  • pivotX:旋转中心相对于自身左上角X轴上的百分比距离坐标

toDegrees大于fromDegrees为顺时针,相反为逆时针

代码形式:

//前两个参数为起始角度和终止角度;第三个和第五个参数表示旋转中心相对于自身来说,类似的还有Animation.RELATIVE_TO_PARENT相对于父布局,第四和第六个参数表示,旋转中心相对于自身左上角的X和Y方向上的百分比距离,即pivotX和pivotY属性`
`RotateAnimation ra=new RotateAnimation(0f,360f, Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
ra.setDuration(1000);//设置动画时间
imageView.startAnimation(ra);//启动动画```

######scale
xml形式

![scale.png](https://img.haomeiwen.com/i1814117/8ce3cb990de4658f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- fromXScale:起始时X方向上相对于原始尺寸的大小
- fromYScale:起始时Y方向上相对于原始尺寸的大小
- toXScale:结束时X方向上相对于原始尺寸的大小
- toYScale:结束时Y方向上相对于原始尺寸的大小
- pivotY:收缩中心相对于自身左上角Y轴上的百分比距离坐标
- pivotX:收缩中心相对于自身左上角X轴上的百分比距离坐标
新增几个属性看下
- repeatCount :重复次数,重复1次
- repeatCount :重复模式,reverse在这里表示 这个动画先放大一次,在反过来缩小一次结束
- interpolator :插值器

AccelerateDecelerateInterpolator============动画开始与结束的地方速率改变比较慢,在中间的时候加速。
AccelerateInterpolator===================动画开始的地方速率改变比较慢,然后开始加速。
AnticipateInterpolator ==================开始的时候向后然后向前甩。
AnticipateOvershootInterpolator=============开始的时候向后然后向前甩一定值后返回最后的值。
BounceInterpolator=====================动画结束的时候弹起。
CycleInterpolator======================动画循环播放特定的次数,速率改变沿着正弦曲线。
DecelerateInterpolator===================在动画开始的地方快然后慢。
LinearInterpolator======================以常量速率改变。
OvershootInterpolator====================向前超出一定值后再回到原来位置。


代码形式

ScaleAnimation sa=new ScaleAnimation(0f,1f,0f,1f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
sa.setDuration(1000);//设置动画时间
sa.setInterpolator(new AccelerateInterpolator());//设置插值器,这里表示加速动画
imageView.startAnimation(sa);//启动动画


#####组合动画
xml形式


![set1.png](https://img.haomeiwen.com/i1814117/e0ff5c60fcb729b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
> 在xml中的<set>标签是AnimationSet的意思,它代表动画集合的意思,也就是在这个标签下可以有多个动画一起生效

代码形式

//先声明动画集合
AnimationSet set=new AnimationSet(true);//参数为布尔型,参数名称shareInterpolator,表示是否共享一个插值器,这里选择ture
//将上面的动画添加进去
set.addAnimation(aa);
set.addAnimation(ta);
set.addAnimation(ra);
set.addAnimation(sa);
imageView.startAnimation(set);


######startOffset属性的使用
在组合动画中,如果想要达到这样一种效果,先旋转,旋转结束再进行移动,需要用到这个属性
xml形式

![set2.png](https://img.haomeiwen.com/i1814117/21f915612200091c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

startOffset属性只能在<set>标签里面声明,因此需要在一个<set>内部嵌套一个<set>
在这个布局文件中,内部的set动画就会在动画开始1秒之后才开始运作

代码形式

//先声明动画集合
AnimationSet set=new AnimationSet(true);//参数为布尔型,参数名称shareInterpolator,表示是否共享一个插值器,这里选择ture
//将上面的动画添加进去
aa.setDuration(1000);
set.addAnimation(aa);
//ta延迟1秒运行
ta.setDuration(1000);
ta.setStartOffset(1000);
set.addAnimation(ta);
//ra延迟2秒运行
ra.setDuration(1000);
ra.setStartOffset(2000);
set.addAnimation(ra);
imageView.startAnimation(set);```

相关文章

网友评论

    本文标题:浅析Android动画(一)——Tween Anim

    本文链接:https://www.haomeiwen.com/subject/strssttx.html