十年专注于品牌网站建设 十年专注于品牌网站建设,低调、高逼格、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

如何创建circular reveal动画特效?

百恒网络 2017-08-17 191

南昌APP开发中,同行朋友都知道,material design引入了很多漂亮的动画特效。实现时,有些很容易,有些比较困难,需要花点力气。不过,如果能善用Android提供的便利工具,事情就好办得多。

就拿circular reveal动画来说,circular reveal动画看起来就像墨滴在一张纸上向外快速扩散。从一个交互点出发(通常是用户的按压点),视图或是一段文字向外扩散式显现。模拟效果如图1所示。

circular reveal动画特效演示

图1 circular reveal动画特效演示

那么如何创建circular reveal动画特效呢?其实也不难,要创建circular reveal动画特效,可调用ViewAnimationUtils的createCircularReveal(...) 方法。该方法有5个参数:

static Animator createCircularReveal(View view, int centerX, int centerY,float startRadius, float endRadius)

第一个View参数就是要向外扩散显现的视图。在图1中,这个视图就是和 BeatBoxFragment宽高一致的红色实心视图。如果动画从startRadius(值为0)圆点开始到 endRadius结束,这个红点视图会先变为透明状态,并随着一个不断放大的圆慢慢显现。centerX 和centerY是这个圆的圆点坐标(也就是View的坐标)。该方法会返回一个Animator。

此外,南昌APP制作开发公司-百恒网络认为,circular reveal动画应该开始于用户手指在屏幕上的触点。所以,首先要找到用户点击视图的坐标,具体操作看如下代码。

找到点击视图坐标

@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]);

}

然后开始执行circular reveal动画,如下代码所示。

执行circular reveal动画

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();

}

}

注意,成功调用createCircularReveal(...)方法的前提条件是,布局中已有目标视图。

以上便是本公司为大家介绍的关于在南昌APP开发中创建circular reveal动画特效的方法,这种特效的实现比较简单,大家也应该比较好理解,如果大家还有哪些不明白的地方,可随时来电和我们联系,百恒专业为您讲解。此外,若有需要开发APP的朋友,百恒网络期待与您的合作,我们将随时为您效劳!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×