Android动画使用demo(补间动画,属性动画-ValueAnimator & ObjectAnimator)

点击不同按钮,可以实现控件的平移,缩放,旋转和透明度变化,从而实现各个控件的动画效果。
一、补间动画使用demo
1、BJAnimatorActivity

public class BJAnimatorActivity extends Activity implements View.OnClickListener {
    
    
    private Button mBtnScale;
    private Button mBtnTranstion;
    private Button mBtnRotate;
    private Button mBtnAlpha;
    private Button mBtnAniSet;
    private ImageView mImg;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bj_animator);
        initview();
    }

    private void initview() {
    
    
        mBtnTranstion = findViewById(R.id.bjTrans);
        mBtnScale = findViewById(R.id.bjScale);
        mBtnRotate = findViewById(R.id.bjRotate);
        mBtnAlpha = findViewById(R.id.bjAlpha);
        mBtnAniSet = findViewById(R.id.bjAniSet);
        mImg = findViewById(R.id.bjImg);

        mBtnTranstion.setOnClickListener(this);
        mBtnScale.setOnClickListener(this);
        mBtnRotate.setOnClickListener(this);
        mBtnAlpha.setOnClickListener(this);
        mBtnAniSet.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
    
    
        switch (v.getId()) {
    
    
            case R.id.bjTrans:
                /*animation = AnimationUtils.loadAnimation(this, R.anim.animator_translate);
                mImg.startAnimation(animation);*/
                TranslateAnimation translateAnimation = new TranslateAnimation(0, 200, 0, 200);
                translateAnimation.setDuration(1000L);
                //  动画执行完成后保持状态
                translateAnimation.setFillAfter(true);
                mImg.startAnimation(translateAnimation);
                break;
            case R.id.bjScale:
                ScaleAnimation scaleAnimation = new ScaleAnimation(1, 2, 1, 2, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                scaleAnimation.setDuration(2000L);
                mImg.startAnimation(scaleAnimation);
                break;
            case R.id.bjRotate:
                RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                rotateAnimation.setDuration(2000L);
                mImg.startAnimation(rotateAnimation);
                break;
            case R.id.bjAlpha:
                AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0.1f);
                alphaAnimation.setDuration(2000L);
                mImg.startAnimation(alphaAnimation);
                break;
            case R.id.bjAniSet:
                Animation animationSet = AnimationUtils.loadAnimation(this, R.anim.aset);
                //开始动画集
                animationSet.start();
                //取消动画集
                animationSet.cancel();
                //判断当前动画集是否开始
                animationSet.hasStarted();
                //判断当前动画集是否结束
                animationSet.hasEnded();
                //重新开始当前动画集
                animationSet.reset();

                mImg.startAnimation(animationSet);
            default:
                break;
        }
    }
}

2、activity_bj_animator.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/bjTrans"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="平移" />

    <Button
        android:id="@+id/bjScale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="缩放" />

    <Button
        android:id="@+id/bjRotate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="旋转" />

    <Button
        android:id="@+id/bjAlpha"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="透明" />

    <Button
        android:id="@+id/bjAniSet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="组合" />

    <ImageView
        android:id="@+id/bjImg"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:src="@drawable/pikachu" />

</LinearLayout>

3、aset.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fillAfter="true"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="200"
        android:toYDelta="0" />

    <scale
        android:duration="2000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="2"
        android:toYScale="2" />
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />

    <alpha
        android:duration="2000"
        android:fromAlpha="1"
        android:toAlpha="0.2" />
</set>

4、实现效果
在这里插入图片描述
二、属性动画-ValueAnimator 使用demo
1、AnimatorActivity

