android基础 [动画(帧动画(Frame),补间动画(Tween),属性动画(Property))]

发布于:2023-02-11 ⋅ 阅读:(596) ⋅ 点赞:(0)

目录

1.帧动画

2.补间动画

​编辑

2.1.1透明度渐变动画

2.1.2缩放渐变动画

2.1.3位移渐变动画

2.1.4旋转渐变动画

2.1.5组合渐变动画

2.2activity进场动画

3.属性动画

3.1移动动画

3.2缩放动画

3.3旋转的同时透明度变化

3.4圆形旋转


1.帧动画

图片资源放入 mipmap 文件夹下

帧动画的资源文件,放在drawable文件夹下,在drawable文件夹引用drawable文件夹下的图片资源。

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@mipmap/b0" android:duration="100"/>
    <item android:drawable="@mipmap/b1" android:duration="100"/>
    <item android:drawable="@mipmap/b2" android:duration="100"/>
    <item android:drawable="@mipmap/b3" android:duration="100"/>
    <item android:drawable="@mipmap/b4" android:duration="100"/>
    <item android:drawable="@mipmap/b5" android:duration="100"/>
    <item android:drawable="@mipmap/b6" android:duration="100"/>

</animation-list>

在布局页面,添加<Imageview> 并设置其background  

<ImageView
        android:id="@+id/img_snow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/snow_animation"/>

在java文件中,获取imageview,并对其background进行动画设置

public class MainActivity extends AppCompatActivity {

    private ImageView img_snow;
    private AnimationDrawable animationDrawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        img_snow=findViewById(R.id.img_snow);


        animationDrawable=(AnimationDrawable) img_snow.getBackground();
        animationDrawable.start();


    }
}

 随着时代的发展,自带的动画满足不了用户需求,所以需要我们自己自定义布局。

首先创建一个普通的Java文件继承AppCompatImageView并创建构造方法

public class FrameView extends androidx.appcompat.widget.AppCompatImageView {

    public FrameView(@NonNull Context context) {
        super(context);
    }


    public FrameView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public FrameView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

 然后编写图片的动画效果

public class FrameView extends androidx.appcompat.widget.AppCompatImageView {
    AnimationDrawable anim;

    public FrameView(@NonNull Context context) {
        super(context);
    }

    public FrameView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public FrameView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setAnim(AnimationDrawable anim) {
        this.anim = anim;
    }

    public void setLocation(int top, int left){
        setFrame(left, top, left+200, top+200);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        try {
            Field field = AnimationDrawable.class.getDeclaredField("mCurFrame");
            field.setAccessible(true);
            int curframe = field.getInt(anim);
            // 当执行到最后一帧时,隐藏起来
            if (curframe == anim.getNumberOfFrames() - 1) {
                setVisibility(View.INVISIBLE);
            }

        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
        super.onDraw(canvas);
    }
}

 在Activity中实现动画效果

public class MainActivity extends AppCompatActivity {

    private AnimationDrawable anim;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 帧布局  自定义了一个帧布局
        FrameLayout fly = new FrameLayout(MainActivity.this);
        setContentView(fly);

        // 创建自定义控件
        FrameView fv = new FrameView(MainActivity.this);
        // 给控件设置背景
        fv.setBackgroundResource(R.drawable.img_zhuan);
        // 图片不可见
        fv.setVisibility(View.INVISIBLE);
        // 将背景图转为动画
        anim = (AnimationDrawable) fv.getBackground();
        // 将动画传递给fv,就是为了动画执行完毕后,图片隐藏起来
        fv.setAnim(anim);

        // 向布局当中添加控件
        fly.addView(fv);


        fly.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                    anim.stop();
                    float x = event.getX();
                    float y = event.getY();
                    fv.setLocation((int) y - 40, (int) x - 20);
                    fv.setVisibility(View.VISIBLE);
                    anim.start();
                }
                return false;
            }
        });


    }
}

2.补间动画

补间动画的资源文件,放在 anim文件夹下,首先创建anim文件夹。

然后在anim下创建资源文件

2.1.1透明度渐变动画

anim下的资源文件

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:duration="2000"/>

 Java代码:使用AnimationUtils加载动画效果,用图片容器启动动画。

public class MainActivity extends AppCompatActivity {

