Android自定义FloatingText仿点赞+1特效

本文实例为大家分享了Android自定义View,可以仿点赞往上飘+1的一个特效,或者点击加入购物车商品抛物线特效。

FloatingText 是一个能够在任何控件之上执行漂浮效果动画的控件。

原文github地址

效果图

1. AndroidStudio使用

dependencies {

  compile 'com.ufreedom.uikit:FloatingTextLibrary:0.2.0'

}

2. 使用

FloatingText  floatingText = new FloatingText.FloatingTextBuilder(Activity)
  .textColor(Color.RED) // 漂浮字体的颜色
  .textSize(100)  // 浮字体的大小
  .textContent("+1000") // 浮字体的内容
  .offsetX(100) // FloatingText 相对其所贴附View的水平位移偏移量
  .offsetY(100) // FloatingText 相对其所贴附View的垂直位移偏移量
  .floatingAnimatorEffect(FloatingAnimator) // 漂浮动画
  .floatingPathEffect(FloatingPathEffect) // 漂浮的路径
  .build();

floatingText.attach2Window(); //将FloatingText贴附在Window上

//启动漂浮效果
floatingText.startFloating(View); // 传入一个View,FloatingText 就会相对于这个View执行漂浮效果

自定义漂浮动画
通过实现 FloatingAnimator 接口可以实现自定义漂浮动画,详情查看原github。

自定义漂浮路径

通过实现 FloatingPathEffect 和 FloatingPathAnimator 可以自定义路径动画

FloatingPath 代表浮动路径

JAVA

// +1 向上移动效果
final View layoutTranslateFloating = findViewById(R.id.layoutTranslateView);
final View translateFloatingView = findViewById(R.id.translateView);
final FloatingText  translateFloatingText = new FloatingText.FloatingTextBuilder(MainActivity.this)
        .textColor(Color.RED)
        .textSize(100)
        .textContent("+1")
        .build();
    translateFloatingText.attach2Window();

    assert layoutTranslateFloating != null;
    layoutTranslateFloating.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        translateFloatingText.startFloating(translateFloatingView);
      }
    });

//+1 放大效果

View layoutScaleView = findViewById(R.id.layoutScaleView);
final View scaleView = findViewById(R.id.scaleView);
final FloatingText scaleFloatingText = new FloatingText.FloatingTextBuilder(MainActivity.this)
        .textColor(Color.parseColor("#7ED321"))
        .textSize(100)
        .offsetY(-100)
        .floatingAnimatorEffect(new ScaleFloatingAnimator())
        .textContent("+1")
        .build();
    scaleFloatingText.attach2Window();

    assert scaleView != null;
    assert layoutScaleView != null;
    layoutScaleView.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        scaleFloatingText.startFloating(scaleView);
      }
    });

//自定义 螺旋上升动画
final FloatingText cubicFloatingText = new FloatingText.FloatingTextBuilder(MainActivity.this)
        .textColor(Color.RED)
        .textSize(100)
        .floatingAnimatorEffect(new CurvePathFloatingAnimator())
        .floatingPathEffect(new CurveFloatingPathEffect())
        .textContent("Hello! ")
        .build();
    cubicFloatingText.attach2Window();

    View layoutCurveView = findViewById(R.id.layoutCurveView);
    final View curveView = findViewById(R.id.curveView);
    assert curveView != null;
    assert layoutCurveView != null;
    layoutCurveView.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        cubicFloatingText.startFloating(curveView);
      }
    });

XML

<FrameLayout
    android:id="@+id/layoutTranslateView"
    android:layout_width="234.4dp"
    android:layout_height="80dp"
    android:layout_alignParentLeft="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="50dp"
    >

    <TextView
      android:id="@+id/translateView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_horizontal"
      android:layout_marginTop="20dp"
      android:text="Translate Floating"
      android:textColor="@android:color/white" />

  </FrameLayout>

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

(0)