public class AnimatorActivity extends Activity implements View.OnClickListener {
    
    
    private Button mBtnTranslate;
    private Button mBtnScale;
    private Button mBtnRotate;
    private Button mBtnAlpha;
    private ImageView mImgs;
    private LinearLayout mLinear;
    private int width;
    private int height;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animator);
        initview();
    }

    private void initview() {
    
    
        mBtnTranslate = findViewById(R.id.translate);
        mBtnScale = findViewById(R.id.scales);
        mBtnRotate = findViewById(R.id.rotate);
        mBtnAlpha = findViewById(R.id.alpha);
        mImgs = findViewById(R.id.imgs);
        mLinear = findViewById(R.id.linearAnimator);

        mBtnTranslate.setOnClickListener(this);
        mBtnScale.setOnClickListener(this);
        mBtnRotate.setOnClickListener(this);
        mBtnAlpha.setOnClickListener(this);
        mImgs.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
    
    
        switch (v.getId()) {
    
    
            case R.id.translate:
                lineAnimator();
                break;
            case R.id.scales:
                scaleAnimator();
                break;
            case R.id.rotate:
                raAnimator();
                break;
            case R.id.alpha:
                cricleAnimator();
                break;
            default:
                break;
        }
    }

    //  定义一个修改ImageView位置的方法
    private void moveView(View view, int rawX, int rawY) {
    
    
        int left = rawX - mImgs.getWidth() / 2;
        int top = rawY - mImgs.getHeight();
        int width = left + view.getWidth();
        int height = top + view.getHeight();
        view.layout(left, top, width, height);
    }

    //  位移,按轨迹方程来运动
    private void lineAnimator() {
    
    
        width = mLinear.getWidth();
        height = mLinear.getHeight();
        ValueAnimator xValue = ValueAnimator.ofInt(height, 0, height / 4, height / 2, height / 4 * 3, height);
        xValue.setDuration(3000L);
        xValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    
    
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
    
    
                //  轨迹方程
                int x = width / 2;
                int y = (int) animation.getAnimatedValue();
                moveView(mImgs, x, y);
            }
        });
        xValue.setInterpolator(new LinearInterpolator());
        xValue.start();
    }

    //  缩放效果
    private void scaleAnimator() {
    
    
        ValueAnimator vValue = ValueAnimator.ofFloat(1.0f, 0.6f, 1.2f, 1.0f, 0.6f, 1.2f, 1.0f);
        vValue.setDuration(1000L);
        vValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    
    
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
    
    
                float scale = (float) animation.getAnimatedValue();
                mImgs.setScaleX(scale);
                mImgs.setScaleY(scale);
            }
        });
        vValue.setInterpolator(new LinearInterpolator());
        vValue.start();
    }

    //  旋转且透明度变化
    private void raAnimator() {
    
    
        ValueAnimator rValue = ValueAnimator.ofInt(0, 360);
        rValue.setDuration(1000L);
        rValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    
    
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
    
    
                int rotateValue = (int) animation.getAnimatedValue();
                mImgs.setRotation(rotateValue);
                float fractionValue = animation.getAnimatedFraction();
                mImgs.setAlpha(fractionValue);
            }
        });
        rValue.setInterpolator(new LinearInterpolator());
        rValue.start();
    }

    //  圆形旋转
    private void cricleAnimator() {
    
    
        width = mLinear.getWidth();
        height = mLinear.getHeight();
        int R = width / 4;
        ValueAnimator tValue = ValueAnimator.ofFloat(0, (float) (2.0f * Math.PI));
        tValue.setDuration(1000L);
        tValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    
    
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
    
    
                float t = (float) animation.getAnimatedValue();
                int x = (int) (R * Math.sin(t) + width / 2);
                int y = (int) (R * Math.cos(t) + height / 2);
                moveView(mImgs, x, y);
            }
        });
        tValue.setInterpolator(new LinearInterpolator());
        tValue.start();
    }
}

2、activity_animator.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearAnimator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/translate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位移" />

    <Button
        android:id="@+id/scales"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="缩放" />

    <Button
        android:id="@+id/rotate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="旋转且透明" />

    <Button
        android:id="@+id/alpha"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="圆形旋转" />

    <ImageView
        android:id="@+id/imgs"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:src="@drawable/pikachu" />
</LinearLayout>

3、实现效果
在这里插入图片描述
三、属性动画-ObjectAnimator 使用demo
1、ObjectAnimatorActivity

