Android自定义View实现抖音飘动红心效果

本文实例为大家分享了Android自定义View实现抖音飘动红心效果的具体代码,供大家参考,具体内容如下

自定义View——抖音飘动红心

效果展示

动画效果

使用自定义view完成红心飘动效果

View实现

动画:属性动画(位移+缩放+透明度+旋转)
+
随机数:(属性动画参数+颜色选取)

View

/**
 * 飘心效果
 * 1.创建ImageView
 * 2.ImageView执行组合动画
 * 3.动画执行完成后销毁View
 */
public class FlyHeartView extends RelativeLayout {

  private int defoutWidth = 200;//默认控件宽度
  private long mDuration = 3000;//默认动画时间
  //颜色集合 从中获取颜色
  private int[] color = {
      0xFFFF34B3, 0xFF9ACD32, 0xFF9400D3, 0xFFEE9A00,
      0xFFFFB6C1, 0xFFDA70D6, 0xFF8B008B, 0xFF4B0082,
      0xFF483D8B, 0xFF1E90FF, 0xFF00BFFF, 0xFF00FF7F
  };

  public FlyHeartView(Context context) {
    super(context);
    initFrameLayout();
  }

  public FlyHeartView(Context context, AttributeSet attrs) {
    super(context, attrs);
    initFrameLayout();
  }

  private void initFrameLayout() {
    ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(defoutWidth, ViewGroup.LayoutParams.WRAP_CONTENT);
    setLayoutParams(params);
  }

  /**
   * 创建一个心形的view视图
   */
  private ImageView createHeartView() {
    ImageView heartIv = new ImageView(getContext());
    LayoutParams params = new LayoutParams(defoutWidth / 2, defoutWidth / 2);

    //控件位置
    params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
    params.addRule(RelativeLayout.CENTER_HORIZONTAL);

    heartIv.setLayoutParams(params);
    heartIv.setImageResource(R.mipmap.ic_heart);
    //改变颜色
    heartIv.setImageTintList(ColorStateList.valueOf(color[(int) (color.length * Math.random())]));
    return heartIv;
  }

  /**
   * 执行动画
   * 在展示调用该方法
   */
  public void startFly() {
    final ImageView heartIv = createHeartView();
    addView(heartIv);
    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.play(createTranslationX(heartIv))
        .with(createTranslationY(heartIv))
        .with(createScale(heartIv))
        .with(createRotation(heartIv))
        .with(createAlpha(heartIv));
    //执行动画
    animatorSet.start();
    //销毁view
    animatorSet.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        removeView(heartIv);
      }
    });
  }

  /**
   * 横向正弦位移动画
   *
   * @return
   */
  private Animator createTranslationX(View view) {
    ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationX", 0, (float) (defoutWidth * Math.random() / 4));
    animator.setDuration(mDuration);
    //CycleInterpolator cycles 正弦曲线数
    animator.setInterpolator(new CycleInterpolator((float) (3 * Math.random())));
    return animator;
  }

  /**
   * 纵向加速位移动画
   *
   * @return
   */
  private Animator createTranslationY(View view) {
    ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationY", 0, -1000);
    animator.setDuration(mDuration);
    animator.setInterpolator(new AccelerateInterpolator());
    return animator;
  }

  /**
   * 加速放大动画
   *
   * @return
   */
  private Animator createScale(View view) {
    ObjectAnimator animatorX = ObjectAnimator.ofFloat(view, "scaleX", 1, 1.5f);
    ObjectAnimator animatorY = ObjectAnimator.ofFloat(view, "scaleY", 1, 1.5f);
    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.setDuration(mDuration);
    animatorSet.setInterpolator(new AccelerateInterpolator());
    animatorSet.play(animatorX).with(animatorY);
    return animatorSet;
  }

  /**
   * 透明度动画
   *
   * @return
   */
  private Animator createAlpha(View view) {
    ObjectAnimator animator = ObjectAnimator.ofFloat(view, "alpha", 1, 0.1f);
    animator.setDuration(mDuration);
    animator.setInterpolator(new AccelerateInterpolator());
    return animator;
  }

  /**
   * 旋转动画
   *
   * @return
   */
  private Animator createRotation(View view) {
    ObjectAnimator animator = ObjectAnimator.ofFloat(view, "rotation", 0, (float) (25f * Math.random()));
    animator.setDuration(mDuration);
    animator.setInterpolator(new CycleInterpolator((float) (6 * Math.random())));
    return animator;
  }

}

最后在MainActivity中调用FlyHeartView 的startFly()方法就能实现点击飘心效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-05-27

Android控件实现直播App特效之点赞飘心动画

