在南昌APP開發(fā)中,同行朋友都知道,material design引入了很多漂亮的動(dòng)畫特效。實(shí)現(xiàn)時(shí),有些很容易,有些比較困難,需要花點(diǎn)力氣。不過,如果能善用Android提供的便利工具,事情就好辦得多。
就拿circular reveal動(dòng)畫來說,circular reveal動(dòng)畫看起來就像墨滴在一張紙上向外快速擴(kuò)散。從一個(gè)交互點(diǎn)出發(fā)(通常是用戶的按壓點(diǎn)),視圖或是一段文字向外擴(kuò)散式顯現(xiàn)。模擬效果如圖1所示。
圖1 circular reveal動(dòng)畫特效演示
那么如何創(chuàng)建circular reveal動(dòng)畫特效呢?其實(shí)也不難,要?jiǎng)?chuàng)建circular reveal動(dòng)畫特效,可調(diào)用ViewAnimationUtils的createCircularReveal(...) 方法。該方法有5個(gè)參數(shù):
static Animator createCircularReveal(View view, int centerX, int centerY,float startRadius, float endRadius)
第一個(gè)View參數(shù)就是要向外擴(kuò)散顯現(xiàn)的視圖。在圖1中,這個(gè)視圖就是和 BeatBoxFragment寬高一致的紅色實(shí)心視圖。如果動(dòng)畫從startRadius(值為0)圓點(diǎn)開始到 endRadius結(jié)束,這個(gè)紅點(diǎn)視圖會(huì)先變?yōu)橥该鳡顟B(tài),并隨著一個(gè)不斷放大的圓慢慢顯現(xiàn)。centerX 和centerY是這個(gè)圓的圓點(diǎn)坐標(biāo)(也就是View的坐標(biāo))。該方法會(huì)返回一個(gè)Animator。
此外,南昌APP制作開發(fā)公司-百恒網(wǎng)絡(luò)認(rèn)為,circular reveal動(dòng)畫應(yīng)該開始于用戶手指在屏幕上的觸點(diǎn)。所以,首先要找到用戶點(diǎn)擊視圖的坐標(biāo),具體操作看如下代碼。
找到點(diǎn)擊視圖坐標(biāo)
@Override
public void onClick(View clickSource) {
int[] clickCoords = new int[2];
// Find the location of clickSource on the screen
clickSource.getLocationOnScreen(clickCoords);
// Tweak that location so that it points at the center of the view,
// not the corner
clickCoords[0] += clickSource.getWidth() / 2;
clickCoords[1] += clickSource.getHeight() / 2;
performRevealAnimation(mViewToReveal, clickCoords[0], clickCoords[1]);
}
然后開始執(zhí)行circular reveal動(dòng)畫,如下代碼所示。
執(zhí)行circular reveal動(dòng)畫
private void performRevealAnimation(View view, int screenCenterX, int screenCenterY) {
// Find the center relative to the view that will be animated
int[] animatingViewCoords = new int[2];
view.getLocationOnScreen(animatingViewCoords);
int centerX = screenCenterX - animatingViewCoords[0];
int centerY = screenCenterY - animatingViewCoords[1];
// Find the maximum radius
Point size = new Point();
getActivity().getWindowManager().getDefaultDisplay().getSize(size);
int maxRadius = size.y;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
ViewAnimationUtils.createCircularReveal(view, centerX, centerY, 0, maxRadius)
.start();
}
}
注意,成功調(diào)用createCircularReveal(...)方法的前提條件是,布局中已有目標(biāo)視圖。
以上便是本公司為大家介紹的關(guān)于在南昌APP開發(fā)中創(chuàng)建circular reveal動(dòng)畫特效的方法,這種特效的實(shí)現(xiàn)比較簡單,大家也應(yīng)該比較好理解,如果大家還有哪些不明白的地方,可隨時(shí)來電和我們聯(lián)系,百恒專業(yè)為您講解。此外,若有需要開發(fā)APP的朋友,百恒網(wǎng)絡(luò)期待與您的合作,我們將隨時(shí)為您效勞!