Android自定義FloatingText仿點(diǎn)贊+1特效

更新時(shí)間：2018年03月28日 15:13:09 作者：gooqii

這篇文章主要為大家詳細(xì)介紹了Android自定義FloatingText仿點(diǎn)贊+1特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android自定義View，可以仿點(diǎn)贊往上飄+1的一個(gè)特效，或者點(diǎn)擊加入購(gòu)物車商品拋物線特效。

FloatingText 是一個(gè)能夠在任何控件之上執(zhí)行漂浮效果動(dòng)畫的控件。

原文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") // 浮字體的內(nèi)容
  .offsetX(100) // FloatingText 相對(duì)其所貼附View的水平位移偏移量
  .offsetY(100) // FloatingText 相對(duì)其所貼附View的垂直位移偏移量
  .floatingAnimatorEffect(FloatingAnimator) // 漂浮動(dòng)畫
  .floatingPathEffect(FloatingPathEffect) // 漂浮的路徑
  .build();

floatingText.attach2Window(); //將FloatingText貼附在Window上

//啟動(dòng)漂浮效果
floatingText.startFloating(View); // 傳入一個(gè)View，F(xiàn)loatingText 就會(huì)相對(duì)于這個(gè)View執(zhí)行漂浮效果

自定義漂浮動(dòng)畫
通過(guò)實(shí)現(xiàn) FloatingAnimator 接口可以實(shí)現(xiàn)自定義漂浮動(dòng)畫，詳情查看原github。

自定義漂浮路徑

通過(guò)實(shí)現(xiàn) FloatingPathEffect 和 FloatingPathAnimator 可以自定義路徑動(dòng)畫

FloatingPath 代表浮動(dòng)路徑

JAVA

// +1 向上移動(dòng)效果
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);
      }
    });


//自定義 螺旋上升動(dòng)畫
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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: