Android VectorDrawable與SVG 實現炫酷動畫

Android 從 5.0 提供了新的API VectorDrawable,通過該對象，我們可以使用矢量圖SVG。

在編寫xml文件中，通過關鍵的幾個標簽節點，,完成對SVG 的編寫以及動畫的實現。

下面我們將實現兩個例子來演示VectorDrawable和SVG的使用。先上實現的效果圖。

登錄特效

搜索特效

登錄特效的實現

首先需要分析該特效。根據整個動畫，整個特效對應的SVG 圖案如下所示：

整個圖案分為五個部分，兩條橫線，兩個半圓，以及一個對號。為了凸顯，所以把顏色稍微修改了一下。

那麼使用定義xml文件，實現如上圖案。

edit_login.xml ：該文件存放在res-> drawable文件夾下。

如上代碼，我們可以通過Android Studio的預覽效果，直接看到圖案。

在代碼中出現了兩個標簽,.

：用於定義整個畫布。

:用於畫出具體的圖案，類似於畫筆。

圖案畫出以後，需要針對該圖案做動畫，整個圖案過程分為三個：

當然，還很很多的用戶交互，在此不再做實現。

根據上面的順序，分別定義anim1.xml,anim2.xml,anim3.xml。注意，該文件存在drawable中。ps: 無視命名.

anim1.xml

anim2.xml

anim3.xml

在三個文件中，最外層進行包裹，該文件的作用類似於溝通的作用，將SVG和動畫相整合，產生新的drawable。

:對於SVG中的每一個定義不同的動畫。

在其中定義了n多個動畫。默認顯示和默認不顯示的動畫（此時沒有動畫效果）.ps: 動畫定義的都是屬性動畫，所以需要放在animator文件夾中。

anim_default.xml 默認顯示

動畫屬性trimPathEnd這個字段之前未出現過。它也是的一個屬性，其決定的是節點所畫出線條顯示的百分比。 0~1 代表 從開始到結束顯示的百分比。

同時也有一個trimPathStart，這個字段顯示的也是百分比。不過其表示的是不顯示的百分比。0~1代表從開始隱藏的百分比。

anim_default_gone.xml 默認隱藏

anim_bar_fill.xml —–1 的顯示動畫。

anim_bar_empty.xml —–1 的隱藏動畫。

anim_round.xml – 2 的顯示動畫

anim_aa.xml – 3 的顯示動畫

anim_round2.xml – 4 的顯示動畫

anim_bar_fill2.xml – 5 的顯示動畫

如上的代碼已經實現了圖片以及動畫的實現。下面就是使用，首先看布局文件：

兩個文本框之間要有間隔，用以顯示我們的動畫。

由於文本框的存在，導致打開頁面是自動彈出鍵盤，所以把焦點定在了ImageView上，防止打開頁面時自動彈出軟鍵盤。

/**
 * SVG 動畫
 * Created by MH on 2016/7/19.
 */
public class SVGMainActivity extends AppCompatActivity implements View.OnFocusChangeListener, TextWatcher {


    private ImageView img1;

    private EditText edit1, edit2;

    // 顯示
    private AnimatedVectorDrawable anim1, anim2, anim3;


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


        img1 = ((ImageView) findViewById(R.id.img1));
        edit1 = ((EditText) findViewById(R.id.edit1));
        edit2 = ((EditText) findViewById(R.id.edit2));

        // 加載SVG
        anim1 = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim1);
        anim2 = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim2);
        anim3 = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim3);

        // 設置焦點變化的監聽
        edit1.setOnFocusChangeListener(this);
        edit2.setOnFocusChangeListener(this);

        // 文本變化的監聽
        edit1.addTextChangedListener(this);
    }


    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        switch (v.getId()) {
            case R.id.edit1:
                if (hasFocus) {
                    img1.setImageDrawable(anim1);
                    anim1.start();
                }
                break;
            case R.id.edit2:
                if (hasFocus) {
                    img1.setImageDrawable(anim3);
                    anim3.start();
                }
                break;
        }

    }

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {

    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {

    }

    @Override
    public void afterTextChanged(Editable s) {
        // 內容變化之後，判斷內容
        if (!TextUtils.isEmpty(s) && edit1.getText().toString().trim().equals("1234")) {
            Toast.makeText(SVGMainActivity.this, "right", Toast.LENGTH_SHORT).show();
            img1.setImageDrawable(anim2);
            anim2.start();
        }


    }
}

核心的三個步驟;

    <framelayout android:focusable="true" android:focusableintouchmode="true" android:layout_height="wrap_content" android:layout_width="wrap_content">

        

        

    </framelayout>

/**
 *
 * 搜索動畫的實現
 * Created by MH on 2016/7/19.
 */
public class SVGMain2Activity extends AppCompatActivity {

    private ImageView iv;
    private TextView text;
    private AnimatedVectorDrawable searchToBar;
    private AnimatedVectorDrawable barToSearch;

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

        iv = (ImageView) findViewById(R.id.search);
        text = (TextView) findViewById(R.id.text);
        // 加載SVG 
        searchToBar = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim_search_to_bar);
        barToSearch = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim_bar_to_search);

        // 設置監聽
        iv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                iv.setImageDrawable(searchToBar);
                searchToBar.start();
            }
        });
    }

    public void lost_focus(View view) {
        // 點擊文本框之外時，隱藏下劃線
        iv.setImageDrawable(barToSearch);
        barToSearch.start();
    }

}