仿格瓦拉验证码界面动画效果

最近在项目当中有一个滑动验证码动画效果要实现，刚开始看到这个效果感觉还是可以的，但是要实现起来觉得有点麻烦，我想大家一定都和我一样拿到这个需求一定是一顿谷歌，百度啥的，但是搜索了很久都没找到相似的效果，又催的急没办法，卷起袖子干吧，就开始自己造轮子的过程，在做这个需求的过程中，还是很有收获的比如说复习了下高中的函数知识，我想大家都和一样高中的数学知识应该都忘的差不多了吧，反正我是忘的差不多了，废话不多说了，直接上代码,里面使用到了的图片，大家可以自己搞一点图片进去试试

下图是我截取的一部分，效果就是这样

WX20171218-163655@2x.png WX20171218-163642@2x.png

import android.content.Context;
import android.support.annotation.AttrRes;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import com.nineoldandroids.view.ViewHelper;

public class MyFrameLayout extends FrameLayout {

    /**
     * 这里面所说的右边的距离，都是子view 距离父控件的距离，比例右边距离就是说是右边到父控件的距离
     */
    private float down_x;//按下点的距离
    private ImageView imageView_8;//大框中变化的框
    private ImageView imageView_7;//第一个框
    private ImageView imageView_6;//最左边的小框，以下是从左到右
    private ImageView imageView_5;//第二个小框

    private ImageView imageView_4;//第三个小框

    private ImageView imageView_3;//第四个小框

    private ImageView imageView_2;//第五个小框

    private ImageView imageView_1;//第六个小框

    private float frist_left;//大框的左边

    private float frist_right;//大框的右边

    private float eight_right;//最右边框的右边距离，也就是第有个小框的右边距离

    private float frist_center;//最大框的中心点

    private float position;//表示变化的周期，也是从0-1的变化的距离

    private float position_key;//表示大框中心点移动到这个点的时候开始变化

    private float position_7;//大框的中点的位置

    private int width;//这个view 的宽度

    private float three_right;//第六个小框的右边距离

    private float position_center;//两个小框中间距离一半

    protected boolean isFrist = true;//这里作用就是只能滑动一次

    private int[] arr = {R.drawable.test_1,R.drawable.test_2,R.drawable.test_3,R.drawable.test_4
            ,R.drawable.test_5,R.drawable.test_6,R.drawable.test_bg
                        };
    private float five_right;//第5个小框的右边距离
    private float six_right;//第六个小框的右边距离
    private float seven_right;//第7个小框的右边距离
    private float four_right;//第八个小框的右边距离

    private static int KEY = 0;

    public MyFrameLayout(@NonNull Context context) {
        super(context);
        init(context);
    }


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

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


    /**
     * 方便外部重置
     */
    public void reset(){
        isFrist = true;
        ViewHelper.setTranslationX(imageView_7, 0);
        ViewHelper.setTranslationX(imageView_8, 0);

    }
    /**
     * 从外面传进来一个图片数组
     * 这里里面也可以传递一个数字的数字
     * @param arr
     */
    public void inview(int[] arr) {
        this.arr = arr;
        imageView_1.setImageDrawable(this.getResources().getDrawable(R.drawable.test_1));
        imageView_2.setImageDrawable(this.getResources().getDrawable(R.drawable.test_2));
        imageView_3.setImageDrawable(this.getResources().getDrawable(R.drawable.test_3));
        imageView_4.setImageDrawable(this.getResources().getDrawable(R.drawable.test_4));
        imageView_5.setImageDrawable(this.getResources().getDrawable(R.drawable.test_5));
        imageView_6.setImageDrawable(this.getResources().getDrawable(R.drawable.test_6));
    }

