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

 更新时间:2020年05月29日 09:14:50   作者:汪星没有熊  
这篇文章主要为大家详细介绍了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()方法就能实现点击飘心效果。

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

相关文章

  • 图文详解Flutter单例的实现

    图文详解Flutter单例的实现

    一个类只允许创建一个实例,那这个类就是一个单例类,这种设计模式就叫作单例设计模式,简称单例模式,下面这篇文章主要给大家介绍了关于Flutter单例的实现方法,需要的朋友可以参考下
    2021-12-12
  • Android选择与上传图片之Matisse教程

    Android选择与上传图片之Matisse教程

    这篇文章主要介绍了在Android中对于图片的选择与上传方法,本文介绍了Matisse的相关使用教程,学习Android的同学进来看看吧
    2021-08-08
  • Android 矢量室内地图开发实例

    Android 矢量室内地图开发实例

    这篇文章主要介绍了Android 矢量室内地图开发实例的相关资料,这里提供代码实例,及实现效果图,矢量室内对图简单DEMO,需要的朋友可以参考下
    2016-11-11
  • Android蓝牙服务查找附近设备分析探索

    Android蓝牙服务查找附近设备分析探索

    这篇文章主要介绍了Android蓝牙服务实现查找附近设备,了解内部原理是为了帮助我们做扩展,同时也是验证了一个人的学习能力,如果你想让自己的职业道路更上一层楼,这些底层的东西你是必须要会的
    2023-01-01
  • Kotlin this关键字的使用实例详解

    Kotlin this关键字的使用实例详解

    这篇文章主要介绍了Kotlin this关键字的使用实例,在Kotlin中,this关键字允许我们引用一个类的实例,该类的函数恰好正在运行。此外,还有其他方式可以使this表达式派上用场
    2023-02-02
  • Android的异步任务AsyncTask详解

    Android的异步任务AsyncTask详解

    本文给大家介绍的是Android的异步任务AsyncTask,在Android中实现异步任务机制有两种方式,Handler和AsyncTask。今天我们先来主要谈下ASYNCTASK。
    2015-07-07
  • Android Studio设置主题与字体大小图文教程

    Android Studio设置主题与字体大小图文教程

    这篇文章通过图文详细的给大家介绍了Android Studio中如何设置主题与字体大小,文章介绍的非常详细,相信对大家学习使用Android Studio具有一定的参考借鉴价值,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • Android编程开发之EditText实现输入QQ表情图像的方法

    Android编程开发之EditText实现输入QQ表情图像的方法

    这篇文章主要介绍了Android编程开发之EditText实现输入QQ表情图像的方法,涉及Android多媒体文件及EditText的相关操作技巧,需要的朋友可以参考下
    2015-12-12
  • android杂记:C++文件的添加log方法分享

    android杂记:C++文件的添加log方法分享

    这篇文章介绍了android杂记:C++文件的添加log方法,有需要的朋友可以参考一下
    2013-09-09
  • Android自定义view制作抽奖转盘

    Android自定义view制作抽奖转盘

    这篇文章主要为大家详细介绍了Android自定义view制作抽奖转盘,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12

最新评论