ViewStub在呼吸動畫上面的應用

原創

cwpwenwen888

2020-02-20 16:01

源碼地址：https://github.com/chenwenping863/ViewDemo.git

1、xml佈局

在FrameLayout xml佈局中，先定義的view是位於底層的。。。所以，將ViewStub空間當做TextView的背景。。。在實際控制動畫的時候，只需要放大或縮小ViewStub即可。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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: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.chenwenping.animationdemo.AnimationActivity">

    <FrameLayout
        android:id="@+id/textview_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ViewStub
            android:id="@+id/viewstub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:layout="@layout/text_back"/>

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="文"
            android:textSize="30dp"
            android:textColor="#ffffff"
            android:gravity="center"
            android:layout_margin="20dp"
            android:background="@drawable/textview_bg_shape"/>
    </FrameLayout>


</FrameLayout>

viewStub 的layout代碼：

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/text_back_back"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/textview_bg_shape"/>

textView 背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="#e12aa9" />
    <size android:width="50dp" android:height="50dp" />

</shape>

2、java代碼實現

對ViewStub進行操作的時候，需要先對其進行inflate()

package com.example.chenwenping.animationdemo;

import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.ViewStub;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.FrameLayout;
import android.widget.TextView;

public class AnimationActivity extends AppCompatActivity {

    private Animation textAnimation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation);

        FrameLayout textContainer = (FrameLayout) findViewById(R.id.textview_container) ;

        ((ViewStub) textContainer.findViewById(R.id.viewstub)).inflate();
        final TextView textView = (TextView) findViewById(R.id.text_back_back);
        textContainer.postDelayed(new Runnable() {
            @Override
            public void run() {
                startBlinkAnimation(textView);
            }
        }, 1000);
    }

    private void startBlinkAnimation(TextView textView) {
        if (textAnimation == null) {
            textAnimation = AnimationUtils.loadAnimation(this, R.anim.view_blink);
        }
        textView.startAnimation(textAnimation);
    }
}

3、動畫xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:shareInterpolator="true"
    android:duration="1500">

    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.01"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        />

    <scale
        android:fromXScale="1.0"
        android:toXScale="1.45"
        android:fromYScale="1.0"
        android:toYScale="1.45"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>