public class ObjectAnimatorActivity extends Activity implements View.OnClickListener {
    
    
    private Button mBtnScale;
    private Button mBtnTranstion;
    private Button mBtnRotate;
    private Button mBtnAlpha;
    private ImageView mObgImg;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_object_animator);
        initview();
    }

    private void initview() {
    
    
        mBtnTranstion = findViewById(R.id.objTrans);
        mBtnScale = findViewById(R.id.objScale);
        mBtnRotate = findViewById(R.id.objRotate);
        mBtnAlpha = findViewById(R.id.objAlpha);
        mObgImg = findViewById(R.id.objImg);

        mBtnTranstion.setOnClickListener(this);
        mBtnScale.setOnClickListener(this);
        mBtnRotate.setOnClickListener(this);
        mBtnAlpha.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
    
    
        switch (v.getId()) {
    
    
            case R.id.objTrans:
                transtionAnimator();
                break;
            case R.id.objScale:
                scaleAnomator();
                break;
            case R.id.objRotate:
                rotateAnimator();
                break;
            case R.id.objAlpha:
                alphaAnomator();
                break;
            default:
                break;
        }
    }

    //  平移
    private void transtionAnimator() {
    
    
        //  沿X轴平移,还有Y轴平移
        /*ObjectAnimator animator = ObjectAnimator.ofFloat(mObgImg, "translationX", 0, 100, 200, -100, -200, 0);
        animator.setDuration(1000L);
        animator.start();*/

        //  X,Y轴同时平移
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(
                ObjectAnimator.ofFloat(mObgImg, "translationX", 0, 100, 200, -100, -200, 0)
                        .setDuration(2000L),

                ObjectAnimator.ofFloat(mObgImg, "translationY", 0, 100, 200, -100, -200, 0)
                        .setDuration(2000L)
        );
        animatorSet.start();
    }

    //  缩放
    private void scaleAnomator() {
    
    
        //  沿X轴缩放,还有Y轴缩放
        /*ObjectAnimator animator = ObjectAnimator.ofFloat(mObgImg, "scaleX", 1f, 1.5f, 2f, 1.5f, 1f);
        animator.setDuration(1000L);
        animator.start();*/

        //  X,Y轴同时缩放
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(
                ObjectAnimator.ofFloat(mObgImg, "scaleX", 1f, 1.5f, 2f, 1.5f, 1f)
                        .setDuration(2000L),
                ObjectAnimator.ofFloat(mObgImg, "scaleY", 1f, 1.5f, 2f, 1.5f, 1f)
                        .setDuration(2000L)
        );
        animatorSet.start();
    }

    //  旋转
    private void rotateAnimator() {
    
    
        //  沿X轴旋转,还有Y轴旋转和Z轴旋转
        /*ObjectAnimator animator = ObjectAnimator.ofFloat(mObgImg, "rotationX", 0,360);
        animator.setDuration(2000L);
        animator.start();*/

        //  X,Y,Z轴同时缩放
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(
                ObjectAnimator.ofFloat(mObgImg, "rotationX", 0, 360)
                        .setDuration(2000L),
                ObjectAnimator.ofFloat(mObgImg, "rotationY", 0, 360)
                        .setDuration(2000L),
                ObjectAnimator.ofFloat(mObgImg, "rotation", 0, 360)
                        .setDuration(2000L)
        );
        animatorSet.start();
    }

    //  透明
    private void alphaAnomator() {
    
    

        ObjectAnimator animator = ObjectAnimator.ofFloat(mObgImg, "alpha", 0, 0.5f, 1.0f);
        animator.setDuration(2000L);
        animator.start();
    }
}

2、activity_object_animator.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/objTrans"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="平移" />

    <Button
        android:id="@+id/objScale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="缩放" />

    <Button
        android:id="@+id/objRotate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="旋转" />

    <Button
        android:id="@+id/objAlpha"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="透明" />

    <ImageView
        android:id="@+id/objImg"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:src="@drawable/pikachu" />

</LinearLayout>

3、实现效果
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44495678/article/details/117714444