仿D球首頁挖礦動畫

前言

 

什麼是D球？？？

D球是一個基於區塊鏈的行業生態價值共享平臺。那這個D球到底是幹什麼的呢？？？如果你感興趣的話 可以點擊D球進行詳細瞭解。

 

不談這個了，我們說說接下來，D球首頁這個動畫如何實現呢？？效果圖如下：

 

一臉恍然！！！我們都知道Android有4種動畫：

AlphaAnimation 透明度動畫效果
ScaleAnimation 縮放動畫效果
TranslateAnimation 位移動畫效果
RotateAnimation 旋轉動畫效果

那我們先分析一下這個動畫效果，既不是左右搖擺，也不是上下移動，在這裏我們發現他它以某一個角度重複擺動， 如下圖：

  4種動畫要實現這種挖礦的效果，好像~ 彷彿~~~RotateAnimation 可以實現，那麼如何實現呢？？？？我就開始翻着看源碼啊！！！！

 /**
     * Constructor to use when building a RotateAnimation from code
     * 
     * @param fromDegrees Rotation offset to apply at the start of the
     *        animation.
     * 
     * @param toDegrees Rotation offset to apply at the end of the animation.
     * 
     * @param pivotXType Specifies how pivotXValue should be interpreted. One of
     *        Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or
     *        Animation.RELATIVE_TO_PARENT.
     * @param pivotXValue The X coordinate of the point about which the object
     *        is being rotated, specified as an absolute number where 0 is the
     *        left edge. This value can either be an absolute number if
     *        pivotXType is ABSOLUTE, or a percentage (where 1.0 is 100%)
     *        otherwise.
     * @param pivotYType Specifies how pivotYValue should be interpreted. One of
     *        Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or
     *        Animation.RELATIVE_TO_PARENT.
     * @param pivotYValue The Y coordinate of the point about which the object
     *        is being rotated, specified as an absolute number where 0 is the
     *        top edge. This value can either be an absolute number if
     *        pivotYType is ABSOLUTE, or a percentage (where 1.0 is 100%)
     *        otherwise.
    物體所在點的Y座標
     * 正在旋轉，指定爲絕對值，其中0是
     * 頂部邊緣。如果。這個值可以是一個絕對值
     * pivotYType是絕對類型，或百分比(其中1.0是100%)
     * 否則。
     */
    public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
            int pivotYType, float pivotYValue) {
        mFromDegrees = fromDegrees;
        mToDegrees = toDegrees;

        mPivotXValue = pivotXValue;
        mPivotXType = pivotXType;
        mPivotYValue = pivotYValue;
        mPivotYType = pivotYType;
        initializePivotPoint();
    }

    /**

 

int pivotXType,  動畫在X軸相對於物件位置類型，與下面的pivotXValue結合，確定X軸上旋轉中心。

可能值爲：Animation.ABSOLUTE，Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_PARENT

pivotXType=Animation.ABSOLUTE，則此參數爲旋轉中心在屏幕上X軸的值；

pivotXType=Animation.RELATIVE_TO_PARENT，則參數pivotXValue爲旋轉中心在父控件水平位置百分比，如0.5表示在父控件水平方向中間位置；
pivotXType=Animation.RELATIVE_TO_SELF，則參數pivotXValue爲旋轉中心在控件自身水平位置百分比；

X和Y的Value都設置爲0.5，則該控件以自身中心旋轉。

---

 參數：

fromDegrees  旋轉的起始點(旋轉開始的角度)

toDegrees     旋轉的結束點(旋轉最終角度)

pivotX       旋轉點的X值(距離左側的偏移量)

ivotY旋轉點的Y值(距離頂部的偏移量)

---

實現步驟：

1.mini.xml佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/img_mining"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/icon_drag" />

    <TextView
        android:id="@+id/tv_producting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:gravity="center"/>
</LinearLayout>

2.自定義View:（MiningAnimalView）

public class MiningAnimalView extends RelativeLayout {



    private int childImgId;

    private float childValueSize;
    private ImageView defaulImgtView;
    private TextView defaulTitletView;
    private TextView defaulValuetView;
    private String defaultTitleText;
    private String defaultValueText;
    public LinearLayout defaultView;
    private PathMeasure mPathMeasure;
    private Context mcontext;
    private int parentImgId;
    private int textColor;
    private int valueColor;


    public MiningAnimalView(Context paramContext, AttributeSet paramAttributeSet) {
        super(paramContext, paramAttributeSet);
        this.mcontext = paramContext;
        TypedArray typedArray = getContext().obtainStyledAttributes(paramAttributeSet, R.styleable.myFloatView);
        this.valueColor = typedArray.getColor(R.styleable.myFloatView_valueColor, Color.BLUE);
        this.textColor = typedArray.getColor(R.styleable.myFloatView_valueColor, Color.WHITE);
        this.childValueSize = typedArray.getDimension(R.styleable.myFloatView_childValueSize, 12.0F);
        this.childImgId = typedArray.getResourceId(R.styleable.myFloatView_childValueSize, 80);
        this.parentImgId = typedArray.getResourceId(R.styleable.myFloatView_parentImgId, 80);
        this.defaultTitleText = typedArray.getString(R.styleable.myFloatView_defaultTitleText);
        this.defaultValueText = typedArray.getString(R.styleable.myFloatView_defaultValueText);
        typedArray.recycle();
    }


    private void init() {
        setDefaultView();
    }

    private void initAnim(View paramView) {
        paramView.animate().alpha(1.0F).scaleX(1.0F).scaleY(1.0F).setDuration(1000L).start();
    }


    private void setDefaultView() {
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(-1, -1);
        this.defaultView = (LinearLayout) LayoutInflater.from(this.mcontext).inflate(R.layout.mini, this, false);
        this.defaulImgtView = (ImageView) this.defaultView.findViewById(R.id.img_drag);
        this.defaulTitletView = (TextView) this.defaultView.findViewById(R.id.tv_producting);
        this.defaulTitletView.setTextColor(this.textColor);
        this.defaulTitletView.setText("生產中...");
        this.defaulImgtView.setImageResource(R.mipmap.icon_drag);
        defaultView.setGravity(Gravity.CENTER);
        addView(this.defaultView, layoutParams);
        initAnim(this.defaultView);
        RotateAnimation rotateAnimation = new RotateAnimation(-40.0F, 20.0F, Animation.RELATIVE_TO_SELF, 0.5F, 1, 0.5F);
        rotateAnimation.setInterpolator(new LinearInterpolator());
        rotateAnimation.setDuration(1000L);
        rotateAnimation.setRepeatCount(-1);
        rotateAnimation.setFillAfter(true);
        rotateAnimation.setStartOffset(10L);
        rotateAnimation.setRepeatMode(2);
        this.defaulImgtView.setAnimation(rotateAnimation);
    }




    public void setList() {
        post(new Runnable() {
            public void run() {
                MiningAnimalView.this.init();
            }
        });
    }

}

3.attr.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="myFloatView">
        <attr name="valueColor" format="color" />
        <attr name="textColor" format="color" />
        <attr name="childValueSize" format="dimension" />
        <attr name="child_img_id" format="reference"/>
        <attr name="parentImgId" format="reference"/>
        <attr name="defaultTitleText" format="string"/>
        <attr name="defaultValueText" format="string"/>
        <!--<attr name="indicator_animator" format="reference" />-->
        <!--<attr name="indicator_animator_reverse" format="reference" />-->
    </declare-styleable>
</resources>

4.Activity調用

public class MiningActivity extends BaseActivity  {

    private MiningAnimalView mFloatView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mainmmm);

        initView();
    }

    private void initView() {
        mFloatView = (MiningAnimalView) findViewById(R.id.float_view);
        mFloatView.setList();
    }

}

解釋：

 

rotateAnimation.setDuration(1000L)	設置動畫持續時間
rotateAnimation.setRepeatCount(-1)	設置重複次數
rotateAnimation.setFillAfter(true)	動畫執行完後是否停留在執行完的狀態
rotateAnimation.setStartOffset(10L)	執行前的等待時間

原文鏈接 https://blog.csdn.net/u014133119/article/details/101207120