关于Animation的那点小事，天气特效篇

关于Animation的那点小事，天气特效篇

这次接到一个需求，要做天气预报里面的一些特效，像晴天，多云，下雨，下雪等。因为现在APP都在追求高B格了，不弄点特效怎么博人眼球啊！好了，不啰嗦先敲下效果图，先来个晴天和多云的特效压压惊。

分析

习惯性这样，每次拿到需求后，先分析一遍，这也是个很好的习惯，代码不着急写，先理清思绪，如何来实现这个功能。

可能晴天是最好弄的，因为就是一个旋转动画就行，只是转的角度不用太大就行了。今天的重点还是那个云朵飘过，首先第一个感觉肯定是使用位移动画啊，因为都是飘过去的嘛！

但是有没有考虑个问题呢？就是云是从左边的屏幕外飘进来的，这个可能是个难点，我尝试了动态去把云这个图片（ImageView）放到屏幕外边去，然后移动进来。这样有个问题，就是云朵会显示不全，屏幕外的一部分移动到屏幕里面是没有的。阿西吧，，，因为这个问题，我纠结了好久。为什么不换个思考方式呢，假设云朵一开始都是显示在屏幕里面，

我以最快的速度乃至肉眼都看不到的速度（1毫秒），将云朵移动到屏幕外面去，（位移动画）然后移动到屏幕里面一直到屏幕那边去。所以整个过程就是两个动画，连起来就是组合动画了。

撸代码

既然分析完了，有了大概思路，晴天就是采用旋转动画来实现，多云就使用组合动画来实现。

晴天

res下新建一个anim文件夹，然后建一个xml文件，内容很简单android:toDegrees=”+30”就是顺时针旋转30°， android:fillAfter=”true” 意思是动画执行完了，保留位置。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
>
<rotate
android:duration="2000"
android:pivotX="0%"
android:pivotY="0%"
android:fromDegrees="0"
android:toDegrees="+30"
android:fillAfter="true"  >
</rotate>
</set>

使用

Animation animation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.rotate);
imageView= (ImageView) findViewById(R.id.id_img);

多云

这个稍微有点复杂，先来个布局文件吧，没什么好说的，三个ImageView而已。

<FrameLayout
android:id="@+id/id_hs"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_below="@+id/id_img"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@mipmap/lg_wt_bg_day_sunny">
<ImageView
android:id="@+id/id_img_clody_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/lg_wt_night_cloudy_one"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
/>
<ImageView
android:id="@+id/id_img_clody_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/lg_wt_night_cloudy_two"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
/>
<ImageView
android:id="@+id/id_img_clody_three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/lg_wt_night_cloudy_three"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
/>
</FrameLayout>

动画编写

三个ImageView我放入到一个数组里面，便于使用。速度是可以调节的，同样的时间，位移的距离越大速度也就越快。对了， AnimatorSet不支持写几个with，before，得分开写才行哦。

private void initAnimation(final ImageView[] views) {

AnimatorSet set=new AnimatorSet();

/**
* 第一朵云动画
*/
ObjectAnimator cloudy_one_moveout=  ObjectAnimator.ofFloat(views[0],"translationX",0,-500);
cloudy_one_moveout.setDuration(1);
ObjectAnimator cloudy_one_movein=ObjectAnimator.ofFloat(views[0],"translationX",-500,1300);
cloudy_one_movein.setDuration(7000);

ObjectAnimator cloudy_two_omveout=ObjectAnimator.ofFloat(views[1],"translationX",0,-500);
cloudy_two_omveout.setDuration(1);
ObjectAnimator cloudy_two_movein=ObjectAnimator.ofFloat(views[1],"translationX",-500,1300);
cloudy_two_movein.setDuration(7000);

ObjectAnimator cloudy_three_omveout=ObjectAnimator.ofFloat(views[2],"translationX",0,-600);
cloudy_three_omveout.setDuration(1);
ObjectAnimator cloudy_three_movein=ObjectAnimator.ofFloat(views[2],"translationX",-600,1300);
cloudy_three_movein.setDuration(7000);

//先把云朵全部移出屏幕外
set.play(cloudy_three_omveout).with(cloudy_one_moveout);
set.play(cloudy_one_moveout).with(cloudy_two_omveout);
//然后依次移动出来
set.play(cloudy_one_movein).after(cloudy_three_omveout);
set.play(cloudy_two_movein).after(cloudy_three_omveout).after(1000);
set.play(cloudy_three_movein).after(cloudy_three_omveout).after(2500);
set.start();
}

到这里就差不多了，还有后续哦！

这个demo的源码地址