先看效果图:
转自：http://blog.csdn.net/lowprofile_coding/article/details/48037095
1.显示三个页面的activity 用view pager去加载三个fragment实现,控制点点点的切换,监听view pager的切换,控制fragment动画的开始跟结束,重写了view pager,实现了背景图片的移动效果.
2.重写viewpager 在dispatchdraw方法中控制显示的背景图片区域,
3.主体布局文件 上面放一个自定义的viewpager 下面放一个显示点点的relativelayout
4.viewpager适配器
5.fragment抽象类 有两个抽象方法,开启动画跟停止动画 所有的fragment都继承这个类 viewpager切换的时候可以更好的控制每个fragment开启动画,结束动画
[java] view
plain copy
/**
* fragment抽象类
* @author ansen
*
*/
public abstract class launcherbasefragment extends fragment{
public abstract void startanimation();
public abstract void stopanimation();
}
6.打赏页fragment 三个动画效果 硬币向下移动动画+打赏图片缩放动画+改变打赏图片透明度然后隐藏图片
* 打赏页面
* @create time 2015-08-07
public class rewardlauncherfragment extends launcherbasefragment{
private imageview ivreward;
private imageview ivgold;
private bitmap goldbitmap;
private boolean started;//是否开启动画(viewpage滑动时候给这个变量赋值)
@override
public view oncreateview(layoutinflater inflater, viewgroup container,bundle savedinstancestate) {
view rooview=inflater.inflate(r.layout.fragment_reward_launcher, null);
ivgold=(imageview) rooview.findviewbyid(r.id.iv_gold);
ivreward=(imageview) rooview.findviewbyid(r.id.iv_reward);
//获取硬币的高度
goldbitmap=bitmapfactory.decoderesource(getactivity().getresources(),r.drawable.icon_gold);
startanimation();
return rooview;
}
public void startanimation(){
started=true;
//向下移动动画 硬币的高度*2+80
translateanimation translateanimation=new translateanimation(0,0,0,goldbitmap.getheight()*2+80);
translateanimation.setduration(500);
translateanimation.setfillafter(true);
ivgold.startanimation(translateanimation);
translateanimation.setanimationlistener(new animationlistener() {
@override
public void onanimationstart(animation animation) {}
public void onanimationend(animation animation){
if(started){
ivreward.setvisibility(view.visible);
//硬币移动动画结束开启缩放动画
animation anim=animationutils.loadanimation(getactivity(),r.anim.reward_launcher);
ivreward.startanimation(anim);
anim.setanimationlistener(new animationlistener(){
@override
public void onanimationstart(animation animation) {}
public void onanimationrepeat(animation animation) {}
public void onanimationend(animation animation) {
//缩放动画结束 开启改变透明度动画
alphaanimation alphaanimation=new alphaanimation(1,0);
alphaanimation.setduration(1000);
ivreward.startanimation(alphaanimation);
alphaanimation.setanimationlistener(new animationlistener() {
@override
public void onanimationstart(animation animation) {}
public void onanimationrepeat(animation animation) {}
public void onanimationend(animation animation) {
//透明度动画结束隐藏图片
ivreward.setvisibility(view.gone);
}
});
}
});
}
}
public void onanimationrepeat(animation animation) {}
});
public void stopanimation(){
started=false;//结束动画时标示符设置为false
ivgold.clearanimation();//清空view上的动画
7.私信页面 四个动画效果 并且四个动画都相同,其实只要我们实现了一个,其他的基本都很容易了. 依次实现四个图片的放大然后还原
* 私信
public class privatemessagelauncherfragment extends launcherbasefragment{
private imageview ivlikevideo,ivthinkreward,ivthisweek,ivwatchmovie;
private animation likeanimation,thinkanimation,watchanimation,thisweekanimation;
private boolean started;//是否开启动画
view rooview=inflater.inflate(r.layout.fragment_private_message_launcher, null);
ivlikevideo=(imageview) rooview.findviewbyid(r.id.iv_private_message_like_video);
ivthinkreward=(imageview) rooview.findviewbyid(r.id.iv_private_message_think_reward);
ivwatchmovie=(imageview) rooview.findviewbyid(r.id.iv_private_message_watch_movie);
ivthisweek=(imageview) rooview.findviewbyid(r.id.private_message_this_week);
//动画开启标示符设置成false
started=false;
/**
* 清空所有控件上的动画
*/
ivlikevideo.clearanimation();
ivthinkreward.clearanimation();
ivwatchmovie.clearanimation();
ivthisweek.clearanimation();
* 每次开启动画前先隐藏控件
ivlikevideo.setvisibility(view.gone);
ivthinkreward.setvisibility(view.gone);
ivwatchmovie.setvisibility(view.gone);
ivthisweek.setvisibility(view.gone);
new handler().postdelayed(new runnable() {//延时0.5秒之后开启喜欢视频动画
public void run(){
if(started)
likevideoanimation();
},500);
/**
* 好喜欢你的视频
*/
private void likevideoanimation(){
ivlikevideo.setvisibility(view.visible);
likeanimation = animationutils.loadanimation(getactivity(),r.anim.private_message_launcher);
ivlikevideo.startanimation(likeanimation);//开启动画
likeanimation.setanimationlistener(new animationlistener(){
@override
public void onanimationstart(animation animation) {}
public void onanimationrepeat(animation animation) {}
public void onanimationend(animation animation) {//监听动画结束
if(started)
thinkreward();
}
});
* 谢谢你的打赏
private void thinkreward(){
ivthinkreward.setvisibility(view.visible);
thinkanimation = animationutils.loadanimation(getactivity(),r.anim.private_message_launcher);
ivthinkreward.startanimation(thinkanimation);
thinkanimation.setanimationlistener(new animationlistener(){
public void onanimationend(animation animation) {
watchmovie();
* 一起看个电影呗
private void watchmovie(){
ivwatchmovie.setvisibility(view.visible);
watchanimation = animationutils.loadanimation(getactivity(),r.anim.private_message_launcher);
ivwatchmovie.startanimation(watchanimation);
watchanimation.setanimationlistener(new animationlistener(){
thisweek();
* 好啊 这周末有空
private void thisweek(){
ivthisweek.setvisibility(view.visible);
thisweekanimation = animationutils.loadanimation(getactivity(),r.anim.private_message_launcher);
ivthisweek.startanimation(thisweekanimation);
8.最后一个引导页 就两个动画 图片的放大跟缩小,其实用xml布局的话一个动画就能搞定,跟私信页面的动画差不多.小伙伴写的代码.这里换了一种方式.代码比较多.
* 最后一个
* @author apple
public class stereoscopiclauncherfragment extends launcherbasefragment implements onclicklistener{
private static final float zoom_max = 1.3f;
private static final float zoom_min = 1.0f;
private imageview imgview_immediate_experience;
view rooview=inflater.inflate(r.layout.fragment_stereoscopic_launcher, null);
imgview_immediate_experience=(imageview) rooview.findviewbyid(r.id.imgview_immediate_experience);
imgview_immediate_experience.setonclicklistener(this);
public void playheartbeatanimation(){
/**
* 放大动画
*/
animationset animationset = new animationset(true);
animationset.addanimation(new scaleanimation(zoom_min, zoom_max, zoom_min, zoom_max, animation.relative_to_self, 0.5f, animation.relative_to_self,0.5f));
animationset.addanimation(new alphaanimation(1.0f, 0.8f));
animationset.setduration(500);
animationset.setinterpolator(new accelerateinterpolator());
animationset.setfillafter(true);
animationset.setanimationlistener(new animationlistener() {
public void onanimationstart(animation animation) {
public void onanimationrepeat(animation animation) {
/**
* 缩小动画
*/
animationset animationset = new animationset(true);
animationset.addanimation(new scaleanimation(zoom_max, zoom_min, zoom_max,zoom_min, animation.relative_to_self, 0.5f,animation.relative_to_self, 0.5f));
animationset.addanimation(new alphaanimation(0.8f, 1.0f));
animationset.setduration(600);
animationset.setinterpolator(new decelerateinterpolator());
animationset.setfillafter(false);
// 实现心跳的view
imgview_immediate_experience.startanimation(animationset);
// 实现心跳的view
imgview_immediate_experience.startanimation(animationset);
}
public void onclick(view v) {
// intent intent = new intent();
// intent.setclass(getactivity(),mainactivity.class);
// startactivity(intent);
// getactivity().finish();
public void startanimation() {
playheartbeatanimation();
public void stopanimation() {
最后总结:以上就是三个引导页的核心代码了,还有一些布局文件,动画效果的布局文件我就不一一贴出来的,大家可以去下载我的源码,在这个过程中碰到的几个大的问题说明一下.
1.viewpager切换的时候要结束上个fragment的动画 我是通过boolean变量去控制的
2.背景图片移动的效果 之前自己走了很多弯路,后面在网上找了一个demo拿过来用了.因为大家都有开源精神所以这里省了很多功夫
3.图片放大缩小以前居然不知道一个xml动画布局就能搞定.之前一直想办法用两个动画实现
源码：http://download.csdn.net/detail/lowprofile_coding/9056143