Android漂浮背景效果的制作方法

GIF动图效果不是很好，实际效果非常平滑very smooth，而且添加不同的图形可以组成各种效果，目前已经用在我们项目的注册界面～

原理：

实现原理很简单，每一个悬浮的“小物体”就是一个自定义View，这些小的自定义View都盛放在一个自定义的ViewGroup中。然后所有的视图都放在这个ViewGroup之上，这样就相当于做一个可动的背景。

下面结合代码详细介绍下：

详解：

FloatObject

悬浮的物体，继承自View，需要重写onDraw方法，主要作用就是来画出自己，并进行随机曲线运动。

任何需要画出的对象都需要继承FloatObject，并重写提供的drawFloatObject方法，在此方法中可以通过设置画笔和画布画出任意图形。比如下面是画出一行文字：

public class FloatText extends FloatObject {
 String text;

 public FloatText(float posX, float posY, String text) {
 super(posX, posY);
 this.text = text;
 setAlpha(88);
 setColor(Color.WHITE);
 }

 @Override
 public void drawFloatObject(Canvas canvas, float x, float y, Paint paint) {
 paint.setTextSize(65);
 canvas.drawText(text, x, y, paint);
 }
}

随机曲线：

其实最复杂的部分就是让漂浮的物体做随机无规则的曲线运动，并且每个漂浮物的速度不同，这样整个漂浮动画才更加自然。

我之前想过使用布朗运动，但是在网上找了好久也没找到一个好用的算法。

最后只能还是使用3点赛贝尔曲线，使漂浮物沿着一条赛贝尔曲线运动，达到终点时，再随机产生一条新的曲线，这样就可以实现随机曲线运动了。

控制运动的代码如下：

public void drawFloatItem(Canvas canvas) {

 switch (status) {
  case START:
  // fade in
  if (isFade() && alpha <= ALPHA_LIMIT) {
   paint.setAlpha(alpha);
   alpha += ALPHA_PER_FRAME;
  } else {
   setStatus(MOVE);
  }
  break;
  case MOVE:
  // 更新赛贝尔曲线点
  if (mCurDistance == 0) {
   start = new PointF(x, y);
   end = getRandomPoint((int)start.x, (int)start.y, (int) distance);// 取值范围distance
   c1 = getRandomPoint((int)start.x, (int)start.y, random.nextInt(width / 2)); // 取值范围width/2
   c2 = getRandomPoint(end.x, end.y, random.nextInt(width / 2));// 取值范围width/2
  }

  // 计算塞贝儿曲线的当前点
  PointF bezierPoint = CalculateBezierPoint(mCurDistance / distance, start, c1, c2, end);
  x = bezierPoint.x;
  y = bezierPoint.y;

  // 更新当前路径
  mCurDistance += MOVE_PER_FRAME;

  // 一段画完后重置
  if (mCurDistance >= distance) {
   mCurDistance = 0;
  }
  break;
  case END:
  // fade out
  if (isFade() && alpha > 0) {
   paint.setAlpha(alpha);
   alpha -= ALPHA_PER_FRAME;
  } else {
   setStatus(FINISH);
  }
  break;
 }

 if (status != FINISH) {
  Log.e("drawFloatObject", x+", "+y);
  drawFloatObject(canvas, x ,y, paint);
 }
 }

关于赛贝尔曲线运动的算法都是复用之前写的一篇文章ANDROID模拟火花粒子的滑动喷射效果，如果大家有兴趣可以看看。

FloatBackground

FloatBackground继承自FrameLayout，里面有一个用于存放FloatObject的集合。
FloatBackground的主要作用就是绘制所有的“漂浮物”，以及维护其生命周期：

初始化：

 private void initFloatObject(int width, int height) {
 for (FloatObject floatObject : floats) {
  int x = (int) (floatObject.posX * width);
  int y = (int) (floatObject.posY * height);
  floatObject.init(x, y, width, height);
 }
 }

绘制：

 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 for (FloatObject floatObject : floats) {
  floatObject.drawFloatItem(canvas);
 }
 // 隔一段时间重绘一次, 动画效果
 getHandler().postDelayed(runnable, DELAY);

 }

 // 重绘线程
 private Runnable runnable = new Runnable() {
 @Override
 public void run() {
  invalidate();
  // 控制帧数
 }
 };

开始和结束：

 public void startFloat() {
 for (FloatObject floatObject : floats) {
  floatObject.setStatus(FloatObject.START);
 }
 }

 public void endFloat() {
 for (FloatObject floatObject : floats) {
  floatObject.setStatus(FloatObject.END);
 }
 }

使用

使用时非常简单，在layout文件中将FloatBackground设置为最底层的视图（其实就是当作一个背景）：

 <com.dean.library.FloatBackground
 android:id="@+id/float_view"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <LinearLayout
  android:layout_gravity="center"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">

  <Button
  android:id="@+id/start"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:text="Start" />

  <Button
  android:id="@+id/end"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:text="End" />
 </LinearLayout>
 </com.dean.library.FloatBackground>

