Android自定义view实现仿抖音点赞效果

前言

学习自定义view,想找点东西耍一下,刚好看到抖音的点赞效果不错,尝试一下。

抖音效果:

话不多说,先上代码:

public class Love extends RelativeLayout {
  private Context mContext;
  float[] num = {-30, -20, 0, 20, 30};//随机心形图片角度
  public Love(Context context) {
    super(context);
    initView(context);
  }
  public Love(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    initView(context);
  }
  public Love(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initView(context);
  }
  private void initView(Context context) {
    mContext = context;
  }
  @Override
  protected void dispatchDraw(Canvas canvas) {
    super.dispatchDraw(canvas);
    ImageView imageView = new ImageView(mContext);
    LayoutParams params = new LayoutParams(100, 100);
    params.leftMargin = getWidth() - 200;
    params.topMargin = getHeight() / 2 - 300;
    imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));
    imageView.setLayoutParams(params);
    addView(imageView);
    imageView.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        Toast.makeText(mContext, "这里是点击爱心的动画,待展示", Toast.LENGTH_SHORT).show();
      }
    });
  }
  @Override
  public boolean onTouchEvent(MotionEvent event) {
    final ImageView imageView = new ImageView(mContext);
    LayoutParams params = new LayoutParams(300, 300);
    params.leftMargin = (int) event.getX() - 150;
    params.topMargin = (int) event.getY() - 300;
    imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));
    imageView.setLayoutParams(params);
    addView(imageView);
    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))
        .with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))
        .with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))
        .with(alpha(imageView, 0, 1, 100, 0))
        .with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))
        .with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))
        .with(translationY(imageView, 0, -600, 800, 400))
        .with(alpha(imageView, 1, 0, 300, 400))
        .with(scale(imageView, "scaleX", 1, 3f, 700, 400))
        .with(scale(imageView, "scaleY", 1, 3f, 700, 400));
    animatorSet.start();
    animatorSet.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        removeViewInLayout(imageView);
      }
    });
    return super.onTouchEvent(event);
  }
  public static ObjectAnimator scale(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;
  }
  public static ObjectAnimator translationX(View view, float from, float to, long time, long delayTime) {
    ObjectAnimator translation = ObjectAnimator.ofFloat(view
        , "translationX"
        , from, to);
    translation.setInterpolator(new LinearInterpolator());
    translation.setStartDelay(delayTime);
    translation.setDuration(time);
    return translation;
  }
  public static ObjectAnimator translationY(View view, float from, float to, long time, long delayTime) {
    ObjectAnimator translation = ObjectAnimator.ofFloat(view
        , "translationY"
        , from, to);
    translation.setInterpolator(new LinearInterpolator());
    translation.setStartDelay(delayTime);
    translation.setDuration(time);
    return translation;
  }
  public static ObjectAnimator alpha(View view, float from, float to, long time, long delayTime) {
    ObjectAnimator translation = ObjectAnimator.ofFloat(view
        , "alpha"
        , from, to);
    translation.setInterpolator(new LinearInterpolator());
    translation.setStartDelay(delayTime);
    translation.setDuration(time);
    return translation;
  }
  public static ObjectAnimator rotation(View view, long time, long delayTime, float... values) {
    ObjectAnimator rotation = ObjectAnimator.ofFloat(view, "rotation", values);
    rotation.setDuration(time);
    rotation.setStartDelay(delayTime);
    rotation.setInterpolator(new TimeInterpolator() {
      @Override
      public float getInterpolation(float input) {
        return input;
      }
    });
    return rotation;
  }
  }

实现思路

在点击时触发将心形的图片add到整个view中,然后在执行动画。主要的处理逻辑都在onTouchEvent()事件中,下面我们来详细讲解一下思路和代码:

@Override
  public boolean onTouchEvent(MotionEvent event) {
    final ImageView imageView = new ImageView(mContext);
    LayoutParams params = new LayoutParams(300, 300);
    params.leftMargin = (int) event.getX() - 150;
    params.topMargin = (int) event.getY() - 300;
    imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));
    imageView.setLayoutParams(params);
    addView(imageView);
    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))
        .with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))
        .with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))
        .with(alpha(imageView, 0, 1, 100, 0))
        .with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))
        .with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))
        .with(translationY(imageView, 0, -600, 800, 400))
        .with(alpha(imageView, 1, 0, 300, 400))
        .with(scale(imageView, "scaleX", 1, 3f, 700, 400))
        .with(scale(imageView, "scaleY", 1, 3f, 700, 400));
    animatorSet.start();
    animatorSet.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        removeViewInLayout(imageView);
      }
    });
    return super.onTouchEvent(event);
  }

