Android仿抖音點擊效果

1.概述

短視頻抖音App非常火，視頻點擊效果紅心效果也不錯。其實不難就是一些動畫效果的結合使用，這裏將具體一步一步實現。copy本代碼可直接使用。

老規矩，先看女神效果圖：

2．效果分析

2.1：首先是構建一張紅心圖片 new ImageView(mContext);

2.2：設置紅心圖片X與Y座標位置

2.2：添加屬性動畫效果集，包含縮放、透明度、旋轉、向上平移（按一定順序重複）

3．代碼實現

3.1、自定義佈局，我這裏重寫RelativeLayout

3.2、自定義屬性attrs.xml

<!--attrs文件 屬性-->
<declare-styleable name="HeartLayout">
   <attr name="heart_width" format="integer" />
   <attr name="heart_height" format="integer" />
   <attr name="heart_image_resId" format="reference" />
</declare-styleable>

 //自定義屬性 寬、高、圖片
TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.HeartLayout);
        mWidth=typedArray.getInteger(R.styleable.HeartLayout_heart_width,mWidth);
        mHeight=typedArray.getInteger(R.styleable.HeartLayout_heart_height,mHeight);
    image_resId=typedArray.getResourceId(R.styleable.HeartLayout_heart_image_resId,image_resId);

3.3、創建ImageView,並設置座標

默認圖片或者自定義

ImageView imageView=new ImageView(mContext);
    imageView.setImageResource(image_resId);

因爲圖片位置在手指正上方，所以得到觸摸座標後進行左移動自身寬度一半，向上移動自身高度。

  RelativeLayout.LayoutParams layoutParams=new RelativeLayout.LayoutParams(mWidth, mHeight);
        int xLeft=(int)event.getX()- mWidth/2;
        int yTop=(int)event.getY() - mHeight;
        layoutParams.setMargins(xLeft,yTop,0,0);
        imageView.setLayoutParams(layoutParams);

3.4、動畫效果ObjectAnimator

通過屬性動畫ObjectAnimator進行縮放、旋轉、漸變透明度、平移等操作ImageView心圖片。

3.5、RedHeartLayout自定義佈局的整體代碼

/**
 * 仿抖音紅心效果
 */
public class RedHeartLayout extends RelativeLayout {
    private Context mContext;
    private float[] mRandomAngle = {-25, -15, 0, 15, 25};//隨機心形圖片角度
    private int image_resId=R.drawable.ic_heart;//默認圖片
    private int mWidth=120; //默認圖片寬
    private int mHeight=120;//默認圖片高


    /**
     * new 使用
     * @param context
     */
    public RedHeartLayout(Context context) {
        super(context);
        initView(context);
    }
    /**
     *  當有style自定義樣式時候 使用
     * @param context
     * @param attrs
     * @param defStyleAttr
     */

