android 60度摇摆动画,Android动画之View Animation--alpha、translate、scale、rotate(示例代码)...

本章内容

其实就是把 TranslateAnimation(偏移动画),AlphaAnimaton(透明渐变动画),ScaleAnimation(缩放动画),RotateAnimation(旋转动画),这四个动画做一次总结,当然也包括了AnimationSet,代码写的多了,会越来越忽略基础代码的编写,不总结一下,总感觉会忘掉。

通用属性

android:duration 动画执行的时间(毫秒)

android:fillAfter 如果设置为true,控件动画结束时,将保持动画最后时的状态

android:fillEnabled 与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态(一般android:fillAfter和android:fillEnabled一起用)

android:fillBefore 如果设置为true,控件动画结束时,还原到开始动画前的状态

android:repeatCount 动画重复次数

android:repeatMode 重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。

还有一个 android:interpolator 名为插值器的属性,这个效果挺多的,而且用到的也挺多,不放在基础的动画总结里面,也不太适合放在里面。

AlphaAnimation

AlphaAnimation应该是最简单动画了,它只有两个自带属性

android:fromAlpha 动画开始的透明度

android:toAlpha 动画结束时的透明度

0f表示完全透明,1f表示完全不透明

效果:

cabd6d8ede874254831c2e4dd8777c28.jpg

XML实现AlphaAnimaton:

android:duration="1500"

android:fillAfter="true"

android:fillEnabled="true"

android:fromAlpha="0"

android:repeatCount="3"

android:toAlpha="1">

动画执行代码:

private ImageView activity_alpha_animation_imageview;

private Animation alphaAnimation;

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

代码生成AlphaAnimation

activity_alpha_animation_imageview.startAnimation(getAlphaAnimation(0.3f, 1f, 3000));

....

private AlphaAnimation getAlphaAnimation(float fromAlpha, float toAlpha, long duration) {

AlphaAnimation aa = new AlphaAnimation(fromAlpha, toAlpha);

aa.setDuration(duration);

aa.setFillAfter(true);

aa.setFillEnabled(true);

aa.setRepeatCount(2);

aa.setRepeatMode(Animation.REVERSE);

return aa;

}

TranslateAnimation

自带属性:

android:fromXDelta 起始点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,具体意义通过代码一览无余。

android:fromYDelta 起始点Y轴从标,可以是数值、百分数、百分数p 三种样式;

android:toXDelta 结束点X轴坐标

android:toYDelta 结束点Y轴坐标

XML实现的动画:

552bf5f89edc4bc1b60f7ed9cdbcf92a.jpg

XML(加载动画的代码直接看AlphaAnimation就可以了):

android:duration="2000"

android:fillBefore="true"

android:fromXDelta="60%p"

android:fromYDelta="-60"

android:toXDelta="-60%"

android:toYDelta="60%">

这里我让动画结束后保持在动画前的位置,先看x轴方向的位置来解析 p和%,同样都是 60的数值,但是开始的位置对于结束的位置而言距初始位置距离更远,这是因为 p 代表的是屏幕宽度的60%,表示为 60%p,而单纯的60%计算的控件本身宽度的60%。再看Y轴方向的动画,-60的值代表的是,在距离初始位置Y轴-60px的位置开始动画,位移到距离初始位置Y轴控件60%高度的位置。(注意,不管是什么参数,它们对应的值都是相对于控件初始位置的)

TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta) 创建动画

效果图:

9881c953a1bb4f9db1b2ff24b0605ab2.jpg

直接看代码:

activity_alpha_animation_imageview.startAnimation(getTranslateAnimation(image_width, -image_width, -image_height, image_height, 1000l));

.....

private TranslateAnimation getTranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta, long duration) {

TranslateAnimation ta = new TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta);

ta.setFillAfter(true);

ta.setFillEnabled(true);

ta.setDuration(duration);

return ta;

}

这里 image_width 和 image_height,分别是控件的宽和高。同样的,这个API中的参数也是相对于控件初始位置作位移。

TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,int fromYType, float fromYValue, int toYType, float toYValue) 创建动画

这个方法参数比较多,而且参数的类型也会比较多,这里带着效果看代码:

b0c5b9b4b39f413ea212eaea473e79ea.jpg

activity_alpha_animation_imageview.startAnimation(getTranslateAnimation(500l, -70, 0.7f, -0.5f, 0.5f));

....

private TranslateAnimation getTranslateAnimation(long durationMillis, float fromXValue, float toXValue,

float fromYValue, float toYValue) {

TranslateAnimation ta = new TranslateAnimation(

Animation.ABSOLUTE, fromXValue, Animation.RELATIVE_TO_SELF, toXValue,

Animation.RELATIVE_TO_PARENT, fromYValue,

Animation.RELATIVE_TO_SELF, toYValue);

ta.setDuration(durationMillis);

ta.setFillAfter(true);

ta.setFillEnabled(true);

return ta;

}

TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,

int fromYType, float fromYValue, int toYType, float toYValue) 这个API看着参数很多,但是你只需要关注 int fromXType、 int toXType、int fromYType、int toYType 这4个参数就OK了,而这4个参数代表的其实是一个意思:位移的类型。

我在代码中把会用到的几种类型掺杂在一个动画里,这里的位置距离同样的都是按照控件初始位置来计算的:

Animation.ABSOLUTE

绝对位置,在这个类型后,你的值必须是一个px的值,

如代码中 int fromXType, float fromXValue 这两个参数对应的是 Animation.ABSOLUTE, -70,

它的意思是距离初始位置X轴方向 -70px 的位置开始动画。

Animation.RELATIVE_TO_PARENT

相对父控件,在其后的值只能是一个百分比的值,demo里的父控件的宽高就是屏幕的宽高,

代码中 int fromYType, float fromYValue 的值为 Animation.RELATIVE_TO_PARENT, -0.5f,

也就是Y轴方向上的起始位置是距离初始位置 -50% 屏幕高度开始的

Animation.RELATIVE_TO_SELF

相对自己,在其后也是一个百分比的值,不过它的计算是以动画控件本身的宽高为基础的,

demo中, int toYType, float toYValue 的值为 Animation.RELATIVE_TO_SELF,0.5f,

即是说Y轴方向的结束位置是距离初始位置 50% 自身高度的位置。

(其实从动画中就可以看出,同样是 50% 的值,但是 Animation.RELATIVE_TO_PARENT 比 Animation.RELATIVE_TO_SELF 的位移距离要大得多,这其实就是因为计算基础值不同)

ScaleAnimation

自带属性:

android:fromXScale

起始的X方向上相对自身的缩放比例,

android:toXScale

结尾的X方向上相对自身的缩放比例

android:fromYScale

起始的Y方向上相对自身的缩放比例

android:toYScale

结尾的Y方向上相对自身的缩放比例

android:pivotX

缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p

(在TranslateAnimation中已经详细展示过3种不同类型值的意义)

android:pivotY

缩放起点Y轴坐标,取值及意义跟android:pivotX一样

XML动画:

0c7d9b988fd84df2a1fe37e85286c8b4.jpg

android:fromXScale="0.5"

android:toXScale="1.4"

android:fromYScale="0.0"

android:toYScale="1.4"

android:pivotX="150"

android:pivotY="-50%p"

android:duration="1000" />

android:pivotX=”150” android:pivotY=”-50%p” 定义了动画的起始点,即X轴方向从距 初始位置 150px处,Y轴方向距 初始位置 50% 屏幕高 处,开始动画出。如果你想要的动画起始点是基于本身的,那么将 android:pivotX、android:pivotY设置成 百分比 就OK了,多试试不同的参数就明白了。

ScaleAnimation(fromX, toX, fromY, toY) 创建动画

这个API非常简单,从 from to 就可以看出,它的意思是从 a 比例 伸缩到 b比例,并且以控件左上角为起始点。

效果图:

70aee2ff6329430686f763c6d775c41f.jpg

activity_animation_imageview.startAnimation(getScaleAnimation(0.2f, 1.2f, 0.5f, 1.5f, 1000l));