相关推荐

  • Android项目开发 教你实现Periscope点赞效果

    现在视频应用越来越火,Periscope火起来后,国内也出现了不少跟风者,界面几乎跟Periscope一模一样.Periscope确实不错,点赞的效果也让人眼前一亮,很漂亮,于是乎,我就想着自己实现一下. 最终的效果图如下: 最终效果图.gif 录制的效果不太好,手机运行起来还是挺好看的. 不能说一模一样,但是也差不多了吧!~ 惯例: 通过本文你将学习到什么? 自定义view的一些基础方法以及一些注意点 随机数的使用 插补器的使用 属性动画的高级用法 贝塞尔曲线在Android中的实现以及应用

  • 简单实用的Android UI微博动态点赞效果

    说起空间动态.微博的点赞效果,网上也是很泛滥,各种实现与效果一大堆.而详细实现的部分,讲述的也是参差不齐,另一方面估计也有很多大侠也不屑一顾,觉得完全没必要单独开篇来写和讲解吧.毕竟,也就是两个view和一些简单的动画效果罢了. 单若是只讲这些,我自然也是不愿花这番功夫的.虽然自己很菜,可也不甘于太菜.所以偶尔看到些好东西,可以延伸学写下,我还是很情愿拿出来用用,顺带秀一秀逼格什么的. 不扯太多,先说说今天实现点赞效果用到的自以为不错的两个点: Checkable 用来扩展View实现选中状态切

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

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

  • Android PraiseTextView实现朋友圈点赞功能

    PraiseTextView 说明 我是将朋友圈分成了几个独立模块单独自定义的View,通过回调完成交互,耦合性算是非常低了,主要有以下及部分: 1.评论布局(自定义TextView) CommentListTextView Lu_PingLunLayout 2.点赞布局(原理和评论的自定义TextView一样,都是用的SpannableString) PraiseTextView 3.图片列表(出门右转,理论上没有数量限制,和listView配合使用也很好,缓存也自己处理了) MultiIma

  • Android实现点赞动画(27)

    本文实例为大家分享了Android使用入门第二十七篇点赞动画的具体代码,供大家参考,具体内容如下 MainActivity.java代码: package siso.likeanimation; import android.graphics.Bitmap; import android.graphics.PointF; import android.graphics.drawable.BitmapDrawable; import android.support.v4.content.res.R

  • Android实现朋友圈点赞列表

    本文实例为大家分享了Android朋友圈点赞列表的具体代码,供大家参考,具体内容如下 Android实现朋友圈评论回复列表 Android实现朋友圈点赞列表 Android实现朋友圈多图显示功能 正文 效果图: 具体实现代码 LikesView public class LikesView extends TextView { private Context mContext; private List<UserBean> list; public LikesView(Context cont

  • Android贝塞尔曲线实现直播点赞效果

    本文实例为大家分享了Android实现直播点赞效果的具体代码,供大家参考,具体内容如下 效果展示 原理分析 点赞效果最主要的难点和原理在于贝塞尔曲线动画的生成,我们通过图片主要讲解贝塞尔曲线动画 1.需要找到贝塞尔曲线的四个点 2.通过三级贝塞尔曲线的公式计算,获取贝塞尔曲线的轨迹路径点 3.通过设置点赞图片X,Y坐标,从而形成点赞的效果 实现步骤 1.初始化变量 //1.继承RelativeLayout public class ChristmasView extends RelativeLa

  • Android listview点赞问题分析

    最近这段时间一直在看Android,利用Listview去实现点赞功能 基本思路: 进入界面–>获取数据–> 在Listview中显示–> 通过map集合(position,boolean)保存每一行是否被点击–> 利用实体类去保存相应的对象–> get/set方法进行相应值得改变–> 点击一次,相应的数量加1 只实现了点赞功能,踩和赞基本类似. 具体实现如下: 继承自BaseAdapter package com.gz.test_listview; import an

  • Android中Listview点赞功能的实现

    最近这段时间一直在看Android,利用Listview去实现点赞功能,下面给大家介绍下基本思路. 基本思路: 进入界面–>获取数据–> 在Listview中显示–> 通过map集合(position,boolean)保存每一行是否被点击–> 利用实体类去保存相应的对象–> get/set方法进行相应值得改变–> 点击一次,相应的数量加1 只实现了点赞功能,踩和赞基本类似. 具体实现如下: 继承自BaseAdapter package com.gz.test_listv

  • Android中使用PopupWindow 仿微信点赞和评论弹出

    微信朋友圈的点赞和评论功能,有2个组成部分:左下角的"更多"按钮:点击该按钮后弹出的对话框: PopupWindow,弹出框使用PopupWindow实现,这是点赞和评论的载体,具体要涉及 PopupWindow 点击非窗口位置和再次点击消失以及显示位置的问题(根据相应更多按钮的位置确定 PopupWindow 的显示位置 package com.example.cmm.helloworld; import android.app.AlertDialog; import android

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

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

  • Android使用SurfaceView实现飘赞动画

    最近做直播项目,需要实现点赞动画,一提起动画就想到了使用View的属性动画,后来想了一下,那么多用户点赞,会导致屏幕上出现很多View,开销太大,一定会很卡,所以看主流主播软件用什么方案解决的. 于是反编译了映客apk,大概看了一下,它的点赞只用了一个SurfaceView,每个心都是实时画到画布上去的,这样效率确实很高,再多的心也不怕了.思路有了,但是自己从头到尾写毕竟麻烦,后来上网查了是否有其他人已经做好了呢?果然有现成的,思路很清晰,很简洁,根据自己的需求改一改就好了. 前面说了一堆,主要

  • Android自定义ViewGroup实现堆叠头像的点赞Layout

    简介 这样的点赞列表怎么样?之前做社区的时候也有类似的点赞列表,但是没有这样重叠,一个小小的改变,个人感觉逼格提高不少. 这个很有规则,就是后一个头像会覆盖一部分到前一个头像上,头像多了就像一串糖葫芦了. 这个实现起来不难,自定义ViewGroup,关键重写onLayout方法. 关于自定义控件的基础知识可以看一看这个,整理的很详细: https://github.com/GcsSloop/AndroidNote 实现 自定义属性 属性名 说明 默认值 vertivalSpace 行距 4dp

随机推荐