Android仿百度地图小度语音助手的贝塞尔曲线动画

本文为大家分享了Android仿小度语音助手的贝塞尔曲线动画,供大家参考,具体内容如下

废话不多说,看下面的动图,和百度的还是有点点差别,我也不修改了,很简单,我实在是没有多余的时间,还要学习其他的东西。

package com.example.helang.volumewave;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Shader;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.DecelerateInterpolator;

import java.util.Random;

/**
 * 仿百度的语音助手--波浪动画控件
 */
public class VolumeWaveView extends View {
  private static final String TAG = "VolumeWaveView";

  private static final int HEIGHT = 400;//整个控件的高度

  private static final int HEIGHT1 = 200;//第一层曲线的高度
  private static final int HEIGHT2 = 400;//第二层曲线的高度
  private static final int HEIGHT3 = 350;//第三层曲线的高度

  private float h1 = 200,h2 = 200, h3 = 300,h4 = 300,h5 = 200;

  private int range = 0;//波动的幅度,你可以动态改变这个值,比如麦克风录入的音量的高低

  private static final int splitWidth = -200;//扇形的交错距离

  private Path path;
  private Paint paint1,paint2,paint3,paint4;

  private LinearGradient linearGradient1,linearGradient2,linearGradient3,linearGradient4;//四种渐变色

  private ValueAnimator animator1,animator2,animator3,animator4,animator5;//五种动画

  public VolumeWaveView(Context context) {
    this(context,null);
  }

  public VolumeWaveView(Context context, @Nullable AttributeSet attrs) {
    this(context,attrs,0);
  }

