楚楚街开场动画(有彩蛋)

来源：互联网发布：解忧杂货铺读后感知乎编辑：程序博客网时间：2024/04/29 08:20

效果图

主要解决思路：

一个activity 二个fragment

首先，开启一个欢迎页面，此为fragment1，等待数秒，进入fragment2，在进入fragment2后，fragment1的图片设置为鹿岛社区（模糊图片），当刀子的滑动符合标准，会先显示fragment2的布局背景图片，点击一下，布局背景图片由不透明转变为透明，显示framgment1的背景图片（此时已经换为模糊的图片了），并且会弹出popWindow

主要代码：

StartActivity

package com.lean.myapplication.activity;

import android.content.Intent;

import android.os.Bundle;

import android.os.Handler;

import android.os.Message;

import android.support.v4.app.FragmentActivity;

import android.support.v4.app.FragmentManager;

import android.view.Gravity;

import android.view.MotionEvent;

import android.view.View;

import android.widget.FrameLayout;

import android.widget.ImageView;

import android.widget.PopupWindow;

import android.widget.RadioButton;

import android.widget.RadioGroup;

import com.lean.myapplication.R;

import com.lean.myapplication.application.ChuChuJieApplication;

import com.lean.myapplication.fragment.BuyFragment_start_second;

import com.lean.myapplication.fragment.Buyfragment_start_first;

import com.lean.myapplication.utils.ShareUtils;

import butterknife.InjectView;

/**

* <pre>

* Author : 天府萧炎恋熏儿（WangShuJie）

* Time : 2016/10/28 9:04

* Usage : StartActivity

* desc :

* other :

* </pre>

public class StartActivity extends FragmentActivity implements View.OnClickListener {

private FragmentManager manager;

/** (WangShuJie)增加代码 usage:需传递到MainActivity的性别信息*/

private String sex="";

private BuyFragment_start_second buyFragment_start_second;

private Handler handle = new Handler() {

@Override

public void handleMessage(Message msg) {

super.handleMessage(msg);

switch (msg.what) {

case 1:

buyFragment_start_second = new BuyFragment_start_second();

/** (WangShuJie)增加代码 usage:添加第二个fragment*/

manager.beginTransaction().add(R.id.activity_start_framlayout, buyFragment_start_second).commit();

/** (WangShuJie)增加代码 usage:跳转到第二个fragment的同时，设置第一个fragment的背景图为模糊图，以便第二次显示的时候图片已经发生更改*/

mBuyfragment_start_first.getImg().setImageResource(R.mipmap.second_guide_social_blur);

break;

case 2:

/** (WangShuJie)增加代码 usage:弹出选择男女性别的popWindows*/

getWindowsex();

break;

case 3:

/** (WangShuJie)增加代码 usage:是否将触摸事件传递的判断*/

setIsPager2(true);

break;

case 4:

/** (WangShuJie)增加代码 usage：跳转到MainActivity*/

getChanges();

break;

}

};

private float mYdown;

private Buyfragment_start_first mBuyfragment_start_first;

private View mView;

private ImageView mIv_start_student;

private ImageView mIv_start_freaky;

private ImageView mIv_start_freejob;

private ImageView mIv_start_freshman;

private ImageView mIv_start_worker;

private RadioGroup mRg_start;

private View mViewsex;

private ImageView mIv_start_boysex;

private ImageView mIv_start_girlsex;

private RadioButton mRb1;

private RadioButton mRb2;

/** (WangShuJie)增加代码 usage:设置需不需要将触摸事件传递给fragment2,默认false=不需要

* （此类初始化的时候会判断是否是第一次登入

* 如果是第一次登陆设置为true=需要（因为测试需要，所以shardPreference中的start键一直是false））*/

private boolean isPager2 = false;

public void setIsPager2(boolean isPager2) {

this.isPager2 = isPager2;

}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_start);

manager = getSupportFragmentManager();

