View動畫

一.效果圖

image

二.使用 xml 文件實現(xiàn)方式

通用屬性:

  • android:duration 動畫持續(xù)時間，以毫秒為單位
  • android:fillAfter 如果設(shè)置為true，控件動畫結(jié)束時，將保持動畫最后時的狀態(tài)
  • android:fillBefore 如果設(shè)置為true,控件動畫結(jié)束時，還原到開始動畫前的狀態(tài)
  • android:fillEnabled 與android:fillBefore 效果相同，都是在動畫結(jié)束時，將控件還原到初始化狀態(tài)
  • android:repeatCount 重復(fù)次數(shù)
  • android:repeatMode 重復(fù)類型，有reverse和restart兩個值，reverse表示倒序回放，restart表示重新放一遍，必須與repeatCount一起使用才能看到效果。因為這里的意義是重復(fù)的類型，即回放時的動作。
  • android:interpolator 設(shè)定插值器，其實就是指定的動作效果，比如彈跳效果等

  1. 漸變

    自身屬性:

  • android:fromAlpha 動畫開始的透明度，從0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明
  • android:toAlpha 動畫結(jié)束時的透明度，也是從0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明

示例:

anim 文件:

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

    <alpha android:fromAlpha="1.0"
           android:toAlpha="0.0"
           android:duration="2000"/>
</set>

調(diào)用:

Animation animation = AnimationUtils.loadAnimation(this, R.anim.view_alpha);
        animation.setFillAfter(true);//設(shè)置保持動畫后的狀態(tài)
        mIvIcon.startAnimation(animation);
  1. 平移
    自身屬性:
  • android:fromXDelta 起始點(diǎn)X軸坐標(biāo)，可以是數(shù)值、百分?jǐn)?shù)、百分?jǐn)?shù)p 三種樣式，比如 50、50%、50%p，具體意義已在scale標(biāo)簽中講述，這里就不再重講
  • android:fromYDelta 起始點(diǎn)Y軸從標(biāo)，可以是數(shù)值、百分?jǐn)?shù)、百分?jǐn)?shù)p 三種樣式；
  • android:toXDelta 結(jié)束點(diǎn)X軸坐標(biāo)
  • android:toYDelta 結(jié)束點(diǎn)Y軸坐標(biāo)

示例:

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

    <translate android:fromXDelta="0"
               android:toXDelta="100%"
               android:fromYDelta="0"
               android:toYDelta="100%"
               android:duration="2000"
    />
</set>
  1. 縮放
    自身屬性:
  • android:fromXScale 起始的X方向上相對自身的縮放比例，浮點(diǎn)值，比如1.0代表自身無變化，0.5代表起始時縮小一倍，2.0代表放大一倍；
  • android:toXScale 結(jié)尾的X方向上相對自身的縮放比例，浮點(diǎn)值；
  • android:fromYScale 起始的Y方向上相對自身的縮放比例，浮點(diǎn)值，
  • android:toYScale 結(jié)尾的Y方向上相對自身的縮放比例，浮點(diǎn)值；
  • android:pivotX 縮放起點(diǎn)X軸坐標(biāo)，可以是數(shù)值、百分?jǐn)?shù)、百分?jǐn)?shù)p 三種樣式，比如 50、50%、50%p，當(dāng)為數(shù)值時，表示在當(dāng)前View的左上角，即原點(diǎn)處加上50px，做為起始縮放點(diǎn)；如果是50%，表示在當(dāng)前控件的左上角加上自己寬度的50%做為起始點(diǎn)；如果是50%p，那么就是表示在當(dāng)前的左上角加上父控件寬度的50%做為起始點(diǎn)x軸坐標(biāo)。
  • android:pivotY 縮放起點(diǎn)Y軸坐標(biāo)，取值及意義跟android:pivotX一樣。

示例:

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

    <scale android:fromXScale="1.0"
    android:toXScale="0.5"
    android:fromYScale="1.0"
    android:toYScale="0.5"
           android:pivotX="100%p"
           android:pivotY="100%p"/>

    <!--默認(rèn)縮放中心在左上角-->
</set>

  1. 旋轉(zhuǎn)

    自身屬性:

  • android:fromDegrees 開始旋轉(zhuǎn)的角度位置，正值代表順時針方向度數(shù)，負(fù)值代碼逆時針方向度數(shù)
  • android:toDegrees 結(jié)束時旋轉(zhuǎn)到的角度位置，正值代表順時針方向度數(shù)，負(fù)值代碼逆時針方向度數(shù)
  • android:pivotX 縮放起點(diǎn)X軸坐標(biāo)，可以是數(shù)值、百分?jǐn)?shù)、百分?jǐn)?shù)p 三種樣式，比如 50、50%、50%p
  • android:pivotY 縮放起點(diǎn)Y軸坐標(biāo)，可以是數(shù)值、百分?jǐn)?shù)、百分?jǐn)?shù)p 三種樣式，比如 50、50%、50%p

示例:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate android:pivotX="50%"
            android:pivotY="50%"
            android:fromDegrees="0"
            android:toDegrees="180"
    android:duration="2000"/>