    private Button btn_alpha;
    private ImageView iv_trans;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        iv_trans=findViewById(R.id.iv_trans);
        btn_alpha=findViewById(R.id.btn_alpha);

        btn_alpha.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation animation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.anim_alpha);
                iv_trans.startAnimation(animation);
            }
        });

    }
}

2.1.2缩放渐变动画

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromXScale="0.0"
    android:toXScale="1.5"
    android:fromYScale="0.0"
    android:toYScale="1.5"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="10000"/>
public class MainActivity extends AppCompatActivity {

    private Button btn_scale;
    private ImageView iv_trans;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        iv_trans=findViewById(R.id.iv_trans);
        btn_scale=findViewById(R.id.btn_scale);

        btn_scale.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation animation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.anim_scale);
                iv_trans.startAnimation(animation);
            }
        });
    }

2.1.3位移渐变动画

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromXDelta="-1085"
    android:toXDelta="0"
    android:fromYDelta="0"
    android:toYDelta="0"
    android:duration="2000"/>
public class MainActivity extends AppCompatActivity {

    
    private Button btn_translate;
    private ImageView iv_trans;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        iv_trans=findViewById(R.id.iv_trans);
        btn_translate=findViewById(R.id.btn_translate);

        btn_translate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation animation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.anim_translate);
                iv_trans.startAnimation(animation);
            }
        });
    }

2.1.4旋转渐变动画

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:duration="2000"
    android:repeatCount="1"
    android:repeatMode="reverse"/>
public class MainActivity extends AppCompatActivity {

    private Button btn_rotate;
    private ImageView iv_trans;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        iv_trans=findViewById(R.id.iv_trans);
        btn_rotate=findViewById(R.id.btn_rotate);

        btn_rotate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation animation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.anim_translate);
                iv_trans.startAnimation(animation);
            }
        });
    }

2.1.5组合渐变动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:shareInterpolator="true">

    <scale
        android:fromXScale="0.0"
        android:toXScale="1.5"
        android:fromYScale="0.0"
        android:toYScale="1.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="10000"/>

    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:duration="20000"
        android:repeatCount="1"
        android:repeatMode="reverse"/>

</set>
public class MainActivity extends AppCompatActivity {

    private Button btn_set;
    private ImageView iv_trans;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        iv_trans=findViewById(R.id.iv_trans);
        btn_set=findViewById(R.id.btn_set);

        btn_set.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation animation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.anim_set);
                iv_trans.startAnimation(animation);
            }
        });
    }

2.2activity进场动画

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromXDelta="-1085"
    android:toXDelta="0"
    android:fromYDelta="0"
    android:toYDelta="0"
    android:duration="2000"/>
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromXDelta="0"
    android:toXDelta="1085"
    android:fromYDelta="0"
    android:toYDelta="0"
    android:duration="2000"/>
public class MainActivity extends AppCompatActivity {

    private Button btn_jump;
    private ImageView iv_trans;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        iv_trans=findViewById(R.id.iv_trans);
        btn_jump=findViewById(R.id.btn_jump);

        btn_jump.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(MainActivity.this, MainActivity2.class);
                startActivity(intent);
                overridePendingTransition(R.anim.anim_translate, R.anim.anim_translate1);
            }
        });

    }
}

3.属性动画

补间动画只是改变View的显示效果,不会去改变View的属性

使用补间动画实现左边的按钮移到右边,但是此时的按钮其实还停留在左边,假如你去点右面的按钮,是不会触发按钮的点击事件的。

属性动画通过对目标对象进行赋值来修改其属性,上面那个按钮问题就不存在了。

注:以下代码使用了butter Knife(黄油刀)butterKnife使用方法

3.1移动动画

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.btn_animtor1)
    Button btn_animtor1;
    @BindView(R.id.ly_root)
    LinearLayout ly_root;
    @BindView(R.id.iv_trans)
    ImageView iv_trans;

    private int width;
    private int height;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ButterKnife.bind(MainActivity4.this);

    }

    //移动动画
    @OnClick(R.id.btn_animtor1)
    public void btn_animtor1(){
        width = ly_root.getWidth();
        height = ly_root.getHeight();

        ValueAnimator valueAnimator=ValueAnimator.ofInt(height,0,height/4,height/2,height/4*3,height);
        valueAnimator.setDuration(2000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                int x = width / 2;
                int y = (int) valueAnimator.getAnimatedValue();

                moveView(iv_trans,x,y);
            }
        });
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.start();

    }

    public void moveView(View view, int x, int y){
        int left=x-view.getWidth()/2;
        int top=y-view.getHeight();
        int weight=left+view.getWidth();
        int height=top+view.getHeight();
        view.layout(left,top,weight,height);
    }
}