/** (WangShuJie)增加代码 usage:首先运行欢迎界面（即第一个fragment）*/

mBuyfragment_start_first = new Buyfragment_start_first();

manager.beginTransaction().replace(R.id.activity_start_framlayout, mBuyfragment_start_first).commit();

/** (WangShuJie)增加代码 usage:判断键（start）对应的值是否true，*/

if (ShareUtils.getBoolean(this, "start", true)) {

/** (WangShuJie)增加代码 usage:如果是的true话(会将触摸事件传递到fragemnt2，3秒后跳转fragment2*/

Message msg = Message.obtain();

msg.what = 1;

handle.sendMessageDelayed(msg, 3000);

initView();

initListen();

}else{

/** (WangShuJie)增加代码 usage:如果不是true的话，3秒后跳转页面*/

Message msg = Message.obtain();

msg.what = 4;

handle.sendMessageDelayed(msg, 3000);

}

@Override

public boolean onTouchEvent(MotionEvent event) {

if (isPager2) {

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

mYdown = event.getY();

buyFragment_start_second.getTouchdown();

break;

case MotionEvent.ACTION_UP:

buyFragment_start_second.getTouchup();

break;

case MotionEvent.ACTION_MOVE:

float distanceY = event.getY() - mYdown;

buyFragment_start_second.getTouchmove(distanceY);

break;

}

return super.onTouchEvent(event);

}

public Handler getHandle() {

return handle;

}

public void getPopWidow() {

PopupWindow pw = new PopupWindow(mView, ChuChuJieApplication.screenWidth, ChuChuJieApplication.screenHight * 2 / 3);

pw.setFocusable(true);

pw.setTouchable(true);

pw.setOutsideTouchable(false);

pw.showAtLocation(new View(this), Gravity.CENTER, 0, 0);

}

public void getWindowsex() {

PopupWindow pwsex = new PopupWindow(mViewsex, ChuChuJieApplication.screenWidth, ChuChuJieApplication.screenHight / 2);

pwsex.setFocusable(true);

pwsex.setTouchable(true);

pwsex.setOutsideTouchable(false);

pwsex.showAtLocation(new View(this), Gravity.CENTER, 0, 0);

}

private void initView() {

mView = View.inflate(this, R.layout.start_second_pw, null);

mViewsex = View.inflate(this, R.layout.start_second_pwsex, null);

mIv_start_student = (ImageView) mView.findViewById(R.id.iv_start_student);

mIv_start_freaky = (ImageView) mView.findViewById(R.id.iv_start_freaky);

mIv_start_freejob = (ImageView) mView.findViewById(R.id.iv_start_freejob);

mIv_start_freshman = (ImageView) mView.findViewById(R.id.iv_start_freshman);

mIv_start_worker = (ImageView) mView.findViewById(R.id.iv_start_worker);

mRg_start = (RadioGroup) mView.findViewById(R.id.rg_start);

mIv_start_boysex = (ImageView) mViewsex.findViewById(R.id.iv_start_boysex);

mIv_start_girlsex = (ImageView) mViewsex.findViewById(R.id.iv_start_girlsex);

}

private void initListen() {

//对popwindow中的控件设置监听

mIv_start_freaky.setOnClickListener(this);

mIv_start_freejob.setOnClickListener(this);

mIv_start_freshman.setOnClickListener(this);

mIv_start_worker.setOnClickListener(this);

mIv_start_student.setOnClickListener(this);

mIv_start_girlsex.setOnClickListener(this);

mIv_start_boysex.setOnClickListener(this);

//对group进行监听

mRg_start.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

@Override

public void onCheckedChanged(RadioGroup group, int checkedId) {

switch (checkedId) {

case R.id.rb1:

mIv_start_freejob.setVisibility(View.VISIBLE);

mIv_start_freaky.setVisibility(View.GONE);

break;

case R.id.rb2:

mIv_start_freejob.setVisibility(View.GONE);

mIv_start_freaky.setVisibility(View.VISIBLE);

break;

}

});

}

