動(dòng)畫(huà)基礎(chǔ)（一）四種基本動(dòng)畫(huà)(xml和java編寫(xiě))

愛(ài)你lxz 2017-10-19

展開(kāi)全文

作者：夏至，歡迎轉(zhuǎn)載，也請(qǐng)保留這份申明，謝謝
轉(zhuǎn)載請(qǐng)保留這份申明 http://blog.csdn.net/u011418943/article/details/52083783
前言：
生活不可能事事都能順心，特別是剛畢業(yè)的時(shí)候，既然有些事情改變不了
那就做好工作的同時(shí)，增強(qiáng)自己，也請(qǐng)努力到心疼自己。

我們知道，補(bǔ)間動(dòng)畫(huà)共有四種，即透明度(alpha)、縮放(scale)、旋轉(zhuǎn)(rotate)和平移(translate)，在一般的動(dòng)畫(huà)效果中，只要組合了這四個(gè)家伙，就能打通任督二脈，一般的效果我們都是可以處理的。
可以看下面這張圖：
這里寫(xiě)圖片描述

我們玩的就是這幾個(gè)動(dòng)畫(huà)，所以，操作界面如下圖：
這里寫(xiě)圖片描述

一、使用xml文件配置動(dòng)畫(huà)

1 scale 標(biāo)簽

scale是縮放的意思，即我們可以對(duì)空間進(jìn)行放大和縮小，首先先來(lái)了解一下它的各個(gè)屬性，代碼先上：

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas./apk/res/android"
    android:fromXScale="1.0"
    android:toXScale="1.2"
    android:fromYScale="1.0"
    android:toYScale="1.2"
    android:duration="700"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="1"
    android:repeatMode="restart"
     >
</scale>1
2
3
4
5
6
7
8
9
10
11
12
13

下面是對(duì)上面的一個(gè)解釋：

android:fromXScale="1.0"  表示X軸開(kāi)始的縮放比例， 1.0表示無(wú)變化，0.5    縮小一倍，2.0表示放大一倍

android:toXScale="1.2"  表示X軸結(jié)束的縮放比例，所以，兩個(gè)結(jié)合就是X放大了1.2倍，同理，Y軸也放大1.2倍，即整個(gè)空間放大1.2倍

android:duration="700" 表示整個(gè)動(dòng)畫(huà)的過(guò)程持續(xù)時(shí)間，這里設(shè)置的是700ms
android:pivotX="50%"  動(dòng)畫(huà)起始的X軸位置，50%表示自身的中心，也是是數(shù)字，比如50，則是從距離空 間的50px開(kāi)始縮放，50%p則是根據(jù)父局，一般沒(méi)怎么用到             

android:pivotY="50%"  動(dòng)畫(huà)起始的Y軸位置，與上訴一致
android:repeatCount="1"  重復(fù)次數(shù)
android:repeatMode="restart"  重復(fù)類型 ，有兩個(gè)值，restart和reverse，前者表示重放，后者表示回放
1
2
3
4
5
6
7
8
9
10
11

一般我們?cè)趓es下新建一個(gè)anim文件夾，把我們需要的動(dòng)畫(huà)寫(xiě)成xml文件就可以調(diào)用了。

這里寫(xiě)圖片描述

ok，直接上代碼，首先是布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas./apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <LinearLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <Button 
            android:id="@+id/alpha"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="alpha"/>
        <Button 
            android:id="@+id/scale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="scale"/>
        <Button 
            android:id="@+id/translate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="translate"/>
        <Button 
            android:id="@+id/rolate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="rolate"/>
         <Button 
            android:id="@+id/set"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="綜合"/>

    </LinearLayout>

     <Button 
            android:id="@+id/test"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="旋轉(zhuǎn)跳躍"
            android:textSize="24sp"
            android:layout_marginTop="40dp"
            android:layout_gravity="center"/>
</LinearLayout>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

很簡(jiǎn)單，4個(gè)button控件表示四種動(dòng)畫(huà)，其中 set是組合動(dòng)畫(huà)，后面會(huì)講，再加一下button用來(lái)演示。
接下來(lái)是MainActivity：

public class AtyAnimation extends Activity implements OnClickListener{
    private Button button;
    private Animation mAnimation;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.aty_animationtest);

        button = (Button)findViewById(R.id.test);
        findViewById(R.id.alpha).setOnClickListener(this);
        findViewById(R.id.scale).setOnClickListener(this);
        findViewById(R.id.translate).setOnClickListener(this);
        findViewById(R.id.rolate).setOnClickListener(this);
        findViewById(R.id.set).setOnClickListener(this);
    }
    @Override
    public void onClick(View arg0) {
        // TODO Auto-generated method stub
        switch (arg0.getId()) {
        case R.id.alpha:

            break;
        case R.id.scale:
            mAnimation =  AnimationUtils.loadAnimation(this, R.anim.scale);
            button.startAnimation(mAnimation);
            break;
        case R.id.translate:

            break;
        case R.id.rolate:

            break;
        case R.id.set:

            break;
        default:
            break;
        }
    }
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

可以看到，我們是用 mAnimation = AnimationUtils.loadAnimation(this, R.anim.scale); 加載的，效果如下：
這里寫(xiě)圖片描述

2 alpha 透明度

透明度相對(duì)比較簡(jiǎn)單，我們只需要設(shè)置它的開(kāi)始和結(jié)束的透明度即可

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas./apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:duration="700"
    android:fillBefore="true"
     >
</alpha>1
2
3
4
5
6
7
8

android:fromAlpha="1.0" 1.0表示原狀，0.0表示完全透明不可見(jiàn)
android:fillBefore="true"  表示動(dòng)畫(huà)結(jié)束之后保留動(dòng)畫(huà)開(kāi)始的狀態(tài)，還可以      設(shè)置成 fillEnabled="true"和fillAfter="true" ，前者與before一樣，后者則保留動(dòng)畫(huà)后的狀態(tài) 1
2

