1. 程式人生 > >動畫 (Animation) 資源型別詳述 (1)

動畫 (Animation) 資源型別詳述 (1)

詳細介紹程式資源的使用,格式和語法,包括

①Animation Resources

動畫資源,Tween動畫(Tween動畫是操作某個控制元件讓其展現出旋轉、漸變、移動、縮放的過程)儲存在res/anim資原始檔中,Frame動畫儲存在res/drawable資原始檔中。

②顏色狀態資源

定義在res/color/資料夾中。

③Drawable資源

定義在res/drawable/資料夾中。

④佈局資源

定義在res/layout/資料夾中。

⑤選單資源

定義在res/menu/資料夾中。

⑥字串資源

可以定義字串,字串陣列,和plurals (一種可以像printf函式那樣進行格式化輸出的字串),儲存在res/values/資料夾中,分別通過R.string, R.array, R.plurals進行訪問。

⑦樣式資源

定義介面的外觀和格式,儲存在res/values/資料夾中,使用R.style進行訪問。

⑧字型資源

儲存在res/font/資料夾中,使用R.font進行訪問。

⑨其它資源

Bool, Color, Dimension, ID, Integer, Integer Array, Typed Array.

1.Animation

Animation有兩種:Property Animation通過Animator類在一段時間內修改物件的屬性來建立動畫。

View Animation分為兩種,Tween animation 通過Animation函式在一個影象上進行變換 (平移、縮放)操作來建立動畫,Frame animation 通過AnimationDrawable類有序地顯示一系列的圖片來建立動畫。

Property animation儲存在res/animator資料夾中,

語法規則:

<set
  android:ordering=["together" | "sequentially"]>

    <objectAnimator
        android:propertyName="string"
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["repeat" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <animator
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["repeat" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <set>
        ...
    </set>
</set>

<set>表示集合,集合可以包括代表物件的<objectAnimator>和包括數值的<valueAnimator>,也可以包括集合自己,可以對相關的屬性進行設定。比如set有個屬性ordering有可以填寫兩個數值,together表示所有的animator同時執行,sequentially表示按照佈局檔案先後執行。

可以寫個xml檔案實際感受到這些屬性的作

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

    <objectAnimator
        android:propertyName="y"
        android:duration="750"
        android:valueFrom="200"
        android:valueTo="700"
        android:repeatCount="1"
        android:repeatMode="reverse"
        />

    <objectAnimator
        android:propertyName="alpha"
        android:duration="750"
        android:valueFrom="1.0"
        android:valueTo="0"
        android:repeatCount="1"
        android:repeatMode="reverse"
        />
</set>

先建立一個物件,這個物件包括很多屬性,比如alpha,位置座標,顏色,形狀等。

通過Animator就可以動態地改變這些屬性值顯示不同的效果。

執行效果

點選按鈕,四個球開始運動,第一個球按照模擬物體落地,使用BoundInterpolator,官方定義大概十個插補器,需要具體的操作才能知道效果。

/**
                 * pvhY = PropertyValuesHolder.ofFloat("y", ball.getY(),
                 * getHeight() - BALL_SIZE);
                 * PropertyValuesHolder pvhAlpha = PropertyValuesHolder.ofFloat("alpha", 1.0f, 0f);
                 * ObjectAnimator yAlphaBouncer = ObjectAnimator.ofPropertyValuesHolder(ball,
                 *      pvhY, pvhAlpha).setDuration(DURATION/2);
                 * yAlphaBouncer.setInterpolator(new AccelerateInterpolator());
                 * yAlphaBouncer.setRepeatCount(1);
                 * yAlphaBouncer.setRepeatMode(ValueAnimator.REVERSE);
                 *
                 */
                set = (AnimatorSet) AnimatorInflater.loadAnimator(
                        PropertyAnimation.this, R.animator.ball_y_alpha);
                set.setTarget(ball);


                ball = balls.get(2);
                PropertyValuesHolder pvhW = PropertyValuesHolder.ofFloat("width", ball.getWidth(),
                        ball.getWidth() * 2);
                PropertyValuesHolder pvhH = PropertyValuesHolder.ofFloat("height", ball.getHeight(),
                        ball.getHeight() * 2);
                PropertyValuesHolder pvTX = PropertyValuesHolder.ofFloat("x", ball.getX(),
                        ball.getX() - BALL_SIZE / 2f);
                PropertyValuesHolder pvTY = PropertyValuesHolder.ofFloat("y", ball.getY(),
                        ball.getY() - BALL_SIZE / 2f);
                ObjectAnimator whxyBouncer = ObjectAnimator.ofPropertyValuesHolder(ball, pvhW, pvhH,
                        pvTX, pvTY).setDuration(DURATION / 2);
                whxyBouncer.setRepeatCount(1);
                whxyBouncer.setRepeatMode(ValueAnimator.REVERSE);

用程式碼寫這些動態的效果很麻煩,所以推薦使用xml檔案定義,簡單直觀。

Frame animation是預製一組連貫的圖片,本例中使用的是桃心,連續載入不同刻度的桃心顯示動態的效果。

public class FrameAnimation extends Activity {

    ConstraintLayout layout;

    ImageView heartImage;

    AnimationDrawable heartAnimation;

    // 控制動畫的執行和停止。
    boolean toggle;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.button);
        layout = findViewById(R.id.container);
        layout.setBackgroundColor(getColor(R.color.cyan));

        heartImage = new ImageView(this);
        heartImage.setBackground(getDrawable(R.drawable.ic_heart));

        heartAnimation = (AnimationDrawable) heartImage.getBackground();

        toggle = true;

        layout.addView(heartImage);
    }

    public void sendMessage(View view) {
        toggle ^= true;
        heartAnimation.start();
        if (heartAnimation.isRunning() && toggle) {
            heartAnimation.stop();
        }
    }
}

最後是Tween animation,通過旋轉,縮放,拉伸等形式改變圖片的顯示,參考原始碼可以看到指南針變形的動畫。

xml檔案存放在res/anim/資料夾下面。

    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />

    <set
        android:interpolator="@android:anim/accelerate_interpolator"
        android:startOffset="700">
        <scale
            android:fromXScale="1.4"
            android:toXScale="0.0"
            android:fromYScale="0.6"
            android:toYScale="0.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="400" />
        <rotate
            android:fromDegrees="0"
            android:toDegrees="-45"
            android:toYScale="0.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="400" />
    </set>

2.Color state list

根據不同的狀態顯示不同的顏色值,定義個按鈕,讓它的文字根據不同的狀態顏色發生變化。

xml檔案存放在res/color/目錄下面。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:color="#ffff0000" />    <!-- pressed -->
    <item android:state_focused="true"
        android:color="#ff0000ff" />    <!-- focused -->
    <item android:color="#00ffff" />    <!-- default -->
</selector>

設定textColor屬性值,點選按鈕的時候按鈕的文字會變成紅色。