@Override

public void onClick(View v) {

switch (v.getId()) {

case R.id.iv_start_freaky:

getChanges();

break;

case R.id.iv_start_freejob:

getChanges();

break;

case R.id.iv_start_freshman:

getChanges();

break;

case R.id.iv_start_worker:

getChanges();

break;

case R.id.iv_start_student:

getChanges();

break;

case R.id.iv_start_boysex:

sex="boy";

getPopWidow();

mRb1 = (RadioButton) mRg_start.getChildAt(0);

mRg_start.check(mRb1.getId());

break;

case R.id.iv_start_girlsex:

sex="girl";

getPopWidow();

mRb2 = (RadioButton) mRg_start.getChildAt(1);

mRg_start.check(mRb2.getId());

mIv_start_freejob.setVisibility(View.GONE);

mIv_start_freaky.setVisibility(View.VISIBLE);

break;

}

/** (WangShuJie)增加代码 usage:进行跳转操作,跳转到MainActivity页面(正常的话这个动画只运行一次，填写（"false"）,为了测试用，改为("false"))*/

private void getChanges() {

ShareUtils.saveBoolean(this, "start", true);

Intent intent=new Intent(this, MainActivity.class);

intent.putExtra("sex",sex);

startActivity(intent);

finish();

}

Fragment1

package com.lean.myapplication.fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.ImageView;

import android.widget.RelativeLayout;

import com.lean.myapplication.R;

import butterknife.ButterKnife;

import butterknife.InjectView;

/**

 * <pre>

 *    Author :  天府萧炎恋熏儿（WangShuJie）

 *    Time   :  2016/10/28 9:04

 *    Usage  :  fragment1

 *    desc   :

 *    other  :

 * </pre>

*/

public class Buyfragment_start_first extends BaseFragment {

    @InjectView(R.id.activity_start_iv)

    ImageView mActivityStartIv;

    @InjectView(R.id.activity_start_relayout1)

    RelativeLayout mActivityStartRelayout1;

    @InjectView(R.id.activity_start_ivback)

    ImageView mActivityStartIvback;

    private View mView;

    @Override

    public View loadXml(LayoutInflater inflater) {

        mView = inflater.inflate(R.layout.activity_start_first, null);

        ButterKnife.inject(this, mView);

        return mView;

}

    @Override

    protected void initView(View view) {

}

    @Override

    protected void initData() {

}

    @Override

    public void onResume() {

        super.onResume();

}

    @Override

    public void onStop() {

        super.onStop();

}

    @Override

    public void onDestroyView() {

        super.onDestroyView();

        ButterKnife.reset(this);

}

    public ImageView getImg() {

        mActivityStartIv.setVisibility(View.INVISIBLE);

        return mActivityStartIvback;

}

}

}

fragment2

package com.lean.myapplication.fragment;

import android.animation.Animator;

import android.animation.ObjectAnimator;

import android.animation.ValueAnimator;

import android.os.Bundle;

import android.os.Message;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.ImageView;

import android.widget.RelativeLayout;

import com.lean.myapplication.R;

import com.lean.myapplication.activity.StartActivity;

import com.lean.myapplication.application.ChuChuJieApplication;

import com.lean.myapplication.utils.MyLogger;

import butterknife.ButterKnife;

import butterknife.InjectView;

/**

 * <pre>

 *    Author :  天府萧炎恋熏儿（WangShuJie）

 *    Time   :  2016/10/28 9:04

 *    Usage  :  fragment2

 *    desc   :

 *    other  :

 * </pre>

*/

public class BuyFragment_start_second extends BaseFragment {

    @InjectView(R.id.activity_startsecond_ivleft)

    ImageView mActivityStartsecondIvleft;

    @InjectView(R.id.activity_startsecond_ivright)

    ImageView mActivityStartsecondIvright;

    @InjectView(R.id.activity_startsecond_hand)

