Imitating D-ball Homepage Mining Animation

Keywords: Android xml encoding

Preface

 

What is a D ball???

D-ball is an industry ecological value sharing platform based on block chain. What on earth is this D-ball for??? If you're interested, you can. Click D ball. Detailed understanding.

 

Let's not talk about this. Let's talk about how to realize the animation of D ball home page? The results are as follows:

 

A sudden look!!! We all know that Android has four animations:

Alpha Animation Transparency Animation Effect
Scale Animation Zoom Animation Effect
Translate Animation Displacement Animation Effect
Rotate Animation Rotation Animation Effect

Let's first analyze the effect of this animation, which is neither swinging left or right, nor moving up and down. Here we find that it repeatedly swings at a certain angle, as follows:

Four kinds of animation to achieve this mining effect, as if ~Rotate Animation can be achieved, then how to achieve it???? I started looking at the source code!!!!

 /**
     * 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-coordinates of the point where the object is located
     * Rotating, specified as absolute, where 0 is
     * Top edge. If so. This value can be an absolute value.
     * pivotYType Absolute type, or percentage (1.0 is 100%)
     * Otherwise.
     */
    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 pivot XType, the position type of the animation relative to the object on the X axis, combined with the pivot XValue below, determines the rotation center on the X axis.

Possible values: Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_PARENT

pivotXType=Animation.ABSOLUTE, then this parameter is the value of the X axis of the rotation center on the screen.

pivotXType=Animation.RELATIVE_TO_PARENT, then pivotXValue is the percentage of the rotation center in the horizontal position of the parent control, as 0.5 indicates the middle position in the horizontal direction of the parent control.
pivotXType=Animation.RELATIVE_TO_SELF, then pivotXValue is the percentage of the rotation center in the horizontal position of the control itself.

Value of X and Y is set to 0.5, then the control rotates in its own center.

Parameters:

fromDegrees The starting point of rotation (the angle at which the rotation begins)

toDegrees The end point of the rotation (the final angle of rotation)

pivotX The X value of the rotation point (offset from the left)

Y value of ivotY rotation point (offset from the top)

Implementation steps:

1.mini.xml layout

<?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. Custom View:(Mining Animal View)

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("In production...");
        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 file

<?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 calls

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();
    }

}

Interpretation:

 

 rotateAnimation.setDuration(1000L) Set animation duration
rotateAnimation.setRepeatCount(-1) Set the number of repetitions.
rotateAnimation.setFillAfter(true) Whether the animation stays in the state of execution after execution
rotateAnimation.setStartOffset(10L) Waiting time before execution

Original link https://blog.csdn.net/u014133119/article/details/101207120

Posted by MrTL on Mon, 23 Sep 2019 01:53:43 -0700