仿格瓦拉驗證碼界面動畫效果

最近在項目當中有一個滑動驗證碼動畫效果要實現，剛開始看到這個效果感覺還是可以的，但是要實現起來覺得有點麻煩，我想大家一定都和我一樣拿到這個需求一定是一頓谷歌，百度啥的，但是搜索了很久都沒找到相似的效果，又催的急沒辦法，卷起袖子干吧，就開始自己造輪子的過程，在做這個需求的過程中，還是很有收獲的比如說復習了下高中的函數知識，我想大家都和一樣高中的數學知識應該都忘的差不多了吧，反正我是忘的差不多了，廢話不多說了，直接上代碼,里面使用到了的圖片，大家可以自己搞一點圖片進去試試

下圖是我截取的一部分，效果就是這樣

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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,116評論 25贊 708
  • 回想起來 ，歲月悠悠。 我要感激的人太多…… 想我還是個窮酸小子的時候，遇到過一個拾破爛兒的老頭兒。我穿的很...
    我是憨逗又憨又逗閱讀 218評論 0贊 0
  • 你在家里工作， 和父母一起生活。 我在外地工作， 和夢想一起生活。 就這樣， 你收獲了親情， 我憧憬了夢想。 親情...
    小劇在成長閱讀 240評論 2贊 5
  • 今天群里突然討論起頭發來，我第一反應就是染發。 人生中第一次染發就染了很淺的顏色，雖然發質被傷的像枯草了，但這...
    jean_en閱讀 356評論 0贊 0
  • 般若波羅蜜多心經 齊豫 上周日去了泉州的開元寺，剛巧碰到寺院在做關于孝悌的一場佛法活動。大雄寶殿里頭幾乎所有的和尚...
    jerrybirdy閱讀 474評論 0贊 0