    ImageView mActivityStartsecondhand;

    @InjectView(R.id.activity_startsecond_knife)

    ImageView mActivityStartsecondKnife;

    @InjectView(R.id.activity_startsecond)

    RelativeLayout mActivityStartsecond;

    private MyLogger log = MyLogger.tfLog();

    private Animation mMAni;

    /** (WangShuJie)增加代码 usage:手指在屏幕上滑动的距离*/

    private float mGetPosition;

    /** (WangShuJie)增加代码 usage:设置大门是否被打开过，默认true=没有被打开过*/

    private boolean isStart = true;

    /** (WangShuJie)增加代码 usage:获取到StartActivity的实例*/

    private StartActivity mActivity;

    @Override

    public View loadXml(LayoutInflater inflater) {

        /** (WangShuJie)增加代码 usage:初始化布局*/

        View rootView = inflater.inflate(R.layout.activity_start_second, null);

        ButterKnife.inject(this, rootView);

        return rootView;

}

    @Override

    protected void initView(View view) {

        /** (WangShuJie)增加代码 usage:给手指（下滑有惊喜）添加动画，主要有透明效果和平移效果*/

        mMAni = AnimationUtils.loadAnimation(getActivity(), R.anim.activity_start_secondhand);

        /** (WangShuJie)增加代码 usage:将动画添加到image控件上*/

        mActivityStartsecondhand.startAnimation(mMAni);

}

    @Override

    protected void initData() {

}

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        // TODO: inflate a fragment view

        View rootView = super.onCreateView(inflater, container, savedInstanceState);

        ButterKnife.inject(this, rootView);

        return rootView;

}

    @Override

    public void onDestroyView() {

        super.onDestroyView();

        ButterKnife.reset(this);

}

/**

     * 手指落下调用的方法

**/

    public void getTouchdown() {

        log.i("getTouchdown");

        /** (WangShuJie)增加代码 usage:每次手指按下的时候，初始化手指在屏幕上滑动的距离为0*/

        mGetPosition = 0;

        /** (WangShuJie)增加代码 usage:给手指（下滑有惊喜）去除动画，并设置为不可见*/

        mActivityStartsecondhand.clearAnimation();

        mActivityStartsecondhand.setVisibility(View.INVISIBLE);

        /** (WangShuJie)增加代码 usage:判断isStart，主要是为了解决当符合滑动条件的时候，（滑动的距离大于等于屏幕高度的1/3），此时大门已经打开,便会运行里面的方法*/

        if (!isStart) {

            /** (WangShuJie)增加代码 usage:给当前页面设置动画（其实是此页面的背景图片），由不透明变为透明*/

            ObjectAnimator.ofFloat(mActivityStartsecond, "alpha", 1f,0f).setDuration(1500).start();

            mActivity.setIsPager2(false);

            /** (WangShuJie)增加代码 usage:通知StartActivity，运行里面的what=2（主要是弹出选择男女性别的popwindows）,*/

            Message msg=Message.obtain();

            msg.what=2;

            mActivity.getHandle().sendMessageDelayed(msg,1300);

//

//            /** (WangShuJie)增加代码 usage:给刀去除动画，并设置为不可见*/

//            mActivityStartsecondKnife.clearAnimation();

//            mActivityStartsecondKnife.setVisibility(View.INVISIBLE);

}

}