现在市面上直播类的应用可以说是一抓一大把,随随便便就以什么主题来开发个直播App,说白了就想在这领域分杯羹.在使用这些应用过程中其实不难发现,在所有的直播界面,少不了的就是各种打赏.各种点赞.今天自己就针对点赞功能敲了一下,代码不多,主要是涉及到动画运动轨迹运算,这里需借助 贝塞尔曲线 相关知识,我使用三阶贝塞尔曲线来实现轨迹动画. 运行效果 一.具体实现流程 仔细分析整个点赞过程可以发现,首先是"爱心"的出现动画,然后是"爱心"以类似气泡的形式向上运动. &quo

android实现直播点赞飘心动画效果

前段时间在写直播的时候,需要观众在看直播的时候点赞的效果,在此参照了腾讯大神写的点赞(飘心动画效果).下面是效果图: 1.自定义飘心动画的属性 在attrs.xml 中增加自定义的属性 <!-- 飘心动画自定义的属性 --> <declare-styleable name="HeartLayout"> <attr name="initX" format="dimension"/> <attr name=&

Android仿直播特效之点赞飘心效果

本文实例为大家分享了Android实现点赞飘心效果的具体代码,供大家参考,具体内容如下 一.概述 老规矩先上图 好了,基本就是这个样子,录完的视频用格式工厂转换完就这个样子了,将就看吧 二.定义我们自己的Layout /** * @author 刘洋巴金 * @date 2017-4-27 * * 定义我们自己的布局 * */ public class LoveLayout extends RelativeLayout{ private Context context; private Layo

vue实现直播间点赞飘心效果的示例代码

前言: 在开发公司项目的时候,遇到了直播间的一些功能,其中点赞冒泡飘心,就折腾了好久,canvas学的不好,自己写不来,百度找了一堆都是js原生写法,迁移到vue项目里来好多问题,百度也解决不了.自己试着慢慢解决,竟然在不知不觉中通了!废话不多说,直接上代码,复制粘贴即可使用 示例: 不动就不动吧.png ```第一步```:先在外部新建一个js文件,取名index.js(名字自己随便取) index.js代码内容如下: /** * LikeHeart * @version: 1.0.0 * @

Android 仿微信朋友圈点赞和评论弹出框功能

贡献/下载源码:https://github.com/mmlovesyy/PopupWindowDemo 本文简单模仿微信朋友圈的点赞和评论弹出框,布局等细节请忽略,着重实现弹出框.发评论,及弹出位置的控制. 1. 微信弹出框 微信朋友圈的点赞和评论功能,有2个组成部分: 点击左下角的"更多"按钮,弹出对话框: 点击评论,弹出输入框,添加评论并在页面中实时显示: 微信朋友圈点赞和评论功能 2. 实际效果 本文将建一个 ListView,在其 Item 中简单模仿微信的布局,然后着重实现

Android仿直播类app赠送礼物功能

直播界面 实现的是播放本地的视频文件: /** * 直播界面,用于对接直播功能 */ public class LiveFrag extends Fragment { private ImageView img_thumb; private VideoView video_view; @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup containe

js实现直播点击飘心效果

本文实例为大家分享了js实现直播点击飘心效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>直播点击飘心效果</title> <style type="text/css"> html, body { height: 100%; position: relative; widt

Android仿简书长按文章生成图片效果

前言 使用简书APP的同学都知道,简书有这样一个功能:文章页长按内容时底部会出现一个 生成图片分享 的按钮,点击之后就可以将当前的文章生成一张长图片:这张图片可以保存到本地或分享给好友,同时还可为图片设置成为白和黑两种风格,很有艺术范.个人一直很喜欢这个功能. 但是从某一个版本开始,这个功能开始有bug了,生成的图片只有底部的固定标题,而没有文章内容,长图也变成了小短图.向简书意见反馈后,得到的回复是,使用点击分享按钮生成图片功能:分享菜单包含的生成长图功能的确是可以的.但是,还是很怀念之前长按

Android仿微信图片点击全屏效果

废话不多说,先看下效果: 先是微信的 再是模仿的 先说下实现原理,再一步步分析 这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Intent传送,素材内容均来自网络,(感谢聪明的蘑菇) 图片都是Glide异步下的,下的,下的重要的事情说三次,然后就是用动画做放大操作然后显示出来了(并没有做下载原图的实现,反正也是一样 下载下来Set上去而且动画都不需要更简便). OK,我们来看分析下 obj,目录下分别创建了2个对象,一个用来使用来处理显示页面的图片尺寸信息以

Android仿支付宝中余额宝的数字动画效果

实现效果图: 下面是具体代码,可直接复制: package com.lcw.rabbit.widget; import android.animation.ObjectAnimator; import android.content.Context; import android.text.TextUtils; import android.util.AttributeSet; import android.view.animation.AccelerateDecelerateInterpola