2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > android 属性动画高级 Android高级UI开发(二十五)属性动画实战案例之流浪大师与乔帮主...

android 属性动画高级 Android高级UI开发(二十五)属性动画实战案例之流浪大师与乔帮主...

时间:2020-04-09 20:42:18

相关推荐

android 属性动画高级 Android高级UI开发(二十五)属性动画实战案例之流浪大师与乔帮主...

在上一篇文章里我们介绍了属性动画的基础知识,今天我们综合运用属性动画的知识来完成一个动画案例。首先,看一下这个动画效果:

1. 分析这个动画案例

第一个动画(浏览大师的动画)是:当点击顶部“大师”按钮时触发的,浏览大师的整个布局(包括按钮+图片)与“”乔帮主“”会执行以下动画:

1. 缩小

2. 翻转

3. 透明度

4. 然后再翻转回来

5. 顶部向上平移(由于执行1缩小动画时,“流浪大师”的布局被缩小了,导致顶部向下偏移了)

然后当执行5的同时,“乔帮主”的图片从屏幕底部向上平移出来

6. “乔帮主”出现:从底部平移进入屏幕

第二个动画:是当上面6执行之后,然后点击“”乔帮主“”,一切恢复如初:大师放大的同时也会翻转,透明度等也恢复如初。

2. 实现上述动画

现在我们依次来解决上面的步骤。

布局文件:

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/liulangdashi"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@mipmap/dashi"

android:orientation="vertical">

android:id="@+id/bt"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#0000ff"

android:onClick="startFirstAnimation"

android:text="大师" />

android:id="@+id/gaibangbangzhu"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:clickable="true"

android:onClick="startSecondAnimation"

android:scaleType="fitEnd"

android:src="@mipmap/qiaofeng"

android:visibility="visible" />

这个布局包括两部分:流浪大师(LinearLayout)与乔帮主(ImageView),我们为LinearLayout设置背景图片为“大师的图片“,为ImageView设置“乔帮主”的图片。这两部分视图将来要执行我们前面分析的动画。我们先来看一下第一个动画:“流浪大师的动画”,点击LinearLayout中的Button执行startFirstAnimation()来依次执行以下动画:

1. 缩小

ObjectAnimator firstScaleXAnim = ObjectAnimator.ofFloat(liulangdashi, "scaleX", 1f,0.8f);

firstScaleXAnim.setDuration(300);

ObjectAnimator firstScaleYAnim = ObjectAnimator.ofFloat(liulangdashi, "scaleY", 1f,0.8f);

firstScaleYAnim.setDuration(300);

大小缩放到原来的80%,我们在此先配置好动画,到时候用AnimatorSet同后面的几个动画一起执行。

2. 翻转

ObjectAnimator firstRotationAnim = ObjectAnimator.ofFloat(liulangdashi, "rotationX", 0f,25f);

firstRotationAnim.setDuration(300);

让整个LinearLayout绕X轴旋转25度。效果也就是图片往屏幕里面伸入旋转。

3. 透明度

ObjectAnimator firstAlphaAnim = ObjectAnimator.ofFloat(liulangdashi, "alpha", 1f,0.5f);

firstAlphaAnim.setDuration(200);

到这一步,我们先看一下当前的效果

AnimatorSet set = new AnimatorSet();

set.playTogether(firstRotationAnim,firstAlphaAnim,firstScaleXAnim,firstScaleYAnim);

set.start();

用AnimatorSet同时执行1,2,3(缩小、绕X旋转、透明度)中的动画,效果如下:

4. 然后再翻转回来

从屏幕里面翻转回来,摆正图片。这个动画相比123动画要延迟一会儿执行,这样才可以看出往回翻转的效果

ObjectAnimator firstResumeRotationAnim = ObjectAnimator.ofFloat(liulangdashi, "rotationX",25f, 0f);

firstResumeRotationAnim.setDuration(200);

firstResumeRotationAnim.setStartDelay(200);//延迟执行