/**

     * 手指抬起调用的方法

**/

    public void getTouchup() {

        /** (WangShuJie)增加代码 usage:判断下滑动距离是否大于屏幕高度的1/3而且大门没有被打开过*/

        if (mGetPosition >= ChuChuJieApplication.screenHight / 3 && isStart) {

            /** (WangShuJie)增加代码 usage:大门被打开过了，所有设置isStart=false*/

            isStart = false;

            /** (WangShuJie)增加代码 usage:设置刀的自动向下平移动画*/

            Animator tranY = ObjectAnimator.ofFloat(mActivityStartsecondKnife, "translationY", ChuChuJieApplication.screenHight);

            tranY.start();

            /** (WangShuJie)增加代码 usage:开启大门打开的动画*/

            getAni();

//

//            Message obtain = Message.obtain();

//            obtain.what=3;

//            mActivity.getHandle().sendMessageDelayed(obtain,2000);

            /** (WangShuJie)增加代码 usage:取消手指的显示*/

            mActivityStartsecondhand.clearAnimation();

            mActivityStartsecondhand.setVisibility(View.INVISIBLE);

}

        /** (WangShuJie)增加代码 usage:如果大门没被打开运行此方法，若大门被打开，则不运行*/

        if (isStart) {

            /** (WangShuJie)增加代码 usage：设置手指可见，并开启动画*/

            mActivityStartsecondhand.setVisibility(View.VISIBLE);

            mActivityStartsecondhand.startAnimation(mMAni);

            /** (WangShuJie)增加代码 usage:设置刀初始化到原始状态，并添加了动画效果*/

            Animator tranY = ObjectAnimator.ofFloat(mActivityStartsecondKnife, "translationY", 0);

            tranY.setDuration(500);

            tranY.start();

}

}

    /** (WangShuJie)增加代码 usage:手指移动调用的方法*/

    public void getTouchmove(float distanceY) {

        log.i("==========天府萧炎恋熏儿==========手指移动的距离="+distanceY);

        /** (WangShuJie)增加代码 usage:手指向下移动的距离*/

        if (distanceY > 0) {

            Animator tranY = ObjectAnimator.ofFloat(mActivityStartsecondKnife, "translationY", mGetPosition, distanceY);

            tranY.start();

        /** (WangShuJie)增加代码 usage:手指向上移动的距离（是负值）*/

        } else if(distanceY<0){

            Animator tranY = ObjectAnimator.ofFloat(mActivityStartsecondKnife, "translationY", mGetPosition, distanceY);

            tranY.start();

}

        mGetPosition = distanceY;

}

    /** (WangShuJie)增加代码 usage:打开大门的动画设置*/

    public void getAni() {

//        Animation animation = AnimationUtils.loadAnimation(getActivity(), R.anim.activity_start_secondleft);

//        mActivityStartsecondIvleft.startAnimation(animation);

//        mActivityStartsecondIvleft.setRotationY(100);

        ObjectAnimator customleft = ObjectAnimator.ofFloat(mActivityStartsecondIvleft, "rotateY", 0, 90);

        customleft.setDuration(2000);

        customleft.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override

            public void onAnimationUpdate(ValueAnimator animation) {

//                mActivityStartsecondIvleft.setScaleX((Float) animation.getAnimatedValue() / 10);

//                mActivityStartsecondIvleft.setScaleY((Float) animation.getAnimatedValue());

//                        iv.setTranslationZ((Float) animation.getAnimatedValue());

                mActivityStartsecondIvleft.setRotationY((Float) animation.getAnimatedValue());

}

});

        customleft.start();

        ObjectAnimator customright = ObjectAnimator.ofFloat(mActivityStartsecondIvright, "rotateY", 0, -90);

        customright.setDuration(2000);

        customright.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override

            public void onAnimationUpdate(ValueAnimator animation) {

//                mActivityStartsecondIvleft.setScaleX((Float) animation.getAnimatedValue() / 10);

//                mActivityStartsecondIvleft.setScaleY((Float) animation.getAnimatedValue());

//                        iv.setTranslationZ((Float) animation.getAnimatedValue());

                mActivityStartsecondIvright.setRotationY((Float) animation.getAnimatedValue());

}

});

        customright.start();

        /** (WangShuJie)增加代码 usage:大门关闭后，实际上显示的是第二个fragment背景图片（不要被表面迷惑了）*/

}

    @Override

    public void onStart() {

        super.onStart();

        mActivity = (StartActivity) getActivity();

        mActivity.setIsPager2(true);

}

}

此处为源码

1 0