  public VolumeWaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs,defStyleAttr);
    initPaint();

  }

  private void initPaint(){
    path = new Path();

    paint1 = new Paint();
    paint1.setStyle(Paint.Style.FILL);
    paint1.setAntiAlias(true);//抗锯齿
    //渐变色1
    linearGradient1 = new LinearGradient(0, 0, 0, HEIGHT1,
        Color.parseColor("#e652a6d2"), Color.parseColor("#e652d5a1"), Shader.TileMode.MIRROR);
    paint1.setShader(linearGradient1);

    paint2 = new Paint();
    paint2.setAntiAlias(true);//抗锯齿
    paint2.setStyle(Paint.Style.FILL);
    //渐变色2
    linearGradient2 = new LinearGradient(0, 0, 0, HEIGHT2,
        Color.parseColor("#e68952d5"), Color.parseColor("#e6525dd5"), Shader.TileMode.MIRROR);
    paint2.setShader(linearGradient2);

    paint3 = new Paint();
    paint3.setAntiAlias(true);//抗锯齿
    paint3.setStyle(Paint.Style.FILL);
    //渐变色3
    linearGradient3 = new LinearGradient(0, 0, 0, HEIGHT3,
        Color.parseColor("#e66852d5"), Color.parseColor("#e651b9d2"), Shader.TileMode.MIRROR);
    paint3.setShader(linearGradient3);

    paint4 = new Paint();
    paint4.setAntiAlias(true);//抗锯齿
    paint4.setStyle(Paint.Style.FILL);
    //渐变色4
    linearGradient4 = new LinearGradient(0, 0, 0, HEIGHT2,
        Color.parseColor("#e6d5527e"), Color.parseColor("#e6bf52d5"), Shader.TileMode.MIRROR);
    paint4.setShader(linearGradient4);

  }

  /**
   * draw方法中不要创建大量对象,尽量复用对象
   * @param canvas
   */
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    drawLayer3(canvas);
    drawLayer2(canvas);
    drawLayer1(canvas);
  }

  /**
   * 绘制第一层
   * @param canvas
   */
  private void drawLayer1(Canvas canvas){
    path.reset();//重置path
    path.moveTo(0, HEIGHT);//起点
    path.quadTo(getWidth()/4, HEIGHT-h1, getWidth()/2, HEIGHT);//第一条二阶贝塞尔曲线

    path.moveTo(getWidth()/2+splitWidth,HEIGHT);
    path.quadTo(getWidth()/2+splitWidth+getWidth()/4, HEIGHT-h2, getWidth(), HEIGHT);//第二条二阶贝塞尔曲线
    canvas.drawPath(path,paint1);
  }

  /**
   * 绘制第二层
   * @param canvas
   */
  private void drawLayer2(Canvas canvas){
    path.reset();//重置path
    path.moveTo(0, HEIGHT);//起点
    path.quadTo(getWidth()/4, HEIGHT-h3, getWidth()/2, HEIGHT);//第一条二阶贝塞尔曲线
    canvas.drawPath(path,paint2);

    path.reset();
    path.moveTo(getWidth()/2+splitWidth,HEIGHT);
    path.quadTo(getWidth()/2+getWidth()/4, HEIGHT-h4, getWidth(), HEIGHT);//第二条二阶贝塞尔曲线
    canvas.drawPath(path,paint4);

  }

  /**
   * 绘制第三层
   * @param canvas
   */
  private void drawLayer3(Canvas canvas){
    path.reset();//重置path
    path.moveTo(200,HEIGHT);
    path.quadTo(200+getWidth()/3, HEIGHT-h5, getWidth(), HEIGHT);//二阶贝塞尔曲线
    canvas.drawPath(path,paint3);
  }

  /**
   * 添加属性动画
   */
  public void startAnimation() {
    Random random = new Random();
    range = random.nextInt(100)%(100-10+1) + 10;//波动的幅度,模拟动态音量输入,你可以自己设置

    animator1 = ValueAnimator.ofInt(0,HEIGHT1,0);
    animator1.setDuration(1400);
    animator1.setInterpolator(new DecelerateInterpolator());
    //无限循环
    animator1.setRepeatCount(ValueAnimator.INFINITE);
    animator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        h1 = (int) animation.getAnimatedValue();
        invalidate();

      }
    });
    animator1.start();

    animator2 = ValueAnimator.ofInt(0,HEIGHT1,0);
    animator2.setDuration(1700);
    animator2.setInterpolator(new DecelerateInterpolator());
    //无限循环
    animator2.setRepeatCount(ValueAnimator.INFINITE);
    animator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        h2 = (int) animation.getAnimatedValue();
        invalidate();

      }
    });
    animator2.start();

    animator3 = ValueAnimator.ofInt(0,HEIGHT2,0);
    animator3.setDuration(1600);
    animator3.setInterpolator(new DecelerateInterpolator());
    //无限循环
    animator3.setRepeatCount(ValueAnimator.INFINITE);
    animator3.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        h3 = (int) animation.getAnimatedValue() + range;
        invalidate();

      }
    });
    animator3.start();

    animator4 = ValueAnimator.ofInt(0,HEIGHT2,0);
    animator4.setDuration(1300);
    animator4.setInterpolator(new DecelerateInterpolator());
    //无限循环
    animator4.setRepeatCount(ValueAnimator.INFINITE);
    animator4.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        h4 = (int) animation.getAnimatedValue();
        invalidate();

      }
    });
    animator4.start();

    animator5 = ValueAnimator.ofInt(0,HEIGHT2,0);
    animator5.setDuration(1250);
    animator5.setInterpolator(new DecelerateInterpolator());
    //无限循环
    animator5.setRepeatCount(ValueAnimator.INFINITE);
    animator5.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        h5 = (int) animation.getAnimatedValue();
        invalidate();

      }
    });
    animator5.start();
  }

  /**
   * 关闭动画
   */
  public void removeAnimation(){
    if (animator1 != null){
      animator1.cancel();
      animator1 = null;
    }
    if (animator2 != null){
      animator2.cancel();
      animator2 = null;
    }
    if (animator3 != null){
      animator3.cancel();
      animator3 = null;
    }
    if (animator4 != null){
      animator4.cancel();
      animator4 = null;
    }
    if (animator5 != null){
      animator5.cancel();
      animator5 = null;
    }
  }

}

主要是利用Path中的贝塞尔曲线,然后加上属性动画,动态改变曲线的高度就可以了

喜欢的话,就去github给个star吧

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

(0)

