一、效果图

1、第一版本：在屏幕底部开始显示

2、第二版本：点击任意位置都可以显示

3、第三版本：给任意控件添加点赞效果

二、代码

1、第一版本代码

源码：

package com.example.lovelayout;import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.TypeEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.PointF;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;import java.util.Random;import androidx.core.content.ContextCompat;public class MyLoveLayout extends RelativeLayout {private int[] imgResId;private Random random;private int mWidth;private int mHeight;private int drawableWidth;private int drawableHeight;public MyLoveLayout(Context context) {this(context, null);}public MyLoveLayout(Context context, AttributeSet attrs) {this(context, attrs, 0);}public MyLoveLayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);imgResId = new int[]{R.drawable.off, R.drawable.on};random = new Random();Drawable drawable = ContextCompat.getDrawable(context, R.drawable.on);drawableWidth = drawable.getIntrinsicWidth();drawableHeight = drawable.getIntrinsicHeight();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);mWidth = MeasureSpec.getSize(widthMeasureSpec);mHeight = MeasureSpec.getSize(heightMeasureSpec);}//添加图片public void addView() {ImageView loveImg = new ImageView(getContext());loveImg.setImageResource(imgResId[random.nextInt(imgResId.length)]);RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);params.addRule(CENTER_HORIZONTAL);params.addRule(ALIGN_PARENT_BOTTOM);loveImg.setLayoutParams(params);addView(loveImg);//开始动画startAni(loveImg);}private void startAni(ImageView loveImg) {//透明度、缩放动画ObjectAnimator alphaAni = ObjectAnimator.ofFloat(loveImg, "Alpha", 0f, 1f);ObjectAnimator scaleXAni = ObjectAnimator.ofFloat(loveImg, "ScaleX", 0.2f, 1f);alphaAni.setDuration(500);scaleXAni.setDuration(500);//贝塞尔路径动画ValueAnimator bizerAni = getBizerPathAni(loveImg);AnimatorSet aniSet = new AnimatorSet();aniSet.play(alphaAni).with(scaleXAni).before(bizerAni);aniSet.start();}private ValueAnimator getBizerPathAni(final ImageView loveImg) {//point0 point3 起始点和终点 point1 point2 控制点PointF point0 = new PointF(mWidth / 2 - drawableWidth / 2, mHeight - drawableHeight);//左上角PointF point1 = new PointF(random.nextInt(mWidth - drawableWidth), random.nextInt(mHeight / 2)+ mHeight / 2);PointF point2 = new PointF(random.nextInt(mWidth - drawableWidth), random.nextInt(mHeight / 2) );PointF point3 = new PointF(random.nextInt(mWidth - drawableWidth), 0);final ValueAnimator bizerPathAni = ValueAnimator.ofObject(new MyEvalutator(point0, point3), point1, point2);bizerPathAni.setDuration(3000);bizerPathAni.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {PointF bizerPoint = (PointF) animation.getAnimatedValue();//改变imageview的坐标loveImg.setX(bizerPoint.x);loveImg.setY(bizerPoint.y);float t = animation.getAnimatedFraction();//设置透明度，慢慢消失loveImg.setAlpha(1.3f - t);}});bizerPathAni.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {removeView(loveImg);}});return bizerPathAni;}private class MyEvalutator implements TypeEvaluator<PointF> {private PointF point0;//起点private PointF point3;//终点private PointF pointBizer;public MyEvalutator(PointF point0, PointF point3) {this.point0 = point0;this.point3 = point3;pointBizer = new PointF();}@Overridepublic PointF evaluate(float t, PointF point1, PointF point2) {//三次贝塞尔曲线pointBizer.x = (float) (point0.x * Math.pow(1 - t, 3) + 3 * point1.x * t * Math.pow(1 - t, 2)+ 3 * point2.x * t * t * (1 - t) + point3.x * Math.pow(t, 3));pointBizer.y = (float) (point0.y * Math.pow(1 - t, 3) + 3 * point1.y * t * Math.pow(1 - t, 2)+ 3 * point2.y * t * t * (1 - t) + point3.y * Math.pow(t, 3));return pointBizer;}}}

示例：

<?xml version="1.0" encoding="utf-8"?>
<com.example.lovelayout.MyLoveLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/loveLayout"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><Buttonandroid:id="@+id/btn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="点击" /></com.example.lovelayout.MyLoveLayout>

package com.example.lovelayout;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;
import android.view.View;
import android.widget.Button;public class MainActivity extends AppCompatActivity {MyLoveLayout loveLayout;Button btn;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);loveLayout = (MyLoveLayout) findViewById(R.id.loveLayout);btn = (Button) findViewById(R.id.btn);btn.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {loveLayout.addView();}});}
}

