1st Android初体验

1.目的

• 本文章主要介绍初步使用Andro Studio创建工程，以及实现ImageView的平移，旋转等简单动画

2.技术

1.将图片加入工程
2.ImageView的添加和参数设置
3.通过ObjectAnimator动画改变ImageView位置
4.使用RotationAnimate进行旋转动画

3.技术实现

• 话不多说直接上图片 代码

• 打开Android Studio,点击start，创建一个Basic Activity

  
  
  2.png
  
  

  -将准备好的图片素材拖入此目录

  
  
  3.png

• 此出约束改为 RelativeLayout

  
  
  4.png

• 添加imageView

<ImageView
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:src="@mipmap/a"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:onClick="imgClicked"
        />

• 如上将所有图片的参数设置好，由于层的原因将最外层的图片（即a图片最后创建）
• 在MainActivity 中添加数组，Array 和 boolean

private int[] resID = {R.id.b, R.id.c, R.id.d, R.id.e, R.id.f, R.id.g};
    private List<ImageView> imageViews = new ArrayList<>();
    private boolean isOpen = false;

• 用id数组取出每个imageView存入Array

for (int i = 0; i < resID.length; i++) {
            int id = resID[i];
            ImageView iv = findViewById(id);
            imageViews.add(iv);
        }

• 最后根据点击事件添加动画
  1.改变坐标

ImageView iv = imageViews.get(i * 3 + j);
                ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationY", 0f, k * 150f);
                ObjectAnimator oax = ObjectAnimator.ofFloat(iv, "translationX", 0f, j * 150f);
                oa.setDuration(2000);
                oax.setDuration(2000);
                oa.start();
                oax.start();

2.添加旋转动画

RotateAnimation ra = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                ra.setDuration(2000);
                iv.startAnimation(ra);

• 总

public void imgClicked(View view) {
        if (isOpen == true) {
            //打开状态
            close();
        } else {
            //关闭
            open();
        }
        isOpen = !isOpen;

    }


    private void open() {
        for (int i = 0; i < 2; i++) {
            for (int j = 0; j < 3; j++) {

                int k = 3 - j;
                if (i == 0) {
                    k = -k;
                }
                ImageView iv = imageViews.get(i * 3 + j);
                ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationY", 0f, k * 150f);
                ObjectAnimator oax = ObjectAnimator.ofFloat(iv, "translationX", 0f, j * 150f);
                oa.setDuration(2000);
                oax.setDuration(2000);
                oa.start();
                oax.start();

                RotateAnimation ra = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                ra.setDuration(2000);
                iv.startAnimation(ra);


            }
        }
    }

    private void close() {
//        for (int i = 0;i<resID.length;i++){
//            ImageView iv = imageViews.get(i);
//            ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",(i+1)*180f,0f);
//            oa.setDuration(1000);
//            oa.start();
//        }

        for (int i = 0; i < 2; i++) {
            for (int j = 0; j < 3; j++) {

                int k = 3 - j;
                if (i == 0) {
                    k = -k;
                }
                ImageView iv = imageViews.get(i * 3 + j);
                ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationY", k * 150f, 0f);
                ObjectAnimator oax = ObjectAnimator.ofFloat(iv, "translationX", j * 150f, 0f);

                oa.setDuration(1000);
                oax.setDuration(1000);
                //oa.setInterpolator(new BounceInterpolator());
                oa.start();
                oax.start();
            }

        }

    }
}

4.实现效果

效果.gif