android 同根动画_android 动画系列 (1) - tween 动画(view动画)
這是我這個(gè)系列的目錄,有興趣的可以看下: android 動(dòng)畫(huà)系列 - 目錄
tween 動(dòng)畫(huà)早些時(shí)候我們也叫補(bǔ)間動(dòng)畫(huà)(我也不知道為啥),現(xiàn)在也有叫 view 動(dòng)畫(huà)的。tween動(dòng)畫(huà)是2.X 時(shí)代的產(chǎn)物,因?yàn)樾Ч焕硐?#xff0c;4.X 時(shí)代推出了動(dòng)畫(huà)的升級(jí)版 屬性動(dòng)畫(huà)。給我的感覺(jué) 屬性動(dòng)畫(huà)就是tween動(dòng)畫(huà)的升級(jí)版,屬性動(dòng)畫(huà)就是替換 tween 的,現(xiàn)在來(lái)看也的確時(shí)這樣的,大部分的場(chǎng)景我們現(xiàn)在都是使用屬性動(dòng)畫(huà)的,只有一些較老的 api 中會(huì)使用 tween 動(dòng)畫(huà)。
既然tween 動(dòng)畫(huà)和屬性動(dòng)畫(huà)是承前啟后的關(guān)系,那么2者理所應(yīng)當(dāng)?shù)脑谑褂檬呛芟嗨?#xff0c;參數(shù)也很相似,這里有些參數(shù)我們?cè)?tween 動(dòng)畫(huà)這節(jié)中介紹過(guò)后,就不再屬性動(dòng)畫(huà)中介紹了。
tween 動(dòng)畫(huà)實(shí)現(xiàn)的的4種動(dòng)畫(huà)效果:
平移動(dòng)畫(huà) TranslateAnimation
縮放動(dòng)畫(huà) ScaleAnimation
旋轉(zhuǎn)動(dòng)畫(huà) RotateAnimation
透明度動(dòng)畫(huà) AlphaAnimation
對(duì)于tween 動(dòng)畫(huà),目前使用的機(jī)會(huì)并不是很多了,使用時(shí)一般都是使用 定義好的動(dòng)畫(huà)xml文件,推薦大伙這么做。
xml 文件定義的位置:/res/anim目錄下
通用 xml 屬性介紹
Snip20170722_18.png
上面這些都是我在定義 xml tween 動(dòng)畫(huà)時(shí)會(huì)用到的屬性,上面的表里基本上很全了,解釋的也很到位
android:startOffset="100" 注意這個(gè) startOffset 參數(shù),這是動(dòng)畫(huà)執(zhí)行的延遲時(shí)間,tween 動(dòng)畫(huà)使用 startOffset 屬性,屬性動(dòng)畫(huà)使用 delay 屬性,這是 tween 和屬性動(dòng)畫(huà)在定義時(shí)需要注意的,話說(shuō)使用同一個(gè)單詞不好嘛,非要用2個(gè)...
tween 動(dòng)畫(huà)數(shù)值體系和坐標(biāo)體系
先來(lái)說(shuō)一下坐標(biāo)體系,這個(gè)屬于大家應(yīng)該熟記的,也是能猜測(cè)出來(lái)的,tween 動(dòng)畫(huà)時(shí)作用與 view 之上的,那么 tween 的坐標(biāo)體系也是以目標(biāo) view 的坐標(biāo)為參考的。具體來(lái)說(shuō)就是以 目標(biāo) view 的左上角為坐標(biāo)原點(diǎn)。明白這點(diǎn)我么再往下面看。
細(xì)心的朋友應(yīng)該會(huì)發(fā)現(xiàn),我們?cè)谠O(shè)置 tween 動(dòng)畫(huà)參數(shù)時(shí)出現(xiàn)過(guò)3種不同的寫(xiě)法:30,30%,30%p。這3種寫(xiě)法有其不同的含義,我們來(lái)仔細(xì)看一下。
參數(shù)數(shù)值體系,這里以平移來(lái)舉例:
30,以目標(biāo) view 的左上角為原點(diǎn),讓 view 向右移動(dòng)30px
30%,以目標(biāo) view 左上角為原點(diǎn),讓 view 向右移動(dòng) view 寬度的30%
30%p,以目標(biāo) view 左上角為原點(diǎn),讓 view 向右移動(dòng)父容器寬度的30%
了解了 tween 動(dòng)畫(huà)的坐標(biāo)系,再來(lái)看動(dòng)畫(huà)的數(shù)值參數(shù),移動(dòng)的方向大伙都應(yīng)該知道了,那么具體上面3種寫(xiě)法就是偏移量的不同了,30是 px 像素,30%是以 view 自身寬高算的,30%p 是以 view 的父容器的寬高算的
縮放,旋轉(zhuǎn)動(dòng)畫(huà)的中心點(diǎn)大伙應(yīng)該都恩那個(gè)猜出來(lái)是view 的左上角了吧,我們學(xué)習(xí)很重要的一點(diǎn)就是舉一反三,看破一點(diǎn),總攬全局。
translate位移動(dòng)畫(huà)
效果圖:添加了自動(dòng)返回的代碼
ezgif.com-video-to-gif.gif
tween 動(dòng)畫(huà)我們可以使用 xml 來(lái)定義,也可以自己擼代碼
xml 定義:
android:duration="600"
android:fromXDelta="0"
android:fromYDelta="0"
android:repeatCount="1"
android:repeatMode="reverse"
android:toXDelta="100"
android:toYDelta="100"
/>
我們定義完 xml 文件后,不就是完事了,我們還得把動(dòng)畫(huà)綁定給一個(gè) view ,并開(kāi)始才能啟動(dòng)動(dòng)畫(huà)效果
Animation animation1 = AnimationUtils.loadAnimation(this, R.anim.tran1); // R.anim.tran1是我們定義號(hào)的動(dòng)畫(huà) xml
imageTest.startAnimation(animation1); // imageTest是要顯示動(dòng)畫(huà)的 view
這樣我們就可以使用tween 動(dòng)畫(huà)了,當(dāng)然這是最簡(jiǎn)單的使用方式了,注意看所有的 tween 動(dòng)畫(huà)的都實(shí)現(xiàn)了 Animation接口。
對(duì)于 xml 的定義,雖然上面介紹過(guò)參數(shù)的含義了,我在這里還是說(shuō)一下的好,便于理解啊。
duration 是動(dòng)畫(huà)執(zhí)行時(shí)間,我們要是不寫(xiě)的話,默認(rèn)是300ms,在 xml 中,時(shí)間都是以 ms 為單位的
fromXDelta/fromYDelta 是動(dòng)畫(huà)開(kāi)始時(shí) view x/y 軸的偏移量,一般我們都寫(xiě)0,
toXDelta/toYDelta 是位移動(dòng)畫(huà)在 view x/y 軸上最終的偏移量,也可以理解為我們想讓 view 到達(dá)的新位置,也可以理解為動(dòng)畫(huà)的執(zhí)行幅度
repeatMode 是動(dòng)畫(huà)的重復(fù)模式,有2個(gè)模式:reverse/restart。 reverse是回復(fù)原狀,restart是重復(fù)執(zhí)行。
repeatCount 是動(dòng)畫(huà)的重復(fù)次數(shù)
Animator.setRepeatCount(ValueAnimator.INFINITE) 也可以實(shí)現(xiàn)重復(fù)執(zhí)行的效果
fillAfter 動(dòng)畫(huà)執(zhí)行后是否保留 view 所在的新位置, true 保留,false 回歸初始位置
fillBefore 和fillAfter不一樣,不論是 true 還是 false,都會(huì)回歸初始位置
這里注意 repeatMode/repeatCount ,這2個(gè)參數(shù)必須都寫(xiě)才有意思,只寫(xiě)一個(gè)是不成立的,我在下面會(huì)專門(mén)說(shuō)下重復(fù)模式和重復(fù)次數(shù)的問(wèn)題,這個(gè)和大家想象有些不一樣,我可是專門(mén)都跑了一遍才清楚的。
java 代碼定義:
TranslateAnimation translateAnimation = new TranslateAnimation(0, 100, 0, 100);
translateAnimation.setDuration(600);
translateAnimation.setRepeatMode(TranslateAnimation.REVERSE);
translateAnimation.setRepeatCount(1);
imageTest.startAnimation(translateAnimation);
我們也是可以 new 一個(gè) tween 動(dòng)畫(huà)的直接實(shí)現(xiàn)類出來(lái)的,這里使用的是 TranslateAnimation 最簡(jiǎn)單的構(gòu)造函數(shù)
上面說(shuō)了 tween 動(dòng)畫(huà)有3種參數(shù)形式:30,30%,30%p,這里我們就來(lái)試試看啊,不試試怎么能清楚尼...
讓我們來(lái)看看30%,上面使用的是100px,現(xiàn)在我們來(lái)看看100%是啥樣子的,看看和猜測(cè)的是不是一樣,向右位移自身尺寸的100%后,應(yīng)該是靠近右側(cè)邊緣了
android:duration="600"
android:fillAfter="true"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100%"
android:toYDelta="100%"
/>
效果圖:
ezgif.com-video-to-gif.gif
啊,和我們預(yù)計(jì)的一樣,向右位移了 view 自身的寬高值,和明顯的能夠看出來(lái)
接下來(lái)讓我們看看 30%p,為了效果明顯,數(shù)值這里使用了 80%p
android:duration="600"
android:fillAfter="true"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="80%p"
android:toYDelta="80%p"
/>
效果圖:
ezgif.com-video-to-gif.gif
哈哈,大伙注意啊,這里 view 的父控件可是根視圖節(jié)點(diǎn)了,所以向右偏移量很大,直接出去了,大伙沒(méi)有沒(méi)想過(guò)要是給這個(gè) view 添加一個(gè)父控件,會(huì)怎么樣呢...讓我們來(lái)看看:
view 的大小是100dp,給view 添加一個(gè)200dp 的外殼,藍(lán)色背景
xml布局:
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:background="@color/colorPrimary">
android:id="@+id/acg"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:layout_marginTop="50dp"
android:src="@color/colorAccent"/>
動(dòng)畫(huà)不變,還是設(shè)置80%p
效果圖:
ezgif.com-video-to-gif.gif
啊嘞,咱們的粉色的 view 怎么沒(méi)了,啦啦啦,大伙不知道平時(shí)注意沒(méi)有,viewGroup 是不允許子控件超出自己的范圍的,所以咱們的 view 在位移出父控件的范圍后就消失不見(jiàn)了,這里我們需要設(shè)置一下:
需要在布局根節(jié)點(diǎn)設(shè)置android:clipChildren="false"才行,注意不是在這個(gè)父控件設(shè)置,是在 xml 的根節(jié)點(diǎn)設(shè)置,這點(diǎn)要注意啊,看我的這篇文章 Android 布局小技巧匯總
xml 根節(jié)點(diǎn)設(shè)置 android:clipChildren="false" 才行
Snip20170724_20.png
效果圖:
ezgif.com-video-to-gif.gif
這樣接可以看到效果了,這次位移的幅度就是我們添加的這個(gè)200dp 的父控件了
scale 縮放動(dòng)畫(huà)
效果圖:
ezgif.com-video-to-gif.gif
這是縮放的效果,和預(yù)想的有點(diǎn)不同的是,縮放中心點(diǎn)怎么不是 view 的中心呢,那么我們來(lái)看下 xml 代碼:
android:duration="600"
android:fillAfter="true"
android:fromXScale="1"
android:fromYScale="1"
android:toXScale="0.3"
android:toYScale="0.3"
/>
恩,看上面的 xml 設(shè)置中,里面沒(méi)有設(shè)置縮放中心點(diǎn)的參數(shù),那么上面的縮放就是走的是默認(rèn)設(shè)置了,可以看到:縮放的默認(rèn)中心點(diǎn)是 view 的左上角,這也是 tween 動(dòng)畫(huà)坐標(biāo)系的原點(diǎn),從這一點(diǎn)考慮也是可以理解默認(rèn)中心點(diǎn)在左上角的設(shè)置了。
上面 xml 中屬性的設(shè)置很好理解,fromXX是動(dòng)畫(huà)開(kāi)始的數(shù)值,toXX 是動(dòng)畫(huà)結(jié)束時(shí)的數(shù)值,這里說(shuō)一下,縮放的數(shù)值 1 是原始大小,0是沒(méi)有大小,2是原始大小的2倍,所以說(shuō)縮放的參數(shù)很好理解。
上面沒(méi)寫(xiě)縮放中心點(diǎn)設(shè)置,那么當(dāng)然中心點(diǎn)也是可以設(shè)置的,參數(shù)是:pivotX/pivotY,中心點(diǎn)的坐標(biāo),比如中心點(diǎn)設(shè)置在 view 的中心,數(shù)值可以這樣寫(xiě):50% 。寫(xiě)0.5表示偏移量是px 值。50%p表示中心點(diǎn)在view 的左上角坐標(biāo)+父容器的寬高的一半之后的位置
xml
android:duration="600"
android:fillAfter="true"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.3"
android:toYScale="0.3"
/>
效果圖:
ezgif.com-video-to-gif.gif
rotate 旋轉(zhuǎn)動(dòng)畫(huà)
效果圖:
ezgif.com-video-to-gif.gif
xml:
android:duration="600"
android:fillAfter="true"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360"
/>
rotate 和 scale 差不多,除了數(shù)值不同,其他都一樣。rotate 因?yàn)槭切D(zhuǎn),所以參數(shù)肯定是設(shè)置的旋轉(zhuǎn)多少度,需要注意的是正數(shù)是順時(shí)針轉(zhuǎn),負(fù)數(shù)是逆時(shí)針轉(zhuǎn),其他的沒(méi)什么可說(shuō)的了。
alphe 透明度動(dòng)畫(huà)
效果圖:
ezgif.com-video-to-gif.gif
xml:
android:duration="600"
android:fillAfter="true"
android:fromAlpha="1"
android:toAlpha="0"
/>
哈哈,看完上面的 alphe透明度動(dòng)畫(huà)很簡(jiǎn)單了吧,注意數(shù)值1是不透明,0是完全透明。
tween動(dòng)畫(huà)的 repeat 重復(fù)模式
translate 的第一個(gè)效果圖就是使用了動(dòng)畫(huà)的重復(fù)模式的,簡(jiǎn)單的說(shuō)重復(fù)模式就是在動(dòng)畫(huà)結(jié)束后對(duì) view 進(jìn)行一些邏輯上的操作,可以重復(fù)執(zhí)行和反向執(zhí)行。
這里設(shè)計(jì)到2個(gè)參數(shù)設(shè)置: repeatMode / repeatCount,重復(fù)模式 / 重復(fù)次數(shù)
先看一下xml 的屬性設(shè)置
android:duration="600"
android:fillAfter="true"
android:fromXDelta="0"
android:fromYDelta="0"
android:repeatCount="1"
android:repeatMode="reverse"
android:toXDelta="80%"
android:toYDelta="80%"
/>
這里一個(gè)位移動(dòng)畫(huà),里面設(shè)置有重復(fù)模式和重復(fù)次數(shù)。首先說(shuō)明一下,repeatMode和repeatCount二者缺一不可,必須都得寫(xiě)才能生效
repeatMode 分2種:
reverse 反向執(zhí)行動(dòng)畫(huà),就是動(dòng)畫(huà)時(shí)怎么來(lái)的,就怎么回去
restart 重復(fù)執(zhí)行動(dòng)畫(huà),就是動(dòng)畫(huà)反復(fù)執(zhí)行,不過(guò)注意動(dòng)畫(huà)結(jié)束后就會(huì)回到初始位置,顯得有些突兀
我們來(lái)看看效果是什么樣的,這樣才好理解不是,注意這里 repeatCount 都是設(shè)置為1
reverse 反向執(zhí)行效果圖:
ezgif.com-video-to-gif.gif
restart 重復(fù)執(zhí)行效果圖:
ezgif.com-video-to-gif.gif
這里使用了高采樣率轉(zhuǎn)換的 gif,可以很 清楚的看出來(lái)在第一次動(dòng)畫(huà)執(zhí)行完后瞬間 view 就回歸到了初始位置再執(zhí)行了一次動(dòng)畫(huà),中間切換的效果太突兀了,不是很友好。
好了看完了 repeatMode ,那么大家來(lái)猜測(cè)下 repeatCount 重復(fù)次數(shù)的使用規(guī)律,其實(shí)看完上面的都應(yīng)該明白了,重復(fù)次數(shù)是指動(dòng)畫(huà)在執(zhí)行完成后再按照某種方式執(zhí)行多少次,我們寫(xiě)在 repeatCount 里面的數(shù)字是不包含第一次的,注意這點(diǎn)基本就可以了,比如我們想讓上面這個(gè)動(dòng)畫(huà)來(lái)回執(zhí)行2個(gè)大循環(huán),既動(dòng)畫(huà)執(zhí)行完后反向執(zhí)行一次這算一個(gè)大循環(huán),那么repeatCount我們寫(xiě)幾呢,是3,不算第一次,大伙算算,自己試試,下面是效果圖:
ezgif.com-video-to-gif.gif
好了是不是很咱們想的一樣,自己多動(dòng)手,多試試,google 的 api 基本我們都能搞明白。
AnimationSet 動(dòng)畫(huà)集合
android 中的動(dòng)畫(huà)不單單可以單獨(dú)執(zhí)行一種效果,更是可以多個(gè)動(dòng)畫(huà)效果一起執(zhí)行的。下面看個(gè)例子:
android:duration="600"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:shareInterpolator="true">
android:fromXDelta="0"
android:fromYDelta="0"
android:repeatCount="1"
android:repeatMode="reverse"
android:toXDelta="80%"
android:toYDelta="80%"/>
android:fromAlpha="1"
android:repeatCount="1"
android:repeatMode="reverse"
android:toAlpha="0.2"/>
效果圖:
ezgif.com-video-to-gif.gif
單個(gè)動(dòng)畫(huà)中有的參數(shù)可以寫(xiě)到 set 動(dòng)畫(huà)集合中去,比如時(shí)間,但是重復(fù)這塊就不行了,我需要寫(xiě)到單個(gè)里才行
set 中有2個(gè)新的屬性 interpolator 這個(gè)是插值器,是控制動(dòng)畫(huà)執(zhí)行曲線的,系統(tǒng)提供的默認(rèn)值就夠我們使用的了,shareInterpolator 是設(shè)置所有的單項(xiàng)動(dòng)畫(huà)是否都使用 set 中的這個(gè)插值器,具體的插值器我們下節(jié)說(shuō),一看就懂
監(jiān)聽(tīng)方法
差點(diǎn)忘了動(dòng)畫(huà)是可以加監(jiān)聽(tīng)的,很多時(shí)候我們?cè)趧?dòng)畫(huà)執(zhí)行完成后要做點(diǎn)什么不是嘛
animation1.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
AniamtionSet 動(dòng)畫(huà)集合也是可以添加監(jiān)聽(tīng)的。上面的代碼中提供了3個(gè)回調(diào)函數(shù),中規(guī)中矩,開(kāi)始,結(jié)束,重復(fù)。
總結(jié)
好了最后讓我們來(lái)總結(jié)下使用時(shí)的注意點(diǎn):
4種動(dòng)畫(huà),位移支持3種參數(shù)形式,其他的不行
重復(fù)模式和重復(fù)次數(shù)要搞清楚
tween 動(dòng)畫(huà)雖然現(xiàn)在用的機(jī)會(huì)很少了,但是這是 android 動(dòng)畫(huà)的基礎(chǔ),之后的屬性動(dòng)畫(huà)在使用時(shí)參數(shù)也是大體沒(méi)有變化的。所以學(xué)好 tween 動(dòng)畫(huà),有其是期中一些參數(shù)的數(shù)值范圍,效果是很有必要的。好了就這么多了,更多的在參考資料里啦
參考資料
總結(jié)
以上是生活随笔為你收集整理的android 同根动画_android 动画系列 (1) - tween 动画(view动画)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 软件项目管理相关概念介绍笔记
- 下一篇: 51学吧