AnimatorSet set = new AnimatorSet();

set.playTogether(firstRotationAnim,firstAlphaAnim,firstScaleXAnim,firstScaleYAnim,

firstResumeRotationAnim);

set.start();

再次一起执行动画,1234四个动画,其中.第4个动画延迟200毫秒执行。运行效果图如下:

我们看到上图已经翻转回来了,但是我们发现顶部距离并没有恢复上去,因此应该执行平移动画

5. 平移(顶部向上)

ObjectAnimator firstTranslationAnim = ObjectAnimator.ofFloat(liulangdashi,"translationY",

0f,

-0.1f*liulangdashi.getHeight());

firstTranslationAnim.setDuration(200);

AnimatorSet set = new AnimatorSet();

set.playTogether(firstRotationAnim,firstAlphaAnim,firstScaleXAnim,firstScaleYAnim,firstResumeRotationAnim,firstTranslationAnim);

set.start();

由于缩放到原来的80%,因此上下边缘各缩放了10%,所以在这里上边缘向上平移10%.可以将整个liulangdashi的布局顶部恢复回去。

6. 乔帮主出现

再加上从底部向上滑出“乔帮主gaibangbanzhu”这张图片。然后和1-5的动画一起执行。

ObjectAnimator secondeTranslationAnim = ObjectAnimator.ofFloat(gaibangbangzhu, "translationY",gaibangbangzhu.getHeight(), 0f);

secondeTranslationAnim.setDuration(200);

AnimatorSet set = new AnimatorSet();

set.playTogether(firstRotationAnim,firstAlphaAnim,firstScaleXAnim,firstScaleYAnim,firstResumeRotationAnim,firstTranslationAnim,secondeTranslationAnim);

set.start();

执行效果如下:

第二个动画,点击乔帮主,让乔帮主向下滑出屏幕,滑动的距离是整个图片的高度。然后“流浪大师”的执行动画跟之前差不多,这里贴出代码:

//1.翻转

ObjectAnimator firstRotationAnim = ObjectAnimator.ofFloat(liulangdashi, "rotationX", 0f,25f);

firstRotationAnim.setDuration(300);

// firstRotationAnim.start();

//2.透明度

ObjectAnimator firstAlphaAnim = ObjectAnimator.ofFloat(liulangdashi, "alpha",0.5f, 1f);

firstAlphaAnim.setDuration(200);

//3.缩放动画

ObjectAnimator firstScaleXAnim = ObjectAnimator.ofFloat(liulangdashi, "scaleX",0.8f, 1f);

firstScaleXAnim.setDuration(300);

ObjectAnimator firstScaleYAnim = ObjectAnimator.ofFloat(liulangdashi, "scaleY",0.8f, 1f);

firstScaleYAnim.setDuration(300);

//改正向旋转设置监听,执行完毕后再执行反向旋转

// firstRotationAnim.addUpdateListener(listener)

ObjectAnimator firstResumeRotationAnim = ObjectAnimator.ofFloat(liulangdashi, "rotationX",25f, 0f);

firstResumeRotationAnim.setDuration(200);

firstResumeRotationAnim.setStartDelay(200);//延迟执行

//由于缩放造成了离顶部有一段距离,需要平移上去

ObjectAnimator firstTranslationAnim = ObjectAnimator.ofFloat(liulangdashi, "translationY", -0.1f*liulangdashi.getHeight(),0f);

firstTranslationAnim.setDuration(200);

//让乔帮主向下滑出屏幕

ObjectAnimator secondeTranslationAnim = ObjectAnimator.ofFloat(gaibangbangzhu, "translationY", 0f,gaibangbangzhu.getHeight());

secondeTranslationAnim.setDuration(300);

最终的执行效果:

文章来源: ,作者:冉航--小虾米,版权归原作者所有,如需转载,请联系作者。

原文链接:/gaoxiaoweiandy/article/details/88851192

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。