2、第二版本代码

源码（主要是增加了ontouchEvent的处理还有修改贝塞尔四个点的坐标范围）：

package com.example.lovelayout;import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.TypeEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.PointF;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;import java.util.Random;import androidx.core.content.ContextCompat;public class MyLoveLayout extends RelativeLayout {private int[] imgResId;private Random random;private int mWidth;private int mHeight;private int drawableWidth;private int drawableHeight;private PointF downPoint;//手指按下的点public MyLoveLayout(Context context) {this(context, null);}public MyLoveLayout(Context context, AttributeSet attrs) {this(context, attrs, 0);}public MyLoveLayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);imgResId = new int[]{R.drawable.off, R.drawable.on};random = new Random();Drawable drawable = ContextCompat.getDrawable(context, R.drawable.on);drawableWidth = drawable.getIntrinsicWidth();drawableHeight = drawable.getIntrinsicHeight();downPoint=new PointF();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);mWidth = MeasureSpec.getSize(widthMeasureSpec);mHeight = MeasureSpec.getSize(heightMeasureSpec);}//添加图片private void addView() {ImageView loveImg = new ImageView(getContext());loveImg.setImageResource(imgResId[random.nextInt(imgResId.length)]);RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);loveImg.setLayoutParams(params);loveImg.setX(downPoint.x-drawableWidth/2);loveImg.setY(downPoint.y-drawableHeight/2);addView(loveImg);//开始动画startAni(loveImg);}private void startAni(ImageView loveImg) {//透明度、缩放动画ObjectAnimator alphaAni = ObjectAnimator.ofFloat(loveImg, "Alpha", 0f, 1f);ObjectAnimator scaleXAni = ObjectAnimator.ofFloat(loveImg, "ScaleX", 0.2f, 1f);alphaAni.setDuration(100);scaleXAni.setDuration(100);//贝塞尔路径动画ValueAnimator bizerAni = getBizerPathAni(loveImg);AnimatorSet aniSet = new AnimatorSet();aniSet.play(alphaAni).with(scaleXAni).before(bizerAni);aniSet.start();}private ValueAnimator getBizerPathAni(final ImageView loveImg) {//point0 point3 起始点和终点 point1 point2 控制点PointF point0 = new PointF(downPoint.x-drawableWidth/2, downPoint.y - drawableHeight/2);//左上角PointF point1 = new PointF(random.nextInt(mWidth - drawableWidth),random.nextInt((int) ((mHeight-downPoint.y) / 2)) +(mHeight-downPoint.y) / 2 );PointF point2 = new PointF(random.nextInt(mWidth - drawableWidth), random.nextInt((int) ((mHeight-downPoint.y) / 2)));PointF point3 = new PointF(random.nextInt(mWidth - drawableWidth), 0);final ValueAnimator bizerPathAni = ValueAnimator.ofObject(new MyEvalutator(point0, point3), point1, point2);bizerPathAni.setDuration(3000);bizerPathAni.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {PointF bizerPoint = (PointF) animation.getAnimatedValue();//改变imageview的坐标loveImg.setX(bizerPoint.x);loveImg.setY(bizerPoint.y);float t = animation.getAnimatedFraction();//设置透明度，慢慢消失loveImg.setAlpha(1.3f - t);}});bizerPathAni.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {removeView(loveImg);}});return bizerPathAni;}private class MyEvalutator implements TypeEvaluator<PointF> {private PointF point0;//起点private PointF point3;//终点private PointF pointBizer;public MyEvalutator(PointF point0, PointF point3) {this.point0 = point0;this.point3 = point3;pointBizer = new PointF();}@Overridepublic PointF evaluate(float t, PointF point1, PointF point2) {//三次贝塞尔曲线pointBizer.x = (float) (point0.x * Math.pow(1 - t, 3) + 3 * point1.x * t * Math.pow(1 - t, 2)+ 3 * point2.x * t * t * (1 - t) + point3.x * Math.pow(t, 3));pointBizer.y = (float) (point0.y * Math.pow(1 - t, 3) + 3 * point1.y * t * Math.pow(1 - t, 2)+ 3 * point2.y * t * t * (1 - t) + point3.y * Math.pow(t, 3));return pointBizer;}}@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:downPoint.x = event.getX();downPoint.y = event.getY();addView();break;}return super.onTouchEvent(event);}
}

示例：

<?xml version="1.0" encoding="utf-8"?>
<com.example.lovelayout.MyLoveLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/loveLayout"tools:context=".MainActivity"></com.example.lovelayout.MyLoveLayout>