3、translate 移動(dòng)

老規(guī)則，先看代碼

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas./apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="100"
    android:fromYDelta="0"
    android:toYDelta="100"
    android:duration="1000"
    android:fillAfter="true"
    android:interpolator="@android:anim/bounce_interpolator"
     >
</translate>1
2
3
4
5
6
7
8
9
10
11

發(fā)現(xiàn)與上面的相比，有多了一個(gè)標(biāo)簽， interpolator 是動(dòng)畫(huà)的插值器，即你可以在你的動(dòng)畫(huà)過(guò)程中添加一些特效，比如我這里就添加了一個(gè)Duang的特效，即在動(dòng)畫(huà)結(jié)束的時(shí)候，彈幾下。當(dāng)然還可以選擇其他的：

AccelerateDecelerateInterpolator 在動(dòng)畫(huà)開(kāi)始與介紹的地方速率改變比較慢，在中間的時(shí)候加速
AccelerateInterpolator 在動(dòng)畫(huà)開(kāi)始的地方速率改變比較慢，然后開(kāi)始加速
AnticipateInterpolator 開(kāi)始的時(shí)候向后然后向前甩
AnticipateOvershootInterpolator 開(kāi)始的時(shí)候向后然后向前甩一定值后返回最后的值
BounceInterpolator 動(dòng)畫(huà)結(jié)束的時(shí)候彈起
CycleInterpolator 動(dòng)畫(huà)循環(huán)播放特定的次數(shù)，速率改變沿著正弦曲線
DecelerateInterpolator 在動(dòng)畫(huà)開(kāi)始的地方快然后慢
LinearInterpolator 以常量速率改變
OvershootInterpolator 向前甩一定值后再回到原來(lái)位置

如果你閑每次都改一下代碼再試麻煩，你可以添加多幾個(gè)button，直接改變就行了

4 rotate 旋轉(zhuǎn)

代碼先貼：
1
2

    <?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas./apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="180"
    android:duration="1000"
    android:pivotX="50%"
    android:pivotY="50%" 
    android:repeatCount="1"
    android:repeatMode="reverse">
</rotate>1
2
3
4
5
6
7
8
9
10

好了，發(fā)現(xiàn)標(biāo)簽上面都學(xué)過(guò)了，相信你已經(jīng)很熟練了，基本上，補(bǔ)間動(dòng)畫(huà)就這些了。

5、set 標(biāo)簽

上面所學(xué)的都是單個(gè)的，那怎么把它組合起來(lái)呢？這個(gè)時(shí)候我們就要用到組合標(biāo)簽 set 了。先看代碼：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas./apk/res/android"
    android:duration="2000"
    android:fillAfter="true"
    android:interpolator="@android:anim/decelerate_interpolator"
    >
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" >
    </alpha>
    <rotate
        android:fromDegrees="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="720" />
    <scale
        android:fromXScale="0.4"
        android:fromYScale="0.4"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.2"
        android:toYScale="1.2" >
    </scale>
   <!--  <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100"
        android:toYDelta="100" >
    </translate> -->
</set>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

可以看到，我們把前三個(gè)動(dòng)畫(huà)組合在一起，讓它從中心的位置，由透明，慢慢旋轉(zhuǎn)變大到可見(jiàn)。本來(lái)先加平移的，發(fā)現(xiàn)真難看，就去掉了。效果圖就不放了，下次我研究gif圖，現(xiàn)在在上班呢

二、使用Java 代碼寫(xiě)動(dòng)畫(huà)

在上述中，我們都是通過(guò)xml去編寫(xiě)動(dòng)畫(huà)的，現(xiàn)在我們來(lái)用Java寫(xiě)成我們的動(dòng)畫(huà)，這里就舉我們的組合動(dòng)畫(huà)來(lái)做一個(gè)例子，畢竟，組合動(dòng)畫(huà)包含了我們所有的屬性了。廢話不多說(shuō)，直接上代碼：
1
2

case R.id.set:
            //先設(shè)置set包含標(biāo)簽
            AnimationSet mAnimationSet = new AnimationSet(true);
            //注意，我們的動(dòng)畫(huà)都是float型的，所以，在寫(xiě)數(shù)字的時(shí)候，要加f
            Animation alphAnima = new AlphaAnimation(0.0f, 1.0f);
            Animation rotateAnim = new RotateAnimation(0, 720, Animation.RELATIVE_TO_SELF,0.5f, 
                    Animation.RELATIVE_TO_SELF,0.5f);

            mAnimationSet.addAnimation(alphAnima);
            mAnimationSet.addAnimation(rotateAnim);
            mAnimationSet.setDuration(1000);//添加時(shí)間
            mAnimationSet.setInterpolator(new DecelerateInterpolator()); //添加插值器
            mAnimationSet.setFillAfter(true);
            button.startAnimation(mAnimationSet);
            break;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

下一章我們講解屬性動(dòng)畫(huà)。因?yàn)檠a(bǔ)間動(dòng)畫(huà)都是 View 的動(dòng)畫(huà)，即你的動(dòng)畫(huà)只能針對(duì)于View，而且是只改變偏移而已，并沒(méi)有改變屬性。

這個(gè)等到下一張?jiān)僦v好了，這個(gè)系列的最后我們將模仿一下新浪微博的彈出效果，先看看圖：
這里寫(xiě)圖片描述

這個(gè)很簡(jiǎn)單實(shí)現(xiàn)的，是時(shí)候表演真正的技術(shù)了。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：愛(ài)你lxz > 《技術(shù)》

舉報(bào)/認(rèn)領(lǐng)