    private void init(Context context) {

        View view = View.inflate(context, R.layout.my_framelayout, this);

        imageView_8 = (ImageView) view.findViewById(R.id.iv_8);
        imageView_7 = (ImageView) view.findViewById(R.id.iv_7);
        imageView_6 = (ImageView) view.findViewById(R.id.iv_6);
        imageView_5 = (ImageView) view.findViewById(R.id.iv_5);
        imageView_4 = (ImageView) view.findViewById(R.id.iv_4);
        imageView_3 = (ImageView) view.findViewById(R.id.iv_3);
        imageView_2 = (ImageView) view.findViewById(R.id.iv_2);
        imageView_1 = (ImageView) view.findViewById(R.id.iv_1);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (isFrist) {
                    down_x = event.getX();
                    if (down_x - frist_right >= 0 || down_x - frist_left <= 0) {//让其在这个大框的里面才能让其滑动
                        return false;
                    }
                } else {
                    return false;
                }
                break;
            case MotionEvent.ACTION_MOVE:
                float currentX = event.getX();
                if (currentX != down_x) {
                    setTranslation(currentX);
                }
                break;
            case MotionEvent.ACTION_UP:
                isFrist = false;
                lister.moveKey(KEY);//回调
                break;
        }
        return true;
    }


    /**
     * 随着手指的移动，一直会调用这个方法
     * @param transl
     */
    public void setTranslation(float transl) {

        //实时的获取大框的中心点的位置
        float move_position = transl - down_x + position_7;
        //只有大框的中心点位置到达指定的关键点才让其变化，这里就是大框只变化的小框
        float scX = move_position - position_key;
        if (scX >= 0) {
            changeDrawable(move_position,scX);
        }else {
            imageView_8.setImageDrawable(null);//其余的地方就用不设置图片
        }

        if (transl <= down_x || transl - down_x + position_7 >= width - frist_center) {//这个就是边界点的设置

        } else {
            ViewHelper.setTranslationX(imageView_7, transl - down_x);
            ViewHelper.setTranslationX(imageView_8, transl - down_x);
        }

    }

    /**
     * 转变image_7的图片背景
     */
    private void changeDrawable(float move_position,float scX){

        if (move_position <=three_right+position_center  && move_position >= 0) {//第一张图片的设置，以及变化的范围，下面也是相对应
            imageView_8.setImageDrawable(this.getResources().getDrawable(arr[5]));
            KEY = 1;
        } else if (move_position>three_right+position_center && move_position<=four_right+position_center){
            imageView_8.setImageDrawable(this.getResources().getDrawable(arr[4]));
            KEY = 2;
        }else if (move_position>four_right+position_center && move_position<=five_right+position_center){
            imageView_8.setImageDrawable(this.getResources().getDrawable(arr[3]));
            KEY = 3;
        }else if (move_position>five_right+position_center && move_position<=six_right+position_center){
            imageView_8.setImageDrawable(this.getResources().getDrawable(arr[2]));
            KEY = 4;
        }else if (move_position>six_right+position_center && move_position<=seven_right+position_center){
            imageView_8.setImageDrawable(this.getResources().getDrawable(arr[1]));
            KEY = 5;
        }else if (move_position>seven_right+position_center && move_position<=eight_right+position_center){
            imageView_8.setImageDrawable(this.getResources().getDrawable(arr[0]));
            KEY = 6;
        }else {
            imageView_8.setImageDrawable(null);
            KEY = 0;
        }

        //这就是这个项目的关键点，利用正弦函数，来达到这个效果,至于为啥是正弦我也是恶补了下高中的数学（开玩笑），才有想法
        //其实这个大家想明白了就很简单
        ViewHelper.setScaleX(imageView_8, (float) (Math.sin((double) (scX * Math.PI / (position * 2)))));
        ViewHelper.setScaleY(imageView_8, (float) (Math.sin((double) (scX * Math.PI / (position * 2)))));
//
    }

    private TransterListener lister;

    public interface TransterListener {
        void moveKey(int key);
    }

    public void setLister(TransterListener lister) {
        this.lister = lister;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);


        width = getWidth();

        RelativeLayout childAt = (RelativeLayout) MyFrameLayout.this.getChildAt(0);

        int childCount = childAt.getChildCount();
        frist_left = childAt.getChildAt(childCount - 2).getLeft();
        frist_right = childAt.getChildAt(childCount - 2).getRight();

        //大框的半径
        frist_center = (frist_right - frist_left) / 2;

        float three_left = childAt.getChildAt(childCount - 3).getLeft();

        three_right = childAt.getChildAt(childCount - 3).getRight();

        four_right = childAt.getChildAt(childCount - 4).getRight();

        five_right = childAt.getChildAt(childCount - 5).getRight();

        six_right = childAt.getChildAt(childCount - 6).getRight();

        seven_right = childAt.getChildAt(childCount - 7).getRight();

        float center_6 = (three_right - three_left) / 2;//第二框的半径

        //大框的中心
        position_7 = frist_right - frist_center;

        //中间间距的半径
        position_center = (three_left - frist_right) / 2;

        position = center_6 + position_center;//表示变化的周期，也是从0-1的变化的距离

        position_key = three_left - position_center;//节点

        eight_right = childAt.getChildAt(childCount - 8).getRight();

    }
}