package com.example.lovelayout;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;
import android.view.View;
import android.widget.Button;public class MainActivity extends AppCompatActivity {MyLoveLayout loveLayout;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);loveLayout = (MyLoveLayout) findViewById(R.id.loveLayout);}
}

3、第三版本代码（主要是增加了ontouchlistener）

源码：

package com.example.lovelayout;import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.TypeEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.PointF;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;import java.util.Random;import androidx.core.content.ContextCompat;public class MyLoveLayout extends RelativeLayout {private static final String TAG="MyLoveLayout";private int[] imgResId;private Random random;private int mWidth;private int mHeight;private int drawableWidth;private int drawableHeight;private PointF downPoint;//手指按下的点public MyLoveLayout(Context context) {this(context, null);}public MyLoveLayout(Context context, AttributeSet attrs) {this(context, attrs, 0);}public MyLoveLayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);imgResId = new int[]{R.drawable.off, R.drawable.on};random = new Random();Drawable drawable = ContextCompat.getDrawable(context, R.drawable.on);drawableWidth = drawable.getIntrinsicWidth();drawableHeight = drawable.getIntrinsicHeight();downPoint=new PointF();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);mWidth = MeasureSpec.getSize(widthMeasureSpec);mHeight = MeasureSpec.getSize(heightMeasureSpec);}//添加图片private void addView() {ImageView loveImg = new ImageView(getContext());loveImg.setImageResource(imgResId[random.nextInt(imgResId.length)]);RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);loveImg.setLayoutParams(params);loveImg.setX(downPoint.x-drawableWidth/2);loveImg.setY(downPoint.y-drawableHeight/2);addView(loveImg);//开始动画startAni(loveImg);}private void startAni(ImageView loveImg) {//透明度、缩放动画ObjectAnimator alphaAni = ObjectAnimator.ofFloat(loveImg, "Alpha", 0f, 1f);ObjectAnimator scaleXAni = ObjectAnimator.ofFloat(loveImg, "ScaleX", 0.2f, 1f);alphaAni.setDuration(100);scaleXAni.setDuration(100);//贝塞尔路径动画ValueAnimator bizerAni = getBizerPathAni(loveImg);AnimatorSet aniSet = new AnimatorSet();aniSet.play(alphaAni).with(scaleXAni).before(bizerAni);aniSet.start();}private ValueAnimator getBizerPathAni(final ImageView loveImg) {//point0 point3 起始点和终点 point1 point2 控制点PointF point0 = new PointF(downPoint.x-drawableWidth/2, downPoint.y - drawableHeight/2);//左上角PointF point1 = new PointF(random.nextInt(mWidth - drawableWidth),random.nextInt((int) ((mHeight-downPoint.y) / 2)) +(mHeight-downPoint.y) / 2 );PointF point2 = new PointF(random.nextInt(mWidth - drawableWidth), random.nextInt((int) ((mHeight-downPoint.y) / 2)));PointF point3 = new PointF(random.nextInt(mWidth - drawableWidth), 0);final ValueAnimator bizerPathAni = ValueAnimator.ofObject(new MyEvalutator(point0, point3), point1, point2);bizerPathAni.setDuration(3000);bizerPathAni.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {PointF bizerPoint = (PointF) animation.getAnimatedValue();//改变imageview的坐标loveImg.setX(bizerPoint.x);loveImg.setY(bizerPoint.y);float t = animation.getAnimatedFraction();//设置透明度，慢慢消失loveImg.setAlpha(1.3f - t);}});bizerPathAni.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {removeView(loveImg);}});return bizerPathAni;}private class MyEvalutator implements TypeEvaluator<PointF> {private PointF point0;//起点private PointF point3;//终点private PointF pointBizer;public MyEvalutator(PointF point0, PointF point3) {this.point0 = point0;this.point3 = point3;pointBizer = new PointF();}@Overridepublic PointF evaluate(float t, PointF point1, PointF point2) {//三次贝塞尔曲线pointBizer.x = (float) (point0.x * Math.pow(1 - t, 3) + 3 * point1.x * t * Math.pow(1 - t, 2)+ 3 * point2.x * t * t * (1 - t) + point3.x * Math.pow(t, 3));pointBizer.y = (float) (point0.y * Math.pow(1 - t, 3) + 3 * point1.y * t * Math.pow(1 - t, 2)+ 3 * point2.y * t * t * (1 - t) + point3.y * Math.pow(t, 3));return pointBizer;}}@Overridepublic boolean onTouchEvent(MotionEvent event) {
//        switch (event.getAction()) {
//            case MotionEvent.ACTION_DOWN:
//                downPoint.x = event.getX();
//                downPoint.y = event.getY();
//                addView();
//                break;
//        }return super.onTouchEvent(event);}//增加view的触摸监听事件public void attachView(View view) {view.setOnTouchListener(new OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:downPoint.x = event.getRawX();//这里要减去状态栏的高度，否则高度不对，如果有ActionBar,这里也要记得减掉downPoint.y = event.getRawY()-getStatusBarHeight();addView();break;}return true;}});}//获取状态栏高度private int getStatusBarHeight() {int height=0;Resources resources=getContext().getResources();int resId = resources.getIdentifier("status_bar_height", "dimen", "android");if (resId > 0) {height = resources.getDimensionPixelOffset(resId);}height=(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,height,resources.getDisplayMetrics());return height;}
}