•首先,我们需要在触摸事件中做监听,当有触摸时,创建一个展示心形图片的ImageView。

final ImageView imageView = new ImageView(mContext);
  imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));//设置红色心形图片

•设置图片展示的位置,是需要在手指触摸的位置上方,即触摸点是心形的下方角的位置。所以我们需要将ImageView设置到手指的位置

 LayoutParams params = new LayoutParams(300, 300);
 params.leftMargin = (int) event.getX() - 150;
 params.topMargin = (int) event.getY() - 300;
 imageView.setLayoutParams(params);

•给imageView add到父view中。

addView(imageView);

•设置imageView动画

 AnimatorSet animatorSet = new AnimatorSet();
 animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))//缩放动画,X轴2倍缩小至0.9倍
        .with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))//缩放动画,Y轴2倍缩小至0.9倍
        .with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))//旋转动画,随机旋转角度num={-30.-20,0,20,30}
        .with(alpha(imageView, 0, 1, 100, 0))//渐变透明度动画,透明度从0-1.
        .with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))//缩放动画,X轴0.9倍缩小至1倍
        .with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))//缩放动画,Y轴0.9倍缩小至1倍
        .with(translationY(imageView, 0, -600, 800, 400))//平移动画,Y轴从0向上移动600单位
        .with(alpha(imageView, 1, 0, 300, 400))//透明度动画,从1-0
        .with(scale(imageView, "scaleX", 1, 3f, 700, 400))//缩放动画,X轴1倍放大至3倍
        .with(scale(imageView, "scaleY", 1, 3f, 700, 400));//缩放动画,Y轴1倍放大至3倍
animatorSet.start();

•当然,我们不可能无限制的增加view,在view消失之后,需要手动的移除改ImageView。

animatorSet.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        removeViewInLayout(imageView);
      }
    });

效果如下:

总结

