Android 元件(Facebook Shimmer) 如何實現閃亮亮程式碼 文字閃爍效果

心情小品：

現在真的是人生的低潮，相信只要堅持下去 會成功的

跟大家推薦一本常常激勵我的書。

成功的路上並不擁擠 因為堅持的人不多

Facebook Shimmer

Shimmer for Facebook 推薦網站 (點我)
Facebook Shimmer JAR檔案下載位置 (點我)

本章目的：
1.在您專屬的App中 打造出獨特的風味及效果

先來看看運行的結果

讓我們開始實現這個功能吧

Step1： 請先下載FB Shimmer的jar檔 (網址在上方)

將下載的jar檔案 匯入專案

Step2： 參考一下官方的教學 範例 ，可以知道布局大概要怎麼設定

詳細位置：在Layout中 加入4個TextView 並項範例中的撰寫方式
簡單介紹：為了呈現出4種不同的效果，我們在Layout中先做出4個Shimmer View
                     這4個View的id分別為shimmer_view_container 、 shimmer_view_container2
                                                         shimmer_view_container3 、 shimmer_view_container4 

                      程式碼的部分也會用底色讓各位方便區分                                                      

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@android:color/background_dark"
  android:orientation="vertical"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context="com.example.tp1606008.app_function.MainActivity">
  
  <com.facebook.shimmer.ShimmerFrameLayout
      android:id="@+id/shimmer_view_container"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">

      <TextView
          android:id="@+id/tv_message"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="就是要帥~~!!!!"
          android:textColor="@android:color/holo_red_dark"
          android:textSize="50dp" />
  </com.facebook.shimmer.ShimmerFrameLayout>

  <com.facebook.shimmer.ShimmerFrameLayout
      android:id="@+id/shimmer_view_container2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="就是要帥~~!!!!"
          android:textColor="@android:color/holo_purple"
          android:textSize="50dp" />
  </com.facebook.shimmer.ShimmerFrameLayout>

  <com.facebook.shimmer.ShimmerFrameLayout
      android:id="@+id/shimmer_view_container3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="就是要帥~~!!!!"
          android:textColor="@android:color/holo_blue_bright"
          android:textSize="50dp" />
  </com.facebook.shimmer.ShimmerFrameLayout>

  <com.facebook.shimmer.ShimmerFrameLayout
      android:id="@+id/shimmer_view_container4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="就是要帥~~!!!!"
          android:textColor="@android:color/holo_green_light"
          android:textSize="50dp" />
 </com.facebook.shimmer.ShimmerFrameLayout>
</LinearLayout>

Step3： 程式碼實線的部分 新增一個Activity即可

package com.example.app_function;

import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;
import com.facebook.shimmer.ShimmerFrameLayout;

public class MainActivity extends AppCompatActivity {
   private ShimmerFrameLayout mShimmer;
   private ShimmerFrameLayout mShimmer2;
   private ShimmerFrameLayout mShimmer3;
   private ShimmerFrameLayout mShimmer4;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.shimmer_view);
       findId();
       shimmer();
   }

    //Step1：先findViewById找到View
   public void findId(){
       mShimmer  = (ShimmerFrameLayout)findViewById(R.id.shimmer_view_container);
       mShimmer2 = (ShimmerFrameLayout)findViewById(R.id.shimmer_view_container2);
       mShimmer3 = (ShimmerFrameLayout)findViewById(R.id.shimmer_view_container3);
       mShimmer4 = (ShimmerFrameLayout)findViewById(R.id.shimmer_view_container4);
   }

   public void  shimmer(){
       //Step2：開始設定mShimmer效果 (效果的參數 文章下方或官網都也有介紹)
 style="line-height: normal;">       mShimmer.setDuration(5000);
       mShimmer.setRepeatMode(ObjectAnimator.REVERSE);

        //設定mShimmer2效果
       mShimmer2.setBaseAlpha(0.1f);
       mShimmer2.setDropoff(0.1f);
       mShimmer2.setTilt(5);
       mShimmer2.setDuration(4000);

        //設定mShimmer3效果
       mShimmer3.setAngle(ShimmerFrameLayout.MaskAngle.CW_90);
       mShimmer3.setDuration(4000);

        //設定mShimmer4效果
       mShimmer4.setBaseAlpha(0);
       mShimmer4.setDuration(5000);
       mShimmer4.setDropoff(0.1f);
       mShimmer4.setIntensity(0.35f);
       mShimmer4.setMaskShape(ShimmerFrameLayout.MaskShape.RADIAL);
   }

   @Override
   protected void onStart() {
       super.onStart();
   } 

   @Override
   public void onResume() {
       super.onResume();
        //Step3：開始執行 
       mShimmer.startShimmerAnimation();
       mShimmer2.startShimmerAnimation();
       mShimmer3.startShimmerAnimation();
       mShimmer4.startShimmerAnimation();
   }

   @Override
   public void onPause() {
        //Step4：onPause的時候記得暫停
       mShimmer.stopShimmerAnimation();
       mShimmer2.stopShimmerAnimation();
       mShimmer3.stopShimmerAnimation();
       mShimmer4.stopShimmerAnimation();
       super.onPause();
   }
}

Attributes You can control the look and pace of the effect using a number of custom attributes on the ShimmerFrameLayout tag. Alternatively, you can set these values on the layout object itself. For a comprehensive list, check out the API reference Auto Start → setAutoStart(設定是否自動執行) Whether to automatically start the animation when the view is shown, or not. Base Alpha → setBaseAlpha (設定透明度) Alpha used to render the base view i.e. the unhighlighted view over which the highlight is drawn. Duration → setDuration(設定啟動監格的時間) Time it takes for the highlight to move from one end of the layout to the other. Mask Shape → setMaskShape(設定光的形狀) Shape of the highlight mask, either with a linear or a circular gradient. Angle → setAngle (設定閃光的傾斜角度數字有4種 分別呈現不同的方向角度) Angle at which the highlight mask is animated, from left-to-right, top-to-bottom etc. Dropoff → setDropoff (設定光的寬度 比例為整個Shimmer全長 做計算) Controls the size of the fading edge of the highlight. Intensity → setIntensity(設定被光照邊緣的透明度) Controls the brightness of the highlight at the center Repeat Count → setRepeatCount(設定動畫重複的次數) Number of times of the current animation will repeat. Repeat Delay → postDelayed(設定動畫結束 幾秒後要做的事情) ※ (Runnable r , int delayTime) Delay after which the current animation will repeat.

這樣就完成囉 是不是很簡單呢!