先看效果圖:
轉自：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