以上所述是小编给大家介绍的Android自定义view实现仿抖音点赞效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android 仿抖音的评论列表的UI和效果的实现代码

    抖音是一款音乐创意短视频社交软件,是一个专注年轻人的15秒音乐短视频社区.用户可以通过这款软件选择歌曲,拍摄15秒的音乐短视频,形成自己的作品.此App已在Android各大应用商店和APP Store均有上线. 在design包里面 有一个 BottomSheetDialogFragment 这个Fragment,他已经帮我们处理好了手势,所以实现起来很简单.下面是代码: public class ItemListDialogFragment extends BottomSheetDialog

  • Android 使用SwipeRefreshLayout控件仿抖音做的视频下拉刷新效果

    SwipeRefreshLayout(这个控件),我先跟大家介绍一下这个控件: 一.SwipeRefreshLayout简单介绍 •先看以下官方文档,已有了很详细的描述了. 官方文档说明 •这里我再大概解释一下: •在竖直滑动时想要刷新页面可以用SwipeRefreshLayout来实现.它通过设置OnRefreshListener来监听界面的滑动从而实现刷新.也可以通过一些方法来设置SwipeRefreshLayout是否可以刷新.如:setRefreshing(true),展开刷新动画. s

  • Android SwipeRefreshLayout仿抖音app静态刷新

    SwipeRefreshLayout的功能就是可以让我们的界面在不动的情况下,下拉直接刷新 废话不多说,效果图奉上: activity_listview布局文件 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/sr1" android:layout_width="match_parent" android:layout_height="match_parent"&

  • Android自定义view实现仿抖音点赞效果

    前言 学习自定义view,想找点东西耍一下,刚好看到抖音的点赞效果不错,尝试一下. 抖音效果: 话不多说,先上代码: public class Love extends RelativeLayout { private Context mContext; float[] num = {-30, -20, 0, 20, 30};//随机心形图片角度 public Love(Context context) { super(context); initView(context); } public

  • Android仿抖音列表效果

    本文实例为大家分享了Android仿抖音列表效果的具体代码,供大家参考,具体内容如下 当下抖音非常火热,是不是也很心动做一个类似的app吗? 那我们就用RecyclerView实现这个功能吧,关于内存的回收利用就交给RecyclerView就好了. 首先我们先说3个和视频播放暂停相关的接口 public interface OnViewPagerListener { /** * 初始化 */ void onInitComplete(View view); /** * 释放 */ void onP

  • Android仿抖音主页效果实现代码

    写在前面 各位老铁,我又来啦!既然来了,那肯定又来搞事情啦,话不多说,先上图! "抖音"都玩过吧,是不是很好玩,我反正是天天刷,作为一个非著名的Android低级攻城狮,虽然技术菜的一匹,但是也经常刷着刷着会思考:咦?这玩意是用哪个控件做的?这个效果是咋实现的啊?由于本人技术水平有限,所以今天咱就先挑个比较简单的来看看是如何实现的,思考再三,我们就拿抖音首页的这个效果来练练手吧,话不多说,开搞! 一.准备工作 我们先不急着写代码,先对抖音的这种效果做一个简单的分析,首先需要明确的是它是

  • Android自定义View实现仿GitHub的提交活跃表格

    说明 本文可能需要一些基础知识点,如Canvas,Paint,Path,Rect等类的基本使用,建议不熟悉的同学可以学习GcsSloop安卓自定义View教程目录,会帮助很大. 上图就是github的提交表格,直观来看可以分为几个部分进行绘制: (1)各个月份的小方格子,并且色彩根据提交次数变化,由浅到深 (2)右下边的颜色标志,我们右对齐就可以了 (3)左边的星期,原图是从周日画到周六,我们从周一画到周日 (4)上面的月份,我们只画出1-12月 (5)点击时候弹出当天的提交情况,由一个小三角和

  • Android自定义View实现仿1号店垂直滚动广告条代码

    效果图展示,图片有点卡,耐心看会,原程序是很流畅的 实现步骤: 声明变量 初始化画笔.文本大小和坐标 onMeasure()适配wrap_content的宽高 onDraw()画出根据坐标画出两段Text 监听点击事件 在Activity中实现点击事件 实现原理(坐标变换原理):整个过程都是基于坐标Y的增加和交换进行处理的,Y值都会一直增加到endY,然后进行交换逻辑 步骤一:声明变量 由于1号店是两句话的滚动,所以我们也是使用两句话来实现的 private Paint mPaint; priv

  • Android自定义View实现仿驾考宝典显示分数效果(收藏)

    小编最近发现,一些炫酷的view效果,通过需要自定义view和属性动画结合在一起,才能更容易的实现. 实现的效果图如下: 所用的知识有: (1)自定义View中的 path ,主要用来绘制指示块. (2)属性动画-ValueAnimator,并设置属性动画的监听器. (3)根据属性动画是否结束的标志,决定是否绘制分数对应的描述文本内容. 实现步骤: 继承自View,在构造函数中获取自定义属性和初始化操作(初始化画笔) private void obtainAttrs(Context contex

  • Flutter实现抖音点赞效果

    效果图如下: 分析效果 1.整个控件可以点击,控件可以铺满屏幕,点赞效果在子部件之上. 2.可以实现单击 3.连击的情况下,呈现红心的动画效果,并且有红心叠加 4.动画的位置会随着手指的点击位置改变 思路 1.通过GestureDetector来监控手势,在手指抬起的时候记录时间毫秒值,手指再次按下时,通过获取到毫秒值与之前的时间毫秒值的差值,来判断是单击还是呈现红心动画效果. 2.使用Stack部件来确定视图层级,比如说如果要在视频视图上实现点赞效果的话,视频视图部件就作为子部件,置于下层.

  • Android自定义View实现loading动画加载效果

    项目开发中对Loading的处理是比较常见的,安卓系统提供的不太美观,引入第三发又太麻烦,这时候自己定义View来实现这个效果,并且进行封装抽取给项目提供统一的loading样式是最好的解决方式了. 先自定义一个View,继承自LinearLayout,在Layout中,添加布局控件 /** * Created by xiedong on 2017/3/7. */ public class Loading_view extends LinearLayout { private Context m

  • Android自定义View实现简单的圆形Progress效果

    先给大家展示下效果图,如果感觉不错,请参考实现思路: 我们要实现一个自定义的再一个圆形中绘制一个弧形的自定义View,思路是这样的: 先要创建一个类ProgressView,继承自View类,然后重写其中的两个构造方法,一个是一个参数的,一个是两个参数的,因为我们要在xml文件中使用该自定义控件,所以必须要定义这个两个参数的构造函数.创建完了这个类后,我们先不去管它,先考虑我们实现的这个自定义View,我们想让它的哪些部分可以由使用者自己指定,比如说这个Demo中我们让他的外面圆的外边框颜色和宽

  • Android 自定义view实现进度条加载效果实例代码

    这个其实很简单,思路是这样的,就是拿view的宽度,除以点的点的宽度+二个点 之间的间距,就可以算出大概能画出几个点出来,然后就通过canvas画出点,再然后就是每隔多少时间把上面移动的点不断的去改变它的坐标就可以, 效果如下: 分析图: 代码如下: package com.example.dotloadview; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bit

随机推荐