仿百度地图小度语音助手的贝塞尔曲线动画
废话不多说,看下面的动图,和百度的还是有点点差别,我也不修改了,很简单,我实在是没有多余的时间,还要学习其他的东西,累啊,(复杂的动态View,可以使用SurfaceView,效率更高,我这里就简单使用View了)
效果图:
仔细观察一下百度那个动画,其实是由三层曲线组成的;每层曲线又是由三个贝塞尔曲线组成的。所以一层一层叠加,加上颜色的渐变,就可以绘制出来类似于山峰的曲线;最后,动态改变曲线的高度就可以达到那种效果(你也可以加上声音的波动值,那就看起来更加逼真了)
一个草图(见笑了):
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.util.Log; import android.view.SurfaceHolder; import android.view.SurfaceView; 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 = 60;//第一层曲线的高度 private static final int HEIGHT2 = 40;//第二层曲线的高度 private static final int HEIGHT3 = 50;//第三层曲线的高度 private int h1 = 0,h2 = 0, h3 = 0,h4 = 0,h5 = 0; private int range = 0;//波动的幅度,你可以动态改变这个值,比如麦克风录入的音量的高低 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){ drawCurve(path,canvas,paint1,getWidth()/5,getWidth()/3,h1); drawCurve(path,canvas,paint1,getWidth()/3+getWidth()/5,getWidth()/3,h2); } /** * 绘制第二层 * @param canvas */ private void drawLayer2(Canvas canvas){ drawCurve(path,canvas,paint2,0,getWidth()/2,h3); drawCurve(path,canvas,paint4,getWidth()/2-10,getWidth()/2,h4); } /** * 绘制第三层 * @param canvas */ private void drawLayer3(Canvas canvas){ drawCurve(path,canvas,paint3,getWidth()/4,getWidth()/2,h5); } /** * 画贝塞尔曲线 * @param path * @param canvas * @param x 横向起点的位置 * @param width 曲线的整个宽度 * @param height 曲线的高度 */ private void drawCurve(Path path,Canvas canvas,Paint paint,int x,int width,int height){ path.reset(); int divideWith = width/6;//因为一个弧形是由六部分组成的,所以这里就平均分一下 path.moveTo(x,HEIGHT); path.quadTo(x+divideWith,HEIGHT-height,x+divideWith*2,HEIGHT-height*2);//B - C path.lineTo(x+divideWith*2,HEIGHT-height*2); path.quadTo(x+divideWith*3,HEIGHT-height*3,x+divideWith*4,HEIGHT-height*2); path.lineTo(x+divideWith*4,HEIGHT-height*2); path.quadTo(x+divideWith*5,HEIGHT-height,x+divideWith*6,HEIGHT); canvas.drawPath(path,paint); } /** * 添加属性动画,每一个动画的变化范围和周期都不一样,这样错开的效果才好看点 */ 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(); 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,HEIGHT3,0); animator5.setDuration(2000); 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吧
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Android动画之帧动画详解
一.概念 帧动画也叫Drawable Animation,是最简单最直观的动画类型,他利用人眼的视觉暂留效应——也就是光对视网膜所产生的视觉在光停止作用后,仍会保留一段时间的现象。在Android中实现帧动画,就是由设计师给出一系列状态不断变化的图片,开发者可以指定动画中每一帧对应的图片和持续时间,然后就可以开始播放动画了。具体有两种方式可以实现帧动画,分别是采用XML资源文件和代码实现。 二.实现 ◆XML资源文件方式 1.在res/drawable目录中放入需要的图片 2.在res/drawable目录中新建animlist.xml文件,其中oneshot表示是否循环播放false为循环播放,duration表示图片停留的时间。 <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@...
- 下一篇
Android微信授权登录内存泄漏问题
最近有个APP中使用了微信授权登录功能,项目中我们采用leakcanary来检测内存泄漏,发现微信登录有内存泄漏的问题。现将解决过程记录如下,不确定与微信SDK版本有没关系,欢迎讨论指正。 一般我们是这样使用微信登录的,包括微信给出的demo也是如此,代码片段如下: private IWXAPI mIWXAPI; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mIWXAPI = WXAPIFactory.createWXAPI(this, WX_APP_ID); mIWXAPI.registerApp(WX_APP_ID); findViewById(R.id.btn_wx_login).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) ...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- 设置Eclipse缩进为4个空格,增强代码规范
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Hadoop3单机部署,实现最简伪集群
- CentOS关闭SELinux安全模块