Andoird ValueAnimator 实现动画

最新推荐文章于 2022-04-14 22:49:12 发布

JoryShen

最新推荐文章于 2022-04-14 22:49:12 发布

阅读量534

点赞数

分类专栏： Android 文章标签：动画 android ValueAnimator

本文链接：https://blog.csdn.net/Silver__Lining/article/details/44281971

版权

Android 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

自定义一个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在不断变化，度数也在变化，实现动画