.....

private ScaleAnimation getScaleAnimation(float fromX, float toX, float fromY, float toY, long duration) {

ScaleAnimation sa = new ScaleAnimation(fromX, toX, fromY, toY);

sa.setDuration(duration);

return sa;

}

ScaleAnimation(fromX, toX, fromY, toY, pivotX, pivotY) 创建动画

正如上一个API所见,默认是控件的左上角,如果我想自己订制一个点呢?那么这个API中提供了 pivotX, pivotY 这两个参数,可以自己将 起始点控制住,需要注意的是这两个参数需要你填坐标点,不是百分比 也不是 p,而且这个坐标点的值是相对于 控件左上角而言的,比如你给值 0,0,在这里可不是屏幕的左上角而是控件的左上角,再比如你想要让控件从右下角伸缩,那么你给的参数 就得是 imageView_width, imageView_height。

给个imageView_width, imageView_height 这种情况的效果看下:

2b67fcac408c4cba828ed77dc0eff643.jpg

activity_animation_imageview.startAnimation(getScaleAnimation(0.0f, 1.2f, 0.0f, 1.5f, imageView_width, imageView_height, 1000l));

.....

private ScaleAnimation getScaleAnimation(float fromX, float toX, float fromY, float toY,

float pivotX, float pivotY, long duration) {

ScaleAnimation sa = new ScaleAnimation(fromX, toX, fromY, toY, pivotX, pivotY);

sa.setDuration(duration);

return sa;

}

ScaleAnimation(fromX, toX, fromY, toY, pivotXType, pivotXValue, pivotYType, pivotYValue) 创建动画

这个方法看着是不是和 TranslateAnimation 的某个构造方法很相似,不过这里就要注意的参数就少的多了 pivotXType 和 pivotYType,连类型都是一样的,动画的起始点的值 也是相对于控件初始状态下左上角为基础计算的

private ScaleAnimation getScaleAnimation(float fromX, float toX, float fromY, float toY,

int pivotXType, float pivotXValue, int pivotYType, float pivotYValue, long duration) {

ScaleAnimation sa = new ScaleAnimation(fromX, toX, fromY, toY, pivotXType, pivotXValue, pivotYType, pivotYValue);

sa.setDuration(duration);

return sa;

}

先看个简单的 Animation.ABSOLUTE :

b69e001ee2f147d18ad5e8440def9f1a.jpg

activity_animation_imageview.startAnimation(getScaleAnimation(0.0f, 1.2f, 0.0f, 1.5f, Animation.ABSOLUTE, -100, Animation.ABSOLUTE, -100, 1000l));

这里 -100, -100 就是相对于左上角而言的。

再看个复杂的,混合着 Animation.RELATIVE_TO_SELF 和 Animation.RELATIVE_TO_PARENT:

aa9dba196ea341f79945ce46bb49a4a3.jpg

activity_animation_imageview.startAnimation(getScaleAnimation(0.0f, 1.2f, 0.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_PARENT, -0.5f, 1000l));

上述代码中 X轴方向 偏移控件本身宽度的50%,而Y轴方向 偏移屏幕高度的50%,这就是动画的起始点。

RotateAnimation

自带属性:

android:fromDegrees

开始旋转的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数

android:toDegrees

结束时旋转到的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数

android:pivotX

缩放起点X轴坐标,可以是数值、百分数、百分数p

如果不太明白这三个值得含义可以看看 TranslateAnimation 部分,哪里讲的比较清楚

android:pivotY

缩放起点Y轴坐标,可以是数值、百分数、百分数p

XML动画

e910b57a8db842d2a8abb5d36d3df4c2.jpg

android:duration="3000"

android:fillAfter="true"

android:fromDegrees="0"

android:pivotX="50%p"

android:pivotY="50%"

android:toDegrees="720">

这里我定义的旋转中心 android:pivotX=”50%p”和android:pivotY=”50%” 代表着相对于控件左上角 X轴方向 以父宽即屏幕宽的一半位移,Y轴方向以 控件本身高度的一半位移,那么这个点就是 旋转的中心了

