两种方式实现类似水波扩散效果,先上图为敬
<李>自定义观点实现李
<李>动画实现李
<>强自定义观点实现
思路分析:通过帆布画圆,每次改变圆半径和透明度,当半径达到一定程度,再次从中心开始绘圆,达到不同层级的效果,通过不断绘制达到视图扩散效果
私人油漆centerPaint;//中心圆油漆
私人int半径=100;//中心圆半径
私人油漆spreadPaint;//扩散圆油漆
私人浮动centerX;//圆心x
私人浮动centerY;//圆心y
私人int距离=5;//每次圆递增间距
私人int maxRadius=80;//最大圆半径
私人int delayMilliseconds=33;//扩散延迟间隔,越大扩散越慢
私人List,spreadRadius=new ArrayList<的在();//扩散圆层级数,元素为扩散的距离
私人Listα=new ArrayList<在();//对应每层圆的透明度
风格文件里自定义属性
& lt; declare-styleable name=" SpreadView比;
& lt; !——中心圆颜色——比;
& lt; attr name==把丈?皊pread_center_color”格式比;
& lt; !——中心圆半径——比;
& lt; attr name==罢?皊pread_radius”格式比;
& lt; !——扩散圆颜色——比;
& lt; attr name==把丈?皊pread_spread_color”格式比;
& lt; !——扩散间距——比;
& lt; attr name==罢?皊pread_distance”格式比;
& lt; !——扩散最大半径——比;
& lt; attr name==罢?皊pread_max_radius”格式比;
& lt; !——扩散延迟间隔——比;
& lt; attr name==罢?皊pread_delay_milliseconds”格式比;
& lt;/declare-styleable>
初始化
公共SpreadView(上下文语境){
这(上下文,null, 0);
}
公共SpreadView(上下文语境,@Nullable AttributeSet attrs) {
这(上下文、attrs 0);
}
公共SpreadView(上下文语境,@Nullable AttributeSet attrs, int defStyleAttr) {
超级(上下文、attrs defStyleAttr);
TypedArray=上下文。obtainStyledAttributes (attrs R.styleable。SpreadView defStyleAttr 0);
半径=a.getInt (R.styleable。SpreadView_spread_radius,半径);
maxRadius=a.getInt (R.styleable。SpreadView_spread_max_radius maxRadius);
int centerColor=a.getColor (R.styleable。SpreadView_spread_center_color ContextCompat。R.color.colorAccent色鬼(上下文));
int spreadColor=a.getColor (R.styleable。SpreadView_spread_spread_color ContextCompat。R.color.colorAccent色鬼(上下文));
距离=a.getInt (R.styleable。SpreadView_spread_distance、距离);
a.recycle ();
centerPaint=new油漆();
centerPaint.setColor (centerColor);
centerPaint.setAntiAlias(真正的);//最开始不透明且扩散距离为0
alphas.add (255);
spreadRadius.add (0);
spreadPaint=new油漆();
spreadPaint.setAntiAlias(真正的);
spreadPaint.setAlpha (255);
spreadPaint.setColor (spreadColor);
}
确定圆心位置
@Override
保护空白>
@Override
保护空白>
& lt; com.airsaid.diffuseview.widget.SpreadView
android: id=癅 + id/spreadView”
android: layout_width=" match_parent "
android: layout_height=" wrap_content "
应用:spread_center_color=" @color/colorAccent”
应用:spread_delay_milliseconds=" 35 "
应用:spread_distance=" 5 "
应用:spread_max_radius=" 90 "
应用:spread_radius=" 100 "
应用:spread_spread_color=癅color/colorAccent”/祝辞
<>强效果图
中心圆处可以自定义写文字,画图片等等…
<强>动画实现
思路分析:通过动画实现,imageView不停做动画缩放+渐变
最中心的imageView保持不变
中间一层imageView从原始放大到1.4倍,同时从不透明变为半透明
最外层的imageView从1.4倍放大到1.8倍,同时从半透明变为全透明
利用形状画一个圆,作为动画基础视图
& lt; & # 63; xml version=" 1.0 " encoding=" utf - 8 " & # 63;比;
& lt;形状xmlns: android=" http://schemas.android.com/apk/res/android "比;
& lt;角落android:=?5”dp/半径比;
& lt;固体android:颜色=癅color/colorAccent”/比;
& lt;/shape>