示例：

<?xml version="1.0" encoding="utf-8"?>
<com.example.lovelayout.MyLoveLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/loveLayout"tools:context=".MainActivity"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_marginTop="500dp"android:background="@drawable/on"android:id="@+id/img" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/button"android:layout_centerInParent="true"android:text="点我" /></com.example.lovelayout.MyLoveLayout>

package com.example.lovelayout;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;public class MainActivity extends AppCompatActivity {MyLoveLayout loveLayout;ImageView img;Button button;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);loveLayout = (MyLoveLayout) findViewById(R.id.loveLayout);img = (ImageView) findViewById(R.id.img);button = (Button) findViewById(R.id.button);loveLayout.attachView(button);loveLayout.attachView(img);}
}

自定义View:仿抖音直播点赞效果相关推荐

仿抖音短视频源码，高仿抖音双击点赞效果之双击的问题
仿抖音短视频源码中,实现仿抖音的双击点赞效果,相关代码如下: public class MyView extends View {private GestureDetector gestureDete ...
Android 抖音爱心动画,Android自定义View实现抖音飘动红心效果
本文实例为大家分享了Android自定义View实现抖音飘动红心效果的具体代码,供大家参考,具体内容如下自定义View--抖音飘动红心效果展示动画效果使用自定义view完成红心飘动效果 Vie ...
android 自定义红心,Android自定义View实现抖音飘动红心效果
本文实例为大家分享了Android自定义View实现抖音飘动红心效果的具体代码,供大家参考,具体内容如下自定义View--抖音飘动红心效果展示动画效果使用自定义view完成红心飘动效果 Vie ...
Android 高仿抖音双击点赞效果
最近遇到一个需求模仿抖音点赞效果废话不多说,直接上代码自定义一个view 在布局中引用它就可以 public class Love extends RelativeLayout { pr ...
Android自定义view之实现仿抖音双击点赞单击暂停特效
2018年抖音.快手.火山等短视频App比较火,最近自己做短视频项目时有个需求,就是类似抖音的点赞特效,单击屏幕时视频暂停,再次点击时视频恢复播放,双击或者连续多次点击时出现点赞特效(飘小心心特效), ...
Android仿抖音双击点赞动画,Android仿抖音点击效果
原标题:Android仿抖音点击效果作者丨wish_xy https://www.jianshu.com/p/1d17c38a3db1 学习自定义view,想找点东西耍一下,刚好看到抖音的点赞效果不 ...
多图弹出最后变成心形html,【Flutter组件】仿抖音双击点赞弹出爱心效果（可连点）...
效果简介仿抖音点赞手势,单击暂停,双击点赞,可连续点击添加多个爱心,特点如下全部效果为代码绘制(爱心图标来自Material Icon的图标) 套上在目标Widget外即可使用提供单击与点赞的 ...
android仿抖音直播间聊天,Uni-App直播小视频|仿微信聊天界面|uniapp仿抖音
U直播是一个基于Nvue+vue+uniapp技术开发的仿抖音小视频.陌陌直播的项目.小视频及直播页面均实现了类似抖音上下滑动切换效果,还有点赞.评论.商品等功能展示. 运行效果: 技术实现:编辑器+ ...
Android直播头像动画,iOS 仿抖音直播头像缩放动画
效果图仿抖音直播头像缩放效果, 简单写了demo, 思路简单, 直接用的递归重复调用, 呈上所有代码. @interface YCXHeaderZoomViewController () @prop ...

自定义View:仿抖音直播点赞效果

一、效果图

1、第一版本：在屏幕底部开始显示

2、第二版本：点击任意位置都可以显示

3、第三版本：给任意控件添加点赞效果

二、代码

1、第一版本代码

源码：

示例：

2、第二版本代码

源码（主要是增加了ontouchEvent的处理还有修改贝塞尔四个点的坐标范围）：

示例：

3、第三版本代码（主要是增加了ontouchlistener）

源码：

示例：

自定义View:仿抖音直播点赞效果相关推荐

最新文章

热门文章