相关推荐

  • Android利用二阶贝塞尔曲线实现添加购物车动画详解

    一.引入 其实之前一直以为像饿了么或者是美团外卖那种把商品添加到购物车的动画会很难做,但是实际做起来好像并没有想象中的那么难哈哈. 布局主要使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+TabLayout+ViewPager 动画主要使用二阶贝塞尔曲线与属性动画 消息传递使用EventBus普通事件 二.大致思路 1.如图所示主要有三个点,起点.终点.以及贝塞尔曲线的控制点 2.起点即点击的View的位置,一般来说用如下方式即可

  • Android贝塞尔曲线实现直播点赞效果

    本文实例为大家分享了Android实现直播点赞效果的具体代码,供大家参考,具体内容如下 效果展示 原理分析 点赞效果最主要的难点和原理在于贝塞尔曲线动画的生成,我们通过图片主要讲解贝塞尔曲线动画 1.需要找到贝塞尔曲线的四个点 2.通过三级贝塞尔曲线的公式计算,获取贝塞尔曲线的轨迹路径点 3.通过设置点赞图片X,Y坐标,从而形成点赞的效果 实现步骤 1.初始化变量 //1.继承RelativeLayout public class ChristmasView extends RelativeLa

  • Android贝塞尔曲线实现消息拖拽消失

    写在前头 写消息拖拽效果的文章不少,但是大部分都把自定义View写死了,我们要实现的是传入一个View,每个View都可以实现拖拽消失爆炸的效果,当然我也是站在巨人的肩膀上来学习的.但个人觉得程序员本就应该敢于学习和借鉴. 源码地址:源码Github地址 效果图 分析(用到的知识点):  (1)ValueAnimator (数值生成器) 用于生成数值,可以设置差值器来改变数字的变化幅度. (2)ObjectAnimator (动画生成器) 用于生成各种属性,布局动画,同样也可以设置差值器来改变效

  • Android贝塞尔曲线实现填充不规则图形并随手指运动

    贝塞尔曲线: 贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计.贝塞尔曲线最初由 Paul de Casteljau 于 1959 年运用 de Casteljau 演算法开发,以稳定数值的方法求出贝兹曲线.贝塞尔曲线主要用于二维图形应用程序中的数学曲线,曲线由起始点,终止点(也称锚点)和控制点组成,通过调整控制点,贝塞尔曲线的形状会发生变化. 在此举一个例子,实现贝塞尔曲线,基于以下场景: 上面的图片,我们可以见到一个白色的区域,边缘为弧形,这

  • Android贝塞尔曲线初步学习第一课

    贝塞尔曲线有一阶.二阶.三阶.N阶 一阶就是一条直线,有起点终点,没有控制点,对应方法就是 canvas.drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint) ; 二阶为曲线,有起点终点,一个控制点,对应方法就是 path.quadTo(float x1, float y1, float x2, float y2); 其中x1.y1为控制点坐标, x2.y2为终点坐标,效果如下:

  • Android使用贝塞尔曲线仿QQ聊天消息气泡拖拽效果

    本文实例为大家分享了Android仿QQ聊天消息气泡拖拽效果展示的具体代码,供大家参考,具体内容如下 先画圆,都会吧.代码如下: public class Bezier extends View { private final Paint mGesturePaint = new Paint(); private final Path mPath = new Path(); private float mX1 = 100, mY1 = 150; private float mX2 = 300, m

  • Android 利用三阶贝塞尔曲线绘制运动轨迹的示例

    本篇文章主要介绍了Android 利用三阶贝塞尔曲线绘制运动轨迹的示例,分享给大家,具体如下: 实现点赞效果,自定义起始点以及运动轨迹 效果图: xml布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/rl_root&

  • Android贝塞尔曲线初步学习第三课 Android实现添加至购物车的运动轨迹

    不知上一节高仿QQ未读消息气泡大家还喜欢么,今天继续练习贝赛尔曲线,这一节我们通过贝赛尔曲线和属性动画估值器实现添加至购物车的运动轨迹,效果如下: 1.新建自定义View,重写构造方法,初始化Paint.Path: 2.确定起始点.终止点.控制点坐标,这里我们直接固定: @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh);

  • Android Path绘制贝塞尔曲线实现QQ拖拽泡泡

    这两天学习了使用Path绘制贝塞尔曲线相关,然后自己动手做了一个类似QQ未读消息可拖拽的小气泡,效果图如下: 最终效果图 接下来一步一步的实现整个过程. 基本原理 其实就是使用Path绘制三点的二次方贝塞尔曲线来完成那个妖娆的曲线的.然后根据触摸点不断绘制对应的圆形,根据距离的改变改变原始固定圆形的半径大小.最后就是松手后返回或者爆裂的实现. Path介绍: 顾名思义,就是一个路径的意思,Path里面有很多的方法,本次设计主要用到的相关方法有 moveTo() 移动Path到一个指定的点 qua

  • Android自定义view实现圆形waveview

    最近学习了贝塞尔曲线的一些知识,刚好项目中需要实现一个圆形进度,然后就将实现的waveView记录一下.需要使用的知识大概有自定义view.贝塞尔曲线.valueAnimator(属性动画).Xfermode等. 以下为效果图: 废话不多说,直接上代码这里只是一些重要的代码.如果需要demo可以去下载. 下载地址 首先需要自定义view的属性: <declare-styleable name="custom_wave_view_attr"> <attr name=&q

随机推荐