RotateAnimation(fromDegrees, toDegrees) 创建动画

activity_animation_imageview.startAnimation(getRotateAnimation(0, 360, 2000l));

.....

private RotateAnimation getRotateAnimation(float fromDegrees, float toDegrees, long duraton) {

RotateAnimation ra = new RotateAnimation(fromDegrees, toDegrees);

ra.setDuration(duraton);

return ra;

}

效果:

0a8d470435f24ebe952d43d9440d0ffa.jpg

可以看出这个API默认控件左上角为旋转中心

RotateAnimation(fromDegrees, toDegrees, pivotX, pivotY) 创建动画

activity_animation_imageview.startAnimation(getRotateAnimation(0, 360, 100f, 0.5f, 2000l));

.....

private RotateAnimation getRotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY, long duraton) {

RotateAnimation ra = new RotateAnimation(fromDegrees, toDegrees, pivotX, pivotY);

ra.setDuration(duraton);

return ra;

}

5f282e407ec943c7a58c22252d865f46.jpg

此处的 float pivotX, float pivotY 是以控件左上角为原点,值为坐标的参数

RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue) 创建动画

同样的这里的 pivotXType 和 pivotYType 决定了跟在后面的值是以什么为基础计算的,但是不管 pivotXType, pivotXValue, pivotYType, pivotYValue 他们的取值怎么样,都是以 控件左上角为原点,位移对应距离,最终的点就是 旋转中心(其实在前面的 TranslateAnimation 和 ScaleAnimation 中也是一样的,不管类型、取值如何都死以控件左上角为原点去计算位移距离的)

private RotateAnimation getRotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,

int pivotYType, float pivotYValue, long duraton) {

RotateAnimation ra = new RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue);

ra.setDuration(duraton);

return ra;

}

Animation.ABSOLUTE 为例:

2c9d90adf6cc4d3397a61e2f9efe52bc.jpg

activity_animation_imageview.startAnimation(getRotateAnimation(0,360, Animation.ABSOLUTE, 200f, Animation.ABSOLUTE, 200f, 2000l))

Animation.RELATIVE_TO_PARENT & Animation.RELATIVE_TO_SELF

4f0f192d38554b9bb826b92e2ee74603.jpg

activity_animation_imageview.startAnimation(getRotateAnimation(0, 360, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f, 2000l));

可以看出,旋转中心是以控件左上角为中心,X轴方向位移屏幕的50%,Y轴方向位移控件高度的50%。

AnimationSet

效果图:

3796782a9eba40dca44ac6625e834055.jpg

XML实现:

android:duration="3000"

android:fillAfter="true">

android:toAlpha="1.0" />

android:fromYScale="0.0"

android:pivotX="50%"

android:pivotY="50%"

android:toXScale="1.0"

android:toYScale="1.0" />

android:pivotX="50%"

android:pivotY="50%"

android:toDegrees="1440" />

android:fromYDelta="0"

android:toXDelta="80%p"

android:toYDelta="150%" />

private Animation animation;

private ImageView activity_animation_imageview;

.....

animation = AnimationUtils.loadAnimation(this, R.anim.set);

activity_animation_imageview.startAnimation(animation);

纯代码实现:

private AnimationSet getAnimationSet() {

AlphaAnimation aa = new AlphaAnimation(0f, 1f);

RotateAnimation ra = new RotateAnimation(0f, 1440f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

ScaleAnimation sa = new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

TranslateAnimation ta = new TranslateAnimation(Animation.ABSOLUTE, 0f, Animation.RELATIVE_TO_PARENT, 0.8f, Animation.ABSOLUTE, 0f, Animation.RELATIVE_TO_SELF, 1.5f);

AnimationSet set = new AnimationSet(true);

set.addAnimation(aa);

set.addAnimation(ra);

set.addAnimation(sa);

set.addAnimation(ta);

set.setDuration(3000l);

set.setFillAfter(true);

set.setFillEnabled(true);

return set;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值