</set>

  1. 動畫集合

    示例:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fillAfter="true">


    <alpha android:fromAlpha="1"
           android:toAlpha="0.5"/>

    <rotate android:fromDegrees="0"
            android:toDegrees="180"
            android:pivotX="50%"
            android:pivotY="50%"
    />
</set>

三.使用代碼實現(xiàn)

  1. 漸變
//聲明一個漸變動畫, 參數(shù)1代表起始透明度,參數(shù)2代表結(jié)束透明度  //1代表完全不透明,0是完全透明
AlphaAnimation alphaAnimation = new AlphaAnimation(1f, 0f);
        //設(shè)置持續(xù)時間
        alphaAnimation.setDuration(2000);
        //設(shè)置動畫后的狀態(tài)
        alphaAnimation.setFillAfter(true);
        //設(shè)置重復(fù)次數(shù)
        alphaAnimation.setRepeatCount(2);
        //設(shè)置重復(fù)模式
        alphaAnimation.setRepeatMode(Animation.REVERSE);
         //設(shè)置動畫監(jiān)聽
        alphaAnimation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                
            }

            @Override
            public void onAnimationEnd(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        mIvIcon.startAnimation(alphaAnimation);
  1. 平移
//      (int fromXType,    表示X的起始值類型,該類型指定相對長度的類型
//      Animation.RELATIVE_TO_PARENT   相對于父親的長度
//      Animation.RELATIVE_TO_SELF     相對于自身的長度
//      Animation.ABSOLUTE             表示絕對類型,傳入長度的絕對值
        
//      float fromXValue,  表示的是動畫開始的時候,X的起始位置  (值由類型確定)
        
//      
//      int toXType, 表示X的結(jié)束值類型,該類型指定相對長度的類型
//      float toXValue,表示的是動畫結(jié)束的時候,X的結(jié)束位置  (值由類型確定)
//      
//       y的起始類型,       y的起始值                              y的結(jié)束類型,       y的結(jié)束值  
//      int fromYType, float fromYValue, int toYType, float toYValue

TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0f
                , Animation.RELATIVE_TO_PARENT, 1f,
                Animation.RELATIVE_TO_PARENT, 0f,
                Animation.RELATIVE_TO_PARENT, 1f);
        translateAnimation.setDuration(2000);
        translateAnimation.setFillAfter(true);
        mIvIcon.startAnimation(translateAnimation);
  1. 縮放
//      float fromX, 起始X的大小,  值為自身長度的倍數(shù)
//      
//      float toX, 結(jié)束X的大小,  值為自身長度的倍數(shù)
        
//      float fromY,
//      float toY,
//      int pivotXType,  縮放中心點(diǎn)的X位置的類型, 相對長度類型
//      float pivotXValue,   圓心的X的值 (值由類型確定) ,相對長度類型
//      int pivotYType, float pivotYValue   
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f);
        scaleAnimation.setFillAfter(true);
        scaleAnimation.setDuration(2000);
        mIvIcon.startAnimation(scaleAnimation);
  1. 旋轉(zhuǎn)
//申明一個旋轉(zhuǎn)動畫    參數(shù)1:起始角度    參數(shù)2:旋轉(zhuǎn)的度數(shù)               起始值小于結(jié)束值 順時針,  大于 逆時針
//      RotateAnimation rotateAnimation = new  RotateAnimation(-180, -90);
//      RotateAnimation rotateAnimation = new RotateAnimation(0, 180, 150, 0);
//      float fromDegrees,起始角度  
//      float toDegrees, 結(jié)束角度               起始值小于結(jié)束值 順時針旋轉(zhuǎn),  大于 逆時針旋轉(zhuǎn)
//      int pivotXType, 表示圓心X位置的相對類型, 相對長度類型
//      
//      float pivotXValue, 圓心的X的值 (值由類型確定)
//      
//      int pivotYType, float pivotYValue
      //設(shè)置旋轉(zhuǎn)中心在圖片的中心
        RotateAnimation rotateAnimation = new RotateAnimation(0, 180
                ,Animation.RELATIVE_TO_SELF,0.5f,
                Animation.RELATIVE_TO_SELF,0.5f);
        rotateAnimation.setDuration(2000);
        rotateAnimation.setFillAfter(true);
        mIvIcon.startAnimation(rotateAnimation);
  1. 集合
//先聲明一個動畫集合
    AnimationSet animationSet = new AnimationSet(true);
    //聲明需要的動畫
        RotateAnimation rotateAnimation = new RotateAnimation(0, 180
                ,Animation.RELATIVE_TO_SELF,0.5f,
                Animation.RELATIVE_TO_SELF,0.5f);

        ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f);
        //將每個動畫添加進(jìn)動畫集合
        animationSet.addAnimation(rotateAnimation);
        animationSet.addAnimation(scaleAnimation);
        animationSet.setDuration(3000);
        animationSet.setFillAfter(true);
        mIvIcon.startAnimation(animationSet);
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容