在代码中进行如下调用：

final FloatBackground floatBackground = (FloatBackground) this.findViewById(R.id.float_view);

 Button start = (Button) this.findViewById(R.id.start);
 start.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  floatBackground.startFloat();
  }
 });

 Button end = (Button) this.findViewById(R.id.end);
 end.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  floatBackground.endFloat();
  }
 });

 floatBackground.addFloatView(new FloatRect(0.2f, 0.3f, 30, 40));
 floatBackground.addFloatView(new FloatBitmap( this, 0.2f, 0.3f, R.drawable.gr_ptn_03));
 floatBackground.addFloatView(new FloatCircle( 0.8f, 0.8f));
 floatBackground.addFloatView(new FloatText( 0.3f, 0.6f, "E"));
 floatBackground.addFloatView(new FloatRing( 0.6f, 0.2f, 15 ,20));

浮物”时：floatBackground.addFloatView(new FloatText( 0.3f, 0.6f, “E”))
接收的三个参数分别为出生位置在屏幕宽的百分比，长的百分比，和显示的文字。

Github

https://github.com/a396901990/FloatBackground

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Android漂浮背景效果  # Android漂浮背景  # Android背景效果  # Android TextView设置背景色与边框的方法详解  # Android ListView的item背景色设置和item点击无响应的解决方法  # Android selector背景选择器的使用详解  # android 自定义ScrollView实现背景图片伸缩的实现代码及思路  # android实现背景平铺的三种方法  # Android实现沉浸式通知栏通知栏背景颜色跟随app导航栏背景颜色而改变  # Android编程实现popupwindow弹出后屏幕背景变成半透明效果  # android中实现背景图片颜色渐变方法  # Android编程简单实现ImageView点击时背景图修改的方法  # Android中实现布局背景模糊化处理的方法  # 贝尔  # 画出  # 自定义  # 重写  # 漂浮物  # 都是  # 布朗运动  # 很好  # 放在  # 也没  # 在此  # 可以通过  # 很简单  # 有兴趣  # 找了  # 做一个  # 想过  # 详细介绍  # 分别为  # 好用 

相关文章： 如何通过商城自助建站源码实现零基础高效建站？  香港服务器选型指南：免备案配置与高效建站方案解析  如何登录建站主机？访问步骤全解析  魔方云NAT建站如何实现端口转发？  定制建站价位费用解析与套餐推荐全攻略  如何用PHP快速搭建高效网站？分步指南  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  IOS倒计时设置UIButton标题title的抖动问题  哈尔滨网站建设策划,哈尔滨电工证查询网站？  简历在线制作网站免费,免费下载个人简历的网站是哪些？  一键网站制作软件,义乌购一件代发流程？  北京专业网站制作设计师招聘,北京白云观官方网站？  建站主机选哪家性价比最高？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  建站主机是什么？如何选择适合的建站主机？  如何访问已购建站主机并解决登录问题？  上海制作企业网站有哪些,上海有哪些网站可以让企业免费发布招聘信息？  太原网站制作公司有哪些,网约车营运证查询官网？  如何在景安云服务器上绑定域名并配置虚拟主机？  建站之星展会模板：智能建站与自助搭建高效解决方案  如何在IIS7中新建站点？详细步骤解析  临沂网站制作企业,临沂第三中学官方网站？  如何通过wdcp面板快速创建网站？  如何快速搭建高效服务器建站系统？  相亲简历制作网站推荐大全,新相亲大会主持人小萍萍资料？  香港服务器如何优化才能显著提升网站加载速度？  如何用西部建站助手快速创建专业网站？  青浦网站制作公司有哪些,苹果官网发货地是哪里？  建站主机选购指南与交易推荐：核心配置解析  PHP正则匹配日期和时间(时间戳转换)的实例代码  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  网站制作公司,橙子建站是合法的吗？  建站之星官网登录失败？如何快速解决？  如何零基础在云服务器搭建WordPress站点？  建站主机系统SEO优化与智能配置核心关键词操作指南  制作营销网站公司,淘特是干什么用的？  如何确保西部建站助手FTP传输的安全性？  大连 网站制作,大连天途有线官网？  道歉网站制作流程,世纪佳缘致歉小吴事件，相亲网站身份信息伪造该如何稽查？  如何通过VPS建站无需域名直接访问？  微网站制作教程,不会写代码，不会编程，怎么样建自己的网站？  如何零基础开发自助建站系统？完整教程解析  制作网站哪家好,cc、.co、.cm哪个域名更适合做网站？  建站主机是否等同于虚拟主机？  深圳企业网站制作设计,在深圳如何网上全流程注册公司？  大连网站制作公司哪家好一点,大连买房网站哪个好？  网站制作企业,网站的banner和导航栏是指什么？  微信推文制作网站有哪些,怎么做微信推文，急？  css网站制作参考文献有哪些,易聊怎么注册？  相册网站制作软件,图片上的网址怎么复制？