3.2缩放动画

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.btn_animtor)
    Button btn_animtor;
    @BindView(R.id.iv_trans)
    ImageView iv_trans;

    private int width;
    private int height;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ButterKnife.bind(MainActivity4.this);

    }


    //缩放动画
    @OnClick(R.id.btn_animtor)
    public void btn_animtor(){
//        第一种方式:
//        final float scale=0.5f;
//        AnimatorSet scaleSet=new AnimatorSet();
//
//        ValueAnimator valueAnimator1=ValueAnimator.ofFloat(1.5f,scale);
//        valueAnimator1.setDuration(2000);
//        valueAnimator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
//            @Override
//            public void onAnimationUpdate(ValueAnimator valueAnimator) {
//                float scale= (float) valueAnimator.getAnimatedValue();
//                iv_trans.setScaleX(scale);
//                iv_trans.setScaleY(scale);
//            }
//        });
//
//        ValueAnimator valueAnimator2=ValueAnimator.ofFloat(scale,1.5f);
//        valueAnimator2.setDuration(2000);
//        valueAnimator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
//            @Override
//            public void onAnimationUpdate(ValueAnimator valueAnimator) {
//                float scale= (float) valueAnimator.getAnimatedValue();
//                iv_trans.setScaleX(scale);
//                iv_trans.setScaleY(scale);
//            }
//        });
//
//        scaleSet.play(valueAnimator1).after(valueAnimator2);
//        scaleSet.start();

//      第二种方式
        ValueAnimator valueAnimator=ValueAnimator.ofFloat(1.5f,0.5f,1.5f,0.5f);
        valueAnimator.setDuration(4000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float scale = (float) valueAnimator.getAnimatedValue();
                iv_trans.setScaleX(scale);
                iv_trans.setScaleY(scale);
            }
        });
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.start();

    }

    
}

3.3旋转的同时透明度变化

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.btn_animtor)
    Button btn_animtor;
    ImageView iv_trans;

    private int width;
    private int height;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ButterKnife.bind(MainActivity4.this);

    }

    //旋转的同时透明度变化
    @OnClick(R.id.btn_animtor)
    public void btn_animtor(){

        ValueAnimator valueAnimator=ValueAnimator.ofInt(0,360);
        valueAnimator.setDuration(4000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                int rotateValue = (int) valueAnimator.getAnimatedValue();
                iv_trans.setRotation(rotateValue);
                float fractionValue = valueAnimator.getAnimatedFraction();
                iv_trans.setAlpha(fractionValue);
            }
        });
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.start();

    }
}

3.4圆形旋转

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.btn_animtor)
    Button btn_animtor;
    @BindView(R.id.ly_root)
    LinearLayout ly_root;
    @BindView(R.id.iv_trans)
    ImageView iv_trans;

    private int width;
    private int height;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ButterKnife.bind(MainActivity4.this);

    }

    

    //圆形旋转
    @OnClick(R.id.btn_animtor)
    public void btn_animtor(){

        width = ly_root.getWidth();
        height = ly_root.getHeight();
        final int R=width/4;

        ValueAnimator valueAnimator=ValueAnimator.ofFloat(0,(float) (2.0f * Math.PI));
        valueAnimator.setDuration(2000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                // 圆的参数方程 x = R * sin(t) y = R * cos(t)
                float t = (float) valueAnimator.getAnimatedValue();
                int x=(int) (R * Math.sin(t)+width/2);
                int y=(int) (R * Math.cos(t)+height/2);
                moveView(iv_trans,x,y);
            }
        });
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.start();

    }


    public void moveView(View view, int x, int y){
        int left=x-view.getWidth()/2;
        int top=y-view.getHeight();
        int weight=left+view.getWidth();
        int height=top+view.getHeight();
        view.layout(left,top,weight,height);
    }
}

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到