Andoird ValueAnimator 实现动画

来源：互联网发布：如何破解无壳网络验证编辑：程序博客网时间：2024/05/22 07:03

一直觉得新浪微博的那个动画还不错

自定义一个View，就是下面的红十字——RotateButton，这个很简单啦

重写View的onDraw()方法

    @Override    protected void onDraw(Canvas canvas) {        // TODO Auto-generated method stub        super.onDraw(canvas);/*float x=5;float y=5;*/        int x=getWidth();        int y=getHeight();        paint.setAntiAlias(true);        paint.setColor(Color.RED);        paint.setStrokeWidth(5);        canvas.drawLine(0, y/2, x, y/2, paint);        canvas.drawLine(x/2, 0, x/2, y, paint);

点击红色十字，跳转到第二个Fragment，所以第一个Fragment很简单，就是实现RotateButton的点击，跳转

    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        // TODO Auto-generated method stub        View view=inflater.inflate(R.layout.layout_main_fragment, null);        bt=(RotateButton) view.findViewById(R.id.rotate_bt);        bt.setOnClickListener(new OnClickListener()        {            @Override            public void onClick(View arg0) {                // TODO Auto-generated method stub                Log.e("sjj", "onclick");                //getActivity().getFragmentManager().beginTransaction().replace(R.id.main_content, new SecondFragment()).commit();                Intent it=new Intent(getActivity(),SecondActivity.class);                startActivity(it);            }        });        return view;    }

第二个Fragment和第一个布局上很相似，两个红十字是重合的，但是第二个Fragment的红十字有个旋转的动画效果，所以视觉上是第一个Fragment的红十字直接旋转了，其实是两个Fragment

public class SecondFragment extends Fragment {    RotateButton rb;    boolean firstClick=true;    RelativeLayout rl3,rl2;    ImageButton bt1;    @Override    public void onCreate(Bundle savedInstanceState) {        // TODO Auto-generated method stub        super.onCreate(savedInstanceState);    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        // TODO Auto-generated method stub        View view=inflater.inflate(R.layout.layout_second_fragment, null);        rb=(RotateButton) view.findViewById(R.id.rotate_bt);        rl3=(RelativeLayout) view.findViewById(R.id.relativeLayout3);        rl2=(RelativeLayout) view.findViewById(R.id.relativeLayout2);        rotate(45);        showButton();        rb.setOnClickListener(new OnClickListener()        {            @Override            public void onClick(View arg0) {                // TODO Auto-generated method stub                getActivity().finish();/*if(firstClick){rotate(45);}else{}firstClick=!firstClick;*/            }        });        return view;    }    void rotate(int degree)    {        ValueAnimator va=ValueAnimator.ofFloat(0.1f,1f).setDuration(500);        va.start();        final int mDegree;        mDegree=degree;        va.addUpdateListener(new AnimatorUpdateListener()        {            @Override            public void onAnimationUpdate(ValueAnimator arg0) {                // TODO Auto-generated method stub                arg0.setTarget(rb);                float val=(Float) arg0.getAnimatedValue();                rb.setRotation(mDegree*val);            }        });    }    void showButton()    {        ValueAnimator va=ValueAnimator.ofFloat(1f,0).setDuration(500);        va.start();        va.addUpdateListener(new AnimatorUpdateListener()        {            @Override            public void onAnimationUpdate(ValueAnimator arg0) {                // TODO Auto-generated method stub                arg0.setTarget(rl2);                float val=(Float) arg0.getAnimatedValue();                Log.e("sjj", "val"+val);                //rb.setRotation(mDegree*val);                rl2.setTranslationY(val*1000);                rl3.setTranslationY(val*1000);                //rl2.setRotationX(val*360);            }        });    }}

有两个动画，一个是红十字旋转45度，同时后面的4个Button从下移动到中间

ValueAnimator va=ValueAnimator.ofFloat(0.1f,1f).setDuration(500);

这段代码的意思是设置时间500毫秒，值从0.1变为100，然后要添加监听器AnimatorUpdateListener(）

float val=(Float) arg0.getAnimatedValue();这个val的值是什么呢？比如(1-0.1)/500=a这是单位时间的值，a*经过的时间=val，就是此时的值

rb.setRotation(mDegree*val);设置红十字旋转的度数，当然因为val在不断变化，度数也在变化，实现动画

0 0