Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果

前言: 每次写之前都会来一段(废)话.{心塞...}

Google Play首页两个tab背景用了这个效果,三星计算器用了这个效果,酷安也看见这个效果,但就是叫不出名字!!!抓狂啊!!!

没办法,由于这个效果类似 涟漪效果,所以我就用** Ripple 为关键字,找过RippleDrawable** ,但是没发现...最后在Google的帮助下,我从一个陌生的网站看到了Reveal Effect中文翻译为:揭示效果(翻译不对你来咬我啊,哈哈哈2333)

好了,废话不多说了,先来看个效果吧.



ps:图是studio录的mp4,然后转的,gif有点卡顿感,实际效果很顺滑

核心代码

ViewAnimationUtils.createCircularReveal(
View view,//目标view
int centerX,//开始动画的起点x坐标(相对于目标view而言)
int centerY,//开始动画的起点y坐标(相对于目标view而言)
float startRadius,//初始半径
float endRadius//结束半径
);

官方文档: ViewAnimationUtils.createCircularReveal

example展示

1. activity layout 布局

<LinearLayout
android:id="@+id/activity_reveal_effect"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.didikee.demos.ui.activity.RevealEffectActivity"> <View
android:id="@+id/view"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="@color/colorAccent"
/>
<Button
android:id="@+id/bt_action"
android:text="展开/收缩"
android:layout_width="match_parent"
android:layout_height="wrap_content"/> </LinearLayout>

**2. java 代码 **

    private View view;
private double radio; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_reveal_effect);
view = findViewById(R.id.view);
findViewById(R.id.bt_action).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
createAnimation(view).start();
}
});
} @TargetApi(Build.VERSION_CODES.LOLLIPOP)
public Animator createAnimation(View v) { Animator animator;
if (radio == 0L) {
radio = Math.sqrt(Math.pow(view.getWidth(), 2) + Math.pow(view.getHeight(), 2));
}
if (isOn) {
animator = ViewAnimationUtils.createCircularReveal(
v,// 操作的视图
0,// 动画开始的中心点X
0,// 动画开始的中心点Y
(float) radio,// 动画开始半径
0);// 动画结束半径
} else {
animator = ViewAnimationUtils.createCircularReveal(
v,// 操作的视图
0,// 动画开始的中心点X
0,// 动画开始的中心点Y
0,// 动画开始半径
(float) radio);// 动画结束半径
}
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
if (!isOn) {
view.setVisibility(View.VISIBLE);
}
} @Override
public void onAnimationEnd(Animator animation) {
if (isOn) {
view.setVisibility(View.INVISIBLE);
}
isOn = !isOn;
} @Override
public void onAnimationCancel(Animator animation) { } @Override
public void onAnimationRepeat(Animator animation) { }
});
animator.setInterpolator(new DecelerateInterpolator());
animator.setDuration(500);
return animator;
}
private boolean isOn = true;//记录view的状态,第一次进去是可见的,记为true,不可见记为false

结束

代码很简单,应该有和我一样,见过这个效果但是说不出名字,知道的就当温习了哈哈,不知道可以收藏点赞以备不时只需 哇额啊(〜)〜

Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果的更多相关文章

  1. Android Material Design Ripple Effect在Android5.0(SDK=21)以下Android版本崩溃问题解决

    Android Material Design Ripple Effect在Android5.0(SDK=21)以下Android版本崩溃问题解决 附录1的Android Ripple Effect水 ...

  2. Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计

     Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计 Android Ripple Effect波纹荡漾效果,是Android Materia ...

  3. GooglePlay 首页效果----tab的揭示效果(Reveal Effect) (1)

    GooglePlay 首页效果----tab的揭示效果(Reveal Effect) (1) 前言: 无意打开GooglePlay app来着,然后发现首页用了揭示效果,连起来用着感觉还不错. 不清楚 ...

  4. Android群英传笔记——第十二章:Android5.X 新特性详解,Material Design UI的新体验

    Android群英传笔记--第十二章:Android5.X 新特性详解,Material Design UI的新体验 第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Android高 ...

  5. Material Design风格的水波涟漪效果(Ripple Effect)的实现

    Material Design是Google在2014年Google I/O大会上推出的一套全新的设计语言,经过接近两年的发展,可谓是以燎原之势影响着整个设计交互生态,和Material Design ...

  6. Android Material Design控件学习(三)——使用TextInputLayout实现酷市场登录效果

    前言 前两次,我们学习了 Android Material Design控件学习(一)--TabLayout的用法 Android Material Design控件学习(二)--Navigation ...

  7. [经验总结]material design效果与开发总结

    首先贴一个參考过的文章,写的不错: 在低版本号android系统上实现Material design应用 以下是工作中总结出来的,列出了在<5.0的设备是怎样实现material design的 ...

  8. 【转】Material Design 折叠效果 Toolbar CollapsingToolbarLayout AppBarLayout

    我非常喜欢Material Design里折叠工具栏的效果,bilibili Android客户端视频详情页就是采用的这种设计.这篇文章的第二部分我们就通过简单的模仿bilibili视频详情页的实现来 ...

  9. [转]ANDROID L——Material Design详解(动画篇)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/de ...

随机推荐

  1. Modify Branding of FreeCAD

    Modify Branding of FreeCAD eryar@163.com This article describes the Branding of FreeCAD. Branding me ...

  2. Emoji选项列表

    一.需要的前提文件 从网上下载Emoji的表情包,当然是png的图片,因为WPF不支持彩色的Emoji,所以,做列表的时候,需要用图片. 随着压缩包一起的还有一个Emoji.xml文件,文件的层级结构 ...

  3. input标签中button在iPhone中圆角的问题

    1.问题 使用H5编写微信页面时,使用<input type="button"/>时,在Android手机中显示正常,但是在iPhone手机中则显示不正常,显示为圆角样 ...

  4. C#制作简易屏保

    前言:前段时间,有个网友问我C#制作屏保的问题,我瞬间懵逼了(C#还可以制作屏保!).于是我去查阅相关资料,下面把C#如何制作屏保的过程及我学习过程的心得也记录下来,希望对需要的人能有帮助. 基本思路 ...

  5. 利用Select2优化@Html.ListBoxFor显示,学会用MultiSelectList

    最近需要用到多选框,Asp.Net MVC自带的@Html.ListBox或@Html.ListBoxFor的显示效果太差,于是找到了Select2进行优化,并正式了解了多选框的操作方法. 首先介绍多 ...

  6. springmvc SSM shiro redis 后台框架 多数据源 代码生成器

    A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单 下载地址    ; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类 ...

  7. Android 中的mvvm

    我们来了解一下MVVM模式与Databinding ,MVVM是一种模式,Databinding 是一种框架.DataBinding是一个实现数据和UI绑定的框架.而ViewModel和View可以通 ...

  8. git命令行操作

    从本地上传代码到仓库(假设已经建好仓库): 1.初始化: git init 2.将所有文件加入缓存区: git add * 3.提交当前工作空间的修改内容: git commit -m 'commit ...

  9. 技术笔记:XMPP之openfire+spark+smack

    在即时通信这个领域目前只找到一个XMPP协议,在其协议基础上还是有许多成熟的产品,而且是开源的.所以还是想在这个领域多多了解一下. XMPP协议:具体的概念我就不写了,毕竟这东西网上到处是.简单的说就 ...

  10. Vue.js——vue-router 60分钟快速入门

    概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...