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

结束

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

最新文章

  1. BZOJ 3158: 千钧一发
  2. visual stuido 跨解决方案调试
  3. ROS 5.x自动定时备份并发送到邮箱(实用)
  4. JQuery实现方法,简单示例
  5. Stack的c实现
  6. math and date、ajax、画布
  7. C++与Java的语法区别
  8. assert断言基础用法
  9. 一个CSS中Z-index的用法
  10. PAT1035: Password
  11. Android 插件化和热修复知识梳理
  12. __EF批量删除
  13. __attribute__ ((default)) 和 __attribute__ ((hidden))
  14. JS内存管理
  15. 内核开发知识第二讲,编写Kerner 程序中注意的问题.
  16. 【代码笔记】iOS-UILabel根据内容自动调整高度
  17. Programming Contest Ranking(题解)
  18. python中的运算符及表达式及常用内置函数
  19. REVERSE!REVERSE!REVERSE!
  20. DBCC--EXTENTINFO/IND/PAGE--显示数据页信息

热门文章

  1. Asp.net MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合
  2. .NET跨平台之运行与Linux上的Jexus服务器
  3. 微信小程序前端源码逻辑和工作流
  4. Maven 整合FreeMarker使用
  5. sqlyog导出json数据格式支持mysql数据转存mongodb
  6. Struts2日期类型转换
  7. 我的MYSQL学习心得(十一) 视图
  8. 初尝Brnshop移植到Linux Mono Jexus环境运行
  9. ReactNative入门 —— 动画篇(下)
  10. iOS开发系列--音频播放、录音、视频播放、拍照、视频录制