    public RedHeartLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }
    /**
     *  佈局使用
     * @param context
     * @param attrs
     */
    public RedHeartLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        //自定義屬性 寬、高、圖片
        TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.HeartLayout);
        mWidth=typedArray.getInteger(R.styleable.HeartLayout_heart_width,mWidth);
        mHeight=typedArray.getInteger(R.styleable.HeartLayout_heart_height,mHeight);
        image_resId=typedArray.getResourceId(R.styleable.HeartLayout_heart_image_resId,image_resId);
        initView(context);
    }

    /**
     *  將寬高dp轉化爲px
     * @param context
     */
    private void initView(Context context) {
        this.mContext = context;
        this.mHeight=dip2px(mContext,mHeight);
        this.mWidth=dip2px(mContext,mWidth);
    }

    /**
     *  觸摸事件處理
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {

        //第一步,創建心形ImageView
        final ImageView imageView=new ImageView(mContext);
        imageView.setImageResource(image_resId);
        RelativeLayout.LayoutParams layoutParams=new RelativeLayout.LayoutParams(mWidth, mHeight);
        int xLeft=(int)event.getX()- mWidth/2;
        int yTop=(int)event.getY() - mHeight;
        layoutParams.setMargins(xLeft,yTop,0,0);
        imageView.setLayoutParams(layoutParams);
        addView(imageView);
        //第二步,添加動畫效果集
        AnimatorSet animatorSet = new AnimatorSet();
                    //縮放動畫，X軸2倍縮小至0.9倍
        animatorSet.play(scaleXY(imageView, "scaleX", 2f, 0.9f, 100, 0))
                   //縮放動畫 , Y軸2倍縮小至0.9倍
                   .with(scaleXY(imageView, "scaleY", 2f, 0.9f, 100, 0))
                   //旋轉動畫 , 隨機旋轉角度
                   .with(rotation(imageView, 0, 0))
                   //透明度動畫 , 透明度從0-1
                   .with(alpha(imageView, 0, 1, 100, 0))
                   //縮放動畫 , X軸0.9倍縮小至1倍
                   .with(scaleXY(imageView, "scaleX", 0.9f, 1, 50, 150))
                   //縮放動畫 , Y軸0.9倍縮小至1倍
                   .with(scaleXY(imageView, "scaleY", 0.9f, 1, 50, 150))
                   //平移動畫 , Y軸從0向上移動700單位
                   .with(translationY(imageView, "translationY", 0, -700, 800, 400))
                   //透明度動畫 , 透明度從1-0
                   .with(alpha(imageView, 1, 0, 400, 400))
                   //縮放動畫 , X軸1倍放大至3倍
                   .with(scaleXY(imageView, "scaleX", 1, 3f, 800, 400))
                   //縮放動畫 , Y軸1倍放大至3倍
                   .with(scaleXY(imageView, "scaleY", 1, 3f, 800, 400));
        animatorSet.start();
        //動畫移除
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                 removeViewInLayout(imageView);
            }
        });
        return super.onTouchEvent(event);
    }

    /**
     *   X軸或Y軸 縮放
     * @param view
     * @param propertyName
     * @param from
     * @param to
     * @param time
     * @param delayTime
     * @return
     */
    public  ObjectAnimator scaleXY(View view, String propertyName, float from, float to, long time, long delayTime) {
        ObjectAnimator _scaleXY=  ObjectAnimator.ofFloat(view,propertyName,from,to);
        ////設置插值器爲 勻速(補充：有加速、先加後減等)
        _scaleXY.setInterpolator(new LinearInterpolator());
        //設置開始前延遲
        _scaleXY.setStartDelay(delayTime);
        //設置動畫持續時間
        _scaleXY.setDuration(time);
        _scaleXY.start();
        return _scaleXY;
    }

    /**
     *   X軸或Y軸 平移
     * @param view
     * @param from
     * @param to
     * @param time
     * @param delayTime
     * @return
     */
    public  ObjectAnimator translationY(View view,  String propertyName,float from, float to, long time, long delayTime) {
        ObjectAnimator translation = ObjectAnimator.ofFloat(view, propertyName, from, to);
        translation.setInterpolator(new LinearInterpolator());
        translation.setStartDelay(delayTime);
        translation.setDuration(time);
        return translation;
    }

    /**
     *   透明化處理
     * @param view
     * @param from
     * @param to
     * @param time
     * @param delayTime
     * @return
     */
    public  ObjectAnimator alpha(View view, float from, float to, long time, long delayTime) {
        ObjectAnimator alpha = ObjectAnimator.ofFloat(view, "alpha", from, to);
        alpha.setInterpolator(new LinearInterpolator());
        alpha.setStartDelay(delayTime);
        alpha.setDuration(time);
        return alpha;
    }

    /**
     *  旋轉
     * @param view
     * @param time
     * @param delayTime
     * @return
     */
    public ObjectAnimator rotation(View view, long time, long delayTime) {
        //隨機旋轉角度
        float angle= mRandomAngle[new Random().nextInt(4)];
        ObjectAnimator rotation = ObjectAnimator.ofFloat(view, "rotation", angle);
        rotation.setDuration(time);
        rotation.setStartDelay(delayTime);
        rotation.setInterpolator(new TimeInterpolator() {
            @Override
            public float getInterpolation(float input) {
                //抖動係數越小幅度越大 0-1
                return input;
            }
        });
        return rotation;
    }

    /**
     * 根據手機的分辨率從 dp 的單位 轉成爲 px(像素)
     */
    public  int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

4、佈局使用

4.1、使用默認配置（推薦直接使用）

   <com.lzj.douyin.redheart.library.RedHeartLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>

4.2、自定義寬、高、引入其他圖片作爲效果

   <com.lzj.douyin.redheart.library.RedHeartLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:heart_image_resId="@drawable/ic_heart"
       app:heart_width="120"
       app:heart_height="120" />

5、Demo地址github

只需copy： RedHeartLayout文件、自定義屬性attrs.xml 即可使用。

Android仿抖音點擊效果

1.概述

2．效果分析

3．代碼實現

4、佈局使用

5、Demo地址github

Glide源碼分析以及三級緩存原理

Android3D畫廊效果與自動輪播Banner 1、先看效果圖: 2、效果分析 3D畫廊效果代碼分析: 3、普通效果2 4、普通效果1 5、方法講解 6．結尾

Android仿支付寶密碼輸入框與數字鍵盤 1.概述

Android自定義字母索引結尾

Android自定義字母索引

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結