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

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

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

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>

最后编辑于：2017.12.18 16:38:34

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,457评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,837评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,696评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,183评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,057评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,105评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,520评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,211评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,482评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,574评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,353评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,213评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,576评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,897评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,174评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,489评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,683评论 2赞 335

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

推荐阅读更多精彩内容