自定义View学习之12/3(仿Twitter拍照按钮)

最新推荐文章于 2020-05-12 17:32:57 发布

silly_wy

最新推荐文章于 2020-05-12 17:32:57 发布

阅读量763

点赞数

分类专栏：自定义View 文章标签： twitter 拍照按钮动画仿

本文链接：https://blog.csdn.net/u013895206/article/details/49801493

版权

自定义View 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

好久没更新博客了，最近比较忙，今天我们仿一个Twitter拍照按钮，最重要就是学习动画的实现，最主要用到的是ObjectAnimator这个动画类，这个动画类提供了ofInt、ofFloat、ofObject，这几个方法都是设置动画作用的元素、作用的属性、动画开始、结束、以及中间的任意个属性值。然后通过AnimatorSet这个类来使他们每个动画的衔接以及何必。

今天终于弄了GIF图了，以后终于可以直接在博客里面看效果了，有点小小的激动和兴奋。

效果如下：
这里写图片描述

效果也看了，下面开始帖代码：
自定义view代码块（代码里面有非常全的注释，这里就不在描述）：

package com.wywy.photo;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;

/**
 * 创建人：wyw
 */
@SuppressLint("NewApi") 
public class PhotoImgView extends ImageView implements View.OnTouchListener {
    /**
     * 按下时间
     */
    private long down_time;
    /**
     * 抬起距离按下多少时间
     */
    private long up_time;
    /**
     * 动画多少秒执行完
     */
    public int animation = 300;
    /**
     * 点击监听
     */
    private onPhoteImgClickListener clickListener;
    /**
     * 是否可点击
     */
    public boolean isClick = true;
    /**
     * 是否先按下
     */
    private boolean isDown = false;

    public PhotoImgView(Context context) {
        super(context);
        init();
    }

    public PhotoImgView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public PhotoImgView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public void setClickListener(onPhoteImgClickListener clickListener) {
        this.clickListener = clickListener;
    }

    @Override
    public void setImageResource(int resId) {
        super.setImageResource(resId);
    }

    private void init() {
        setImageResource(R.drawable.img_photo_vertical_normal);
        //必须设置之后才能接受到 down之外的事件
        setClickable(true);

        setOnTouchListener(this);
    }

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        switch (motionEvent.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (isClick) {
                    isDown = true;
                    //记住按下毫秒
                    down_time = System.currentTimeMillis();
                    //放大1.3倍
                    ObjectAnimator ob_x = new ObjectAnimator().ofFloat(view, "scaleX", 1.0F, 1.3F).setDuration(animation);
                    ObjectAnimator ob_y = new ObjectAnimator().ofFloat(view, "scaleY", 1.0F, 1.3F).setDuration(animation);
                    //用于控制一组动画的执行：线性，一起，每个动画的先后执行等。
                    AnimatorSet animatorSet = new AnimatorSet();
                    //同时执行2个动画
                    animatorSet.play(ob_x).with(ob_y);
                    animatorSet.start();
                }
                break;
            case MotionEvent.ACTION_UP:
                if (isClick && isDown) {
                    isClick = false;
                    isDown = false;
                    //按下到抬起一共花了多少毫秒
                    up_time = System.currentTimeMillis() - down_time;
                    if (up_time >= animation) {
                        up_time = animation;
                    }
                    //1f + ((float) up_time / 1000f) 就等于是按下到抬起把按钮放大到什么程度，就从什么程度上开始缩小
                    ObjectAnimator objectAnimator_x = new ObjectAnimator().ofFloat(view, "scaleX", 1f + ((float) up_time / 1000f), 1.0f).setDuration(animation);
                    ObjectAnimator objectAnimator_y = new ObjectAnimator().ofFloat(view, "scaleY", 1f + ((float) up_time / 1000f), 1.0f).setDuration(animation);
                    ObjectAnimator alpha = new ObjectAnimator().ofFloat(view, "alpha", 1.0f, 0.5f).setDuration(animation);
                   //用于控制一组动画的执行：线性，一起，每个动画的先后执行等。
                    AnimatorSet animatorSet = new AnimatorSet();
                    //同时执行x，y轴缩小和半透明动画（变成灰色不可能点击状态，通过调用setChangeEnd方法可重新变成点击状态）
                    animatorSet.play(objectAnimator_x).with(objectAnimator_y);
                    animatorSet.play(objectAnimator_x).with(alpha);
                    animatorSet.start();

                    if (clickListener != null) {
                        //调用接口
                        clickListener.onClickListener();
                    }
                }
                break;
        }
        return false;
    }

    /**
     * 成功之后调用把图片变成打钩状态，
     *
     * @param time 多久之后变
     */
    public void setChangeEnd(int time) {
        handler.postDelayed(runnable, time);
    }

    private Handler handler = new Handler();


    //请求借口成功之后变成打钩的样子
    private Runnable runnable = new Runnable() {
        @Override
        public void run() {
            ObjectAnimator alpha_start = new ObjectAnimator().ofFloat(PhotoImgView.this, "alpha", 0.5f, 0f).setDuration(animation);
            ObjectAnimator alpha_end = new ObjectAnimator().ofFloat(PhotoImgView.this, "alpha", 0f, 1.0f).setDuration(animation);

            alpha_start.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animator) {
                    setImageResource(R.drawable.img_photo_vertical_select);
                }
            });
            //用于控制一组动画的执行：线性，一起，每个动画的先后执行等。
            AnimatorSet animatorSet = new AnimatorSet();
            //先执行完全透明动画，在切换图片，然后把完全透明变成完全不透明
            animatorSet.play(alpha_start).before(alpha_end);
            animatorSet.start();

            handler.postDelayed(runnable2, 1000);
        }
    };

    //打钩的样子变成原来可以照相的样子
    private Runnable runnable2 = new Runnable() {

        @Override
        public void run() {
            isClick = true;
            ObjectAnimator alpha_start = new ObjectAnimator().ofFloat(PhotoImgView.this, "alpha", 1.0f, 0f).setDuration(animation);
            ObjectAnimator alpha_end = new ObjectAnimator().ofFloat(PhotoImgView.this, "alpha", 0f, 1.0f).setDuration(animation);

            alpha_start.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animator) {
                    setImageResource(R.drawable.img_photo_vertical_normal);
                }
            });
            //用于控制一组动画的执行：线性，一起，每个动画的先后执行等。
            AnimatorSet animatorSet = new AnimatorSet();
            animatorSet.play(alpha_start).before(alpha_end);
            animatorSet.start();
        }
    };

    /**
     * 点击监听
     */
    public interface onPhoteImgClickListener {
        void onClickListener();
    }
}

主界面调用代码块：

package com.wywy.photo;

import com.wywy.photo.PhotoImgView.onPhoteImgClickListener;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

    private PhotoImgView photoImgView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        photoImgView = (PhotoImgView) findViewById(R.id.photoimgview);

        //设置自定义点击监听
        photoImgView.setClickListener(new onPhoteImgClickListener() {

            @Override
            public void onClickListener() {
                //点击操作完之后可调用该方法还原可点击状态  
                //延迟1秒还原
                photoImgView.setChangeEnd(1000);
            }
        });
    }
}

/*******xml文件有点懒就直接贴下面了******/
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.wywy.photo.PhotoImgView
        android:id="@+id/photoimgview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

</RelativeLayout>