这个布局也是一个关键的一个地方，图片大家或者背景大家可以自己设置下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_bg"
    android:layout_width="250dp"
    android:layout_height="50dp"
    android:background="@drawable/background_bg"
    android:gravity="center_vertical">


    <ImageView
        android:layout_centerVertical="true"
        android:layout_marginLeft="12dp"
        android:layout_toRightOf="@+id/iv_2"
        android:id="@+id/iv_1"
        android:layout_width="19dp"
        android:layout_height="19dp"
        android:src="@drawable/test_1" />

    <ImageView
        android:layout_centerVertical="true"
        android:layout_marginLeft="12dp"
        android:layout_toRightOf="@+id/iv_3"
        android:id="@+id/iv_2"
        android:layout_width="19dp"
        android:layout_height="19dp"
        android:src="@drawable/test_2" />

    <ImageView
        android:layout_centerVertical="true"
        android:layout_marginLeft="12dp"
        android:layout_toRightOf="@+id/iv_4"
        android:id="@+id/iv_3"
        android:layout_width="19dp"
        android:layout_height="19dp"
        android:src="@drawable/test_3" />

    <ImageView
        android:layout_centerVertical="true"
        android:layout_marginLeft="12dp"
        android:layout_toRightOf="@+id/iv_5"
        android:id="@+id/iv_4"
        android:layout_width="19dp"
        android:layout_height="19dp"
        android:src="@drawable/test_4" />

    <ImageView
        android:layout_centerVertical="true"
        android:layout_marginLeft="12dp"
        android:layout_toRightOf="@+id/iv_6"
        android:id="@+id/iv_5"
        android:layout_width="19dp"
        android:layout_height="19dp"
        android:src="@drawable/test_5" />

    <ImageView
        android:layout_centerVertical="true"
        android:layout_marginLeft="12dp"
        android:layout_toRightOf="@+id/iv_7"
        android:id="@+id/iv_6"
        android:layout_width="19dp"
        android:layout_height="19dp"
        android:src="@drawable/test_6" />

    <ImageView
        android:layout_centerVertical="true"
        android:id="@+id/iv_7"
        android:layout_marginLeft="5dp"
        android:layout_width="38dp"
        android:layout_height="38dp"
        android:src="@drawable/test_bg" />
    <ImageView
        android:scaleType="fitCenter"
        android:layout_marginLeft="10dp"
        android:layout_centerVertical="true"
        android:id="@+id/iv_8"
        android:layout_width="28dp"
        android:layout_height="28dp"
        />

</RelativeLayout>

这个地方就是显现自定义的地方

import android.app.Activity;
import android.app.Dialog;
import android.content.Context;
import android.graphics.Typeface;
import android.net.Uri;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.Display;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.facebook.common.util.UriUtil;
import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.drawee.interfaces.DraweeController;
import com.facebook.drawee.view.SimpleDraweeView;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;
public class WarmTipsDialog implements MyFrameLayout.TransterListener {
    private Context mContext;
    private Dialog dialog;
    private Display display;
    private RelativeLayout lLayout_bg;
    private FrameLayout rl_bg;
    private View view;
    private ImageView delete;
    private TextView mTv;
    private MyFrameLayout mSBV;

    public WarmTipsDialog(Context context) {

        this.mContext = context;
        WindowManager windowManager = (WindowManager) mContext
                .getSystemService(Context.WINDOW_SERVICE);
        display = windowManager.getDefaultDisplay();
    }

    public WarmTipsDialog builder() {

        // 获取Dialog布局
        view = LayoutInflater.from(mContext).inflate(
                R.layout.view_warm_tip_layout, null);

        lLayout_bg = (RelativeLayout) view.findViewById(R.id.ll_bg);
        delete = (ImageView) view.findViewById(R.id.iv_delete);
        visibli(view);
        mSBV = (MyFrameLayout) view.findViewById(R.id.slid_block);
        mSBV.setLister(this);
        mTv = (TextView) view.findViewById(R.id.tv_title);
//        // 定义Dialog布局和参数
        dialog = new Dialog(mContext, R.style.AlertDialogStyle);
        dialog.setContentView(view);

        // 调整dialog背景大小
        lLayout_bg.setLayoutParams(new FrameLayout.LayoutParams((int) (display
                .getWidth() * 0.9), LinearLayout.LayoutParams.WRAP_CONTENT));

        delete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dismissDialog();
            }
        });
        dialog.setCanceledOnTouchOutside(false);
        return this;
    }

    /**
     * 显示dialog
     */
    public void showDialog(){
        if(mContext != null && !((Activity)mContext).isFinishing() && dialog != null){
            if(!dialog.isShowing()){
                dialog.show();
            }
        }
    }

    /**
     * 取消dialog
     */
    public void dismissDialog(){
        dialog.dismiss();
    }

    @Override
    public void moveKey(int key) {
        if (key == 0){
            mTv.setClickable(true);
            mTv.setFocusable(true);
            mTv.setText("验证码错误，点击这里重试");
            mTv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mSBV.reset();
                }
            });
        }else {
            Toast.makeText(mContext, "我是" + key + "被点击了", Toast.LENGTH_SHORT).show();
        }
    }
}

对话框布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_bg"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#fff"
    android:orientation="vertical">
        <ImageView
            android:id="@+id/iv_delete"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:src="@drawable/x" />

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/iv_delete"
            android:layout_marginTop="50dp"
            android:gravity="center_horizontal"
            android:text="@string/tv_title"
            android:textColor="#333333"
            android:textSize="20dp" />


        <MyFrameLayout
            android:id="@+id/slid_block"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_title"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="70dp"
            android:layout_marginTop="55dp" />


</RelativeLayout>