在南昌APP開(kāi)發(fā)中，同行朋友都知道，material design引入了很多漂亮的動(dòng)畫(huà)特效。實(shí)現(xiàn)時(shí)，有些很容易，有些比較困難，需要花點(diǎn)力氣。不過(guò)，如果能善用Android提供的便利工具，事情就好辦得多。

就拿circular reveal動(dòng)畫(huà)來(lái)說(shuō)，circular reveal動(dòng)畫(huà)看起來(lái)就像墨滴在一張紙上向外快速擴(kuò)散。從一個(gè)交互點(diǎn)出發(fā)(通常是用戶的按壓點(diǎn))，視圖或是一段文字向外擴(kuò)散式顯現(xiàn)。模擬效果如圖1所示。

圖1 circular reveal動(dòng)畫(huà)特效演示

那么如何創(chuàng)建circular reveal動(dòng)畫(huà)特效呢?其實(shí)也不難，要?jiǎng)?chuàng)建circular reveal動(dòng)畫(huà)特效，可調(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)畫(huà)從startRadius(值為0)圓點(diǎn)開(kāi)始到 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制作開(kāi)發(fā)公司-百恒網(wǎng)絡(luò)認(rèn)為，circular reveal動(dòng)畫(huà)應(yīng)該開(kāi)始于用戶手指在屏幕上的觸點(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]);

}

然后開(kāi)始執(zhí)行circular reveal動(dòng)畫(huà)，如下代碼所示。

執(zhí)行circular reveal動(dòng)畫(huà)

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開(kāi)發(fā)中創(chuàng)建circular reveal動(dòng)畫(huà)特效的方法，這種特效的實(shí)現(xiàn)比較簡(jiǎn)單，大家也應(yīng)該比較好理解，如果大家還有哪些不明白的地方，可隨時(shí)來(lái)電和我們聯(lián)系，百恒專業(yè)為您講解。此外，若有需要開(kāi)發(fā)APP的朋友，百恒網(wǎng)絡(luò)期待與您的合作，我們將隨時(shí)為您效勞!