目錄
- 一: 動(dòng)畫的分類
- 二:解析
- 幀動(dòng)畫
-
- 補(bǔ)間動(dòng)畫
- 屬性講解
- interpolator插值器
- 屬性動(dòng)畫
- ValueAnimator
- ObjectAnimator
一: 動(dòng)畫的分類
- 幀動(dòng)畫
- 補(bǔ)間動(dòng)畫
- 屬性動(dòng)畫
二:解析
1. 幀動(dòng)畫
(1)定義
這些圖片是將一些列的drawable組合在一起,進(jìn)行連續(xù)的播放斋荞, 類似于以前電影源用膠卷進(jìn)行動(dòng)畫播放
(2)有圖有真相
(3)準(zhǔn)備圖片
看著是不是還行荞雏,哈哈,下面說(shuō)一下實(shí)現(xiàn)平酿,首先準(zhǔn)備幾個(gè)圖片凤优,百度吧,啥都有蜈彼,還有美女動(dòng)圖筑辨,哈哈,準(zhǔn)備好圖片以后就開始我們的項(xiàng)目咯
(4)創(chuàng)建XML 配置文件
- 在res下創(chuàng)建一個(gè)drawable文件夾幸逆,在其中創(chuàng)建一個(gè)anim.xml
- 在 <animation-list>標(biāo)簽中將一系列的圖片組合在一起
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<!-- oneshot 是否只播放一次 -->
<item
android:drawable="@drawable/pic_01"
android:duration="200" />
<!-- duration 延時(shí)時(shí)間 單位毫秒 -->
<item
android:drawable="@drawable/pic_02"
android:duration="200" />
<item
android:drawable="@drawable/pic_03"
android:duration="200" />
<item
android:drawable="@drawable/pic_04"
android:duration="200" />
<item
android:drawable="@drawable/pic_05"
android:duration="200" />
<item
android:drawable="@drawable/pic_06"
android:duration="200" />
<item
android:drawable="@drawable/pic_07"
android:duration="200" />
</animation-list>
(5) 如何在代碼中使用
//開始動(dòng)畫
private void init_startAnim() {
anim = (AnimationDrawable) getResources().getDrawable(R.drawable.anim);
img.setBackgroundDrawable(anim);//img 是我們放在布局文件中的ImageView
anim.start();
}
//停止動(dòng)畫
private void init_stopAnim() {
if (anim != null) {
anim.stop();
}
}
2. 補(bǔ)間動(dòng)畫
本文很多參考這篇文章棍辕,有興趣的小伙伴,可以點(diǎn)擊詳細(xì)查看
(1) 定義
指的View可以是TextView,Button等等 可以讓指定的View進(jìn)行縮放,旋轉(zhuǎn),位移,透明度的變化 (對(duì)前面的4個(gè)效果可以組合實(shí)用)
(2)屬性講解
屬性名稱 | 作用 |
---|---|
Alpha | 透明度 |
Rotate | 旋轉(zhuǎn) |
Canle | 縮放 |
Translate | 位移 |
Set | 組合 |
先有個(gè)概念还绘,后續(xù)會(huì)對(duì)每個(gè)屬性詳細(xì)講解楚昭。。拍顷。
(3)使用
- 創(chuàng)建
res/anim
的文件夾 抚太, 在anim
中定義指定標(biāo)簽的布局文件 - 在動(dòng)態(tài)代碼中加載補(bǔ)間動(dòng)畫
-
找到指定的View播放動(dòng)畫
還有比我還細(xì)心的嘛
anim_test中的屬性
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1500"
android:fillAfter="true"
android:fromAlpha="1.0"
android:repeatCount="infinite"
android:toAlpha="0.1" />
動(dòng)畫屬性的介紹,這里很重要
(4) 屬性講解
Animaton屬性講解(上訴的動(dòng)畫都有這些屬性昔案,是父類)
屬性名稱 | 作用 | 備注 |
---|---|---|
duration | 動(dòng)畫執(zhí)行的時(shí)間 | 以毫秒為單位 |
fillEnabled | 動(dòng)畫結(jié)束時(shí)尿贫,是否還原到開始動(dòng)畫前的狀態(tài) | true或者false |
fillBefore | 與fillEnabled相同 | 無(wú) |
fillAfter | 動(dòng)畫結(jié)束時(shí),是否將保持動(dòng)畫最后時(shí)的狀態(tài) | true或者false |
repeatMode | 重復(fù)類型 | reverse:表示倒序回訪,restart:表示重新放一遍爱沟,這個(gè)屬性必須與repeatCount聯(lián)合使用帅霜,因?yàn)闋砍兜街貜?fù),即重復(fù)播放時(shí)的播放類型呼伸。 |
repeatCount | 動(dòng)畫重復(fù)的次數(shù) | infinite:表示無(wú)限循環(huán) |
interpolator | 設(shè)定的插值器身冀,它主要用來(lái)為動(dòng)畫設(shè)置一些特殊的效果,比方說(shuō):加速運(yùn)動(dòng)括享、減速運(yùn)動(dòng)搂根、動(dòng)畫結(jié)束的時(shí)候彈起等等。 | 下面會(huì)詳細(xì)介紹 |
alpha屬性詳解
屬性名稱 | 作用 | 備注 |
---|---|---|
fromAlpha | 動(dòng)畫開始時(shí)的透明度 | 變化范圍為0.0-1.0,0.0表示完全透明铃辖,1.0表示完全不透明 |
toAlpha | 動(dòng)畫結(jié)束時(shí)的透明度 | 同上 |
rotate屬性詳解
屬性名稱 | 作用 | 備注 |
---|---|---|
fromDegrees | 動(dòng)畫開始時(shí)旋轉(zhuǎn)的角度位置 | float類型剩愧;正值代表順時(shí)針?lè)较蚨葦?shù),負(fù)值代碼逆時(shí)針?lè)较蚨葦?shù) |
toDegrees | 動(dòng)畫結(jié)束時(shí)旋轉(zhuǎn)到的角度位置 | 同上 |
pivotX | 旋轉(zhuǎn)點(diǎn)X軸坐標(biāo) | 排版問(wèn)題娇斩,請(qǐng)看下面的備注 |
pivotY | 旋轉(zhuǎn)點(diǎn)Y軸坐標(biāo) | 同上 |
pivotX
:float類型仁卷,可以是數(shù)值穴翩、百分?jǐn)?shù)、百分?jǐn)?shù)p三種樣式,比如50、50%查蓉、50%p; 當(dāng)為數(shù)值時(shí)背蟆,表示在當(dāng)前View的左上角,即原點(diǎn)處加上50px哮幢,做為旋轉(zhuǎn)點(diǎn)X坐標(biāo),如果是50%;表示在當(dāng)前控件的左上角加上自己寬度的50%做為旋轉(zhuǎn)點(diǎn)X坐標(biāo);如果是50%p带膀,那么就是表示在當(dāng)前控件的左上角加上父控件寬度的50%做為旋轉(zhuǎn)點(diǎn)X坐標(biāo)
canle屬性詳解
屬性名稱 | 作用 | 備注 |
---|---|---|
fromXScale | 起始的X方向上相對(duì)自身的縮放比例 | 型float,比如1.0代表自身無(wú)變化橙垢,0.5代表起始時(shí)縮小一倍垛叨,2.0代表放大一倍 |
toXScale | 結(jié)尾的X方向上相對(duì)自身的縮放比例 | 類型float |
fromYScale | 起始的Y方向上相對(duì)自身的縮放比例 | 類型float |
toYScale | 結(jié)尾的Y方向上相對(duì)自身的縮放比例 | 類型float |
pivotX | 縮放起點(diǎn)X軸坐標(biāo) | 可以是數(shù)值、百分?jǐn)?shù)钢悲、百分?jǐn)?shù)p |
pivotY | 縮放起點(diǎn)Y軸坐標(biāo) | 取值及意義與pivotX一樣 |
Translate屬性詳解
屬性名稱 | 作用 | 備注 |
---|---|---|
fromXDelta | 起始點(diǎn)X軸坐標(biāo) | 可以是數(shù)值点额、百分?jǐn)?shù)、百分?jǐn)?shù)p 三種樣式 |
fromYDelta | 起始點(diǎn)Y坐標(biāo) | 同上 |
toXDelta | 結(jié)束點(diǎn)X坐標(biāo) | 無(wú) |
toYDelta | 結(jié)束點(diǎn)Y坐標(biāo) | 無(wú) |
Set屬性詳解
他沒(méi)有特殊的屬性莺琳,因?yàn)樗淖饔弥皇菍⑺袑傩匀诤显谝黄?/p>
例如
<?xml version="1.0" encoding= "utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<alpha
android:fromAlpha= "0.0"
android:toAlpha= "1.0"
android:duration= "3000" />
<scale
android:fromXScale= "0.0"
android:toXScale= "1.0"
android:fromYScale= "0.0"
android:toYScale= "1.0"
android:pivotX= "50%"
android:pivotY= "50%"
android:duration= "3000" />
<rotate
android:fromDegrees= "0"
android:toDegrees= "720"
android:pivotX= "50%"
android:pivotY= "50%"
android:duration= "3000"/>
<translate
android:startOffset= "3000"
android:fromXDelta= "0"
android:fromYDelta= "0"
android:toXDelta= "85"
android:toYDelta= "0"
android:duration= "1000" />
<alpha
android:startOffset= "4000"
android:fromAlpha= "1.0"
android:toAlpha= "0.0"
android:duration= "1000" />
</set>
interpolator插值器
這篇文章對(duì)interpolator还棱,講解的比較深入
interpolaotor定義了動(dòng)畫變化的速率,它允許基礎(chǔ)動(dòng)畫(alpha, scale, translate, rotate)加速惭等,減速珍手,重復(fù)變化等等。在補(bǔ)間動(dòng)畫中辞做,我們一般只定義關(guān)鍵幀(首幀和尾幀)琳要,然后由系統(tǒng)自動(dòng)生成中間幀,生成中間幀的這個(gè)過(guò)程可以成為“插值”秤茅。插值器定義了動(dòng)畫變化的速率稚补,提供不同的函數(shù)定義變化值相對(duì)于時(shí)間的變化規(guī)則,可以定義各種各樣的非線性變化函數(shù)框喳,比如加速课幕、減速等。下面是幾種常見(jiàn)的插值器:
Interpolator對(duì)象 | 功能作用 | 屬性講解 |
---|---|---|
AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate_interpolator
|
先加速再減速 | 無(wú) |
AccelerateInterpolator @android:anim/accelerate_interpolator
|
加速 |
android:factor 浮點(diǎn)值五垮,加速速率乍惊,默認(rèn)為1; android:tension 浮點(diǎn)值,起始點(diǎn)后退的張力放仗、拉力數(shù)润绎,默認(rèn)為2 |
AnticipateInterpolator @android:anim/anticipate_interpolator
|
先回退一小步然后加速前進(jìn) | |
AnticipateOvershootInterpolator @android:anim/anticipate_overshoot_interpolator
|
先回退一小步然后加速前進(jìn),超出終點(diǎn)一小步后再回到終點(diǎn) |
android:tension 同上; android:extraTension 浮點(diǎn)值,拉力的倍數(shù)莉撇,默認(rèn)為1.5(2 * 1.5) |
BounceInterpolator @android:anim/bounce_interpolator
|
最后階段彈球效果 | 無(wú) |
CycleInterpolator @android:anim/cycle_interpolator
|
周期運(yùn)動(dòng) |
android:cycles 整數(shù)值呢蛤,循環(huán)的個(gè)數(shù),默認(rèn)為1 |
DecelerateInterpolator @android:anim/decelerate_interpolator
|
減速 |
android:factor 浮點(diǎn)值稼钩,減速的速率顾稀,默認(rèn)為1 |
LinearInterpolator @android:anim/linear_interpolator
|
勻速 | 無(wú) |
OvershootInterpolator @android:anim/overshoot_interpolator
|
快速到達(dá)終點(diǎn)并超出一小步最后回到終點(diǎn) |
tension 浮點(diǎn)值,超出終點(diǎn)后的張力坝撑、拉力,默認(rèn)為2 |
插值器的使用
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/bounce_interpolator"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="200"
android:toYDelta="300"
android:duration="5000">
</translate>
animation.setInterpolator(new OvershootInterpolator());
(5)代碼中如何使用補(bǔ)間動(dòng)畫
Animation animation = AnimationUtils.loadAnimation(MainActivity.this,R.anim.rotate);
ivGirl.startAnimation(animation);
3. 屬性動(dòng)畫
推薦這文章粮揉,講的真的挺好的
(1)定義
通過(guò)改變?nèi)魏螌?duì)象的屬性,在屬性改變的過(guò)程當(dāng)中產(chǎn)生的動(dòng)畫 (3.0以后提出的)
比如:顏色 字體的顏色是紅色 最后最后的顏色是綠色 (屬性動(dòng)畫體現(xiàn)該變化效果) 更改控件的寬度高度等等,和補(bǔ)間動(dòng)畫相比他是改變了Object的屬性,而補(bǔ)間動(dòng)畫不會(huì)改變View的屬性
ValueAnimator
private void init_ValueAnimator() {
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0,100);
valueAnimator.setDuration(200);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (Float) animation.getAnimatedValue();
img.setTranslationX(value);
}
});
valueAnimator.start();
}
ObjectAnimator
private void init_ObjectAnimator() {
ObjectAnimator oa = ObjectAnimator.ofFloat(img, "rotationY", 0f, 360f);
oa.setDuration(3000);//設(shè)置時(shí)間
oa.start();// 播放動(dòng)畫
}