在app第一次打开时使用anroid-flip来制作过渡界面

最近做的一个app，类似于iOS系统自带的备忘录，功能虽然十分简单，但是值得一提的是里面有很多的动画效果，使用了Material Design和其他几个工具库。这次讲的是利用其中一个库来制作界面过渡动画，使用android-flip能制作出一个类似翻书的效果

---

直接上代码吧，代码里有详细的注释
首先做一个过渡界面的布局
welcome_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <RelativeLayout
        android:id="@+id/root_welcome"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/welcome_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:layout_centerInParent="true"/>

        <Button
            android:id="@+id/welcome_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@drawable/up"
            android:layout_marginBottom="10dp"
            android:clickable="true" />
    </RelativeLayout>

</LinearLayout>

再需要一个自定义view
FlipView.java

这里写代码片

public class FlipView extends LinearLayout {

private RelativeLayout root;
private ImageView ivImage;
private Button btn;

//构造函数，传入rootId、imageId以便后面能动态改变其背景
public FlipView(Context context,int rootId,int imageId) {
    super(context);

    LayoutInflater.from(getContext()).inflate(R.layout.welcome_item, this);

    root=(RelativeLayout) findViewById(R.id.root_welcome);
    ivImage=(ImageView) findViewById(R.id.welcome_image);
    btn=(Button) findViewById(R.id.welcome_button);

    setButtonBackground(context);
    setRootBackground(rootId);
    setImageBackground(imageId);
}


//该方法设置过渡界面中的按钮属性
public void setButtonBackground(Context context){
    btn.setBackgroundResource(R.drawable.up);
    //添加动画效果，一个动态向上移动的箭头，引导用户向上滑动
    btn.startAnimation(AnimationUtils.loadAnimation(context, R.anim.welcome_button));
}

//该方法设置整个过渡界面的属性，即RelativeLayout的相关属性
public void setRootBackground(final int id){
    //给根布局设置背景
    root.setBackgroundResource(id);

    //如果过渡界面到了最后一个页面，便改变引导按钮的属性
    if(id==R.drawable.widget_4x_yellow){

        //过渡界面到了最后一个页面，停止按钮动画
        btn.clearAnimation();
        //改变按钮背景
        btn.setBackgroundResource(R.drawable.home);
        //设置监听器，只有到了最后一个界面该按钮被点击才能被响应
        btn.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {
                //当按钮被点击时，给按钮添加一个新的动画
                Animation animation=AnimationUtils.loadAnimation(getContext(), R.anim.welcome_home);
                btn.startAnimation(animation);
                //设置动画监听器，在动画完成之后再执行跳转页面
                animation.setAnimationListener(new AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation arg0) {
                    }
                    @Override
                    public void onAnimationRepeat(Animation arg0) {
                    }
                    @Override
                    public void onAnimationEnd(Animation arg0) {
                        getContext().startActivity(new Intent(getContext(),AtyList.class));
                        ((Activity)getContext()).finish();
                    }
                });
            }
        });
    }
}

//设置图片背景
public void setImageBackground(int id){
    ivImage.setBackgroundResource(id);
}

public RelativeLayout getRoot() {
    return root;
}
public void setRoot(RelativeLayout root) {
    this.root = root;
}
public ImageView getIvImage() {
    return ivImage;
}
public void setIvImage(ImageView ivImage) {
    this.ivImage = ivImage;
}
public Button getBtn() {
    return btn;
}
public void setBtn(Button btn) {
    this.btn = btn;
}

}

在Activity中定义adapter，并动态绑定各种资源
AtyWelcome.java

public class AtyWelcome extends AtyBase {

    private FlipViewController flipView;

    //过渡界面中的几张图片
    private int[] imageArray={
            R.drawable.ic_1,
            R.drawable.ic_2,
            R.drawable.ic_3,
            R.drawable.ic_4,
            R.drawable.ic_5};

    //过渡界面中的根布局的背景
    private int[] rootArray={
            R.drawable.widget_4x_blue,
            R.drawable.widget_4x_green,
            R.drawable.widget_4x_red,
            R.drawable.widget_4x_white,
            R.drawable.widget_4x_yellow
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        SharedPreferences pref=this.getSharedPreferences("app_is_opened",MODE_PRIVATE);

        //用一个SharedPreferences来判断是否是第一次打开,如果是则播放过渡界面，并记入相应标志
        if(pref.getString("first_open", null)==null){
            SharedPreferences.Editor mEditor=pref.edit();
            mEditor.putString("first_open", "yes");
            mEditor.commit();

            //初始化flipview
            flipView = new FlipViewController(this);
            //该方法能减少峰值的内存使用，但是根据不同的情况来使用
            flipView.setAnimationBitmapFormat(Bitmap.Config.RGB_565);
            //设置适配器
            flipView.setAdapter(new TransitionAdapter());
            //绑定资源
            setContentView(flipView);
        }else{
            //如果不是第一次打开，进入到主界面
            openActivity(AtyList.class);
            this.finish();
        }
    }


    class TransitionAdapter extends BaseAdapter{

        public TransitionAdapter() {
        }

        @Override
        public int getCount() {
            return imageArray.length;
        }

        @Override
        public Object getItem(int position) {
            return position;
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            FlipView view=null;
            if (convertView == null) {
                final Context context = parent.getContext();
                view = new FlipView(context,rootArray[position],imageArray[position]);

            } else {
                view = (FlipView) convertView;
                view.setButtonBackground(AtyWelcome.this);
                view.setRootBackground(rootArray[position]);
                view.setImageBackground(imageArray[position]);
            }

            return view;
        }
    }


    @Override
    protected void onResume() {
        super.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
    }
}

基本上这样就能制作出翻书效果的动画了，不知道怎么做gif图，但是效果如下

我的app的静态图是这样的