Android仿抖音的音乐旋转

0
回复
199
查看
[复制链接]

2

主题

29

帖子

157

安币

程序猿

Rank: 2

发表于 2019-5-14 17:10:01 | 显示全部楼层 |阅读模式
如果对本篇文章感兴趣,请前往,原文地址:http://www.apkbus.com/blog-964955-80059.html

这次是实现一个仿抖音的音乐旋转自定义View,先看一下效果![Picture](https://upload-images.jianshu.io/upload_images/8850933-9d3210bbfdf0ffa7.gif)实现这个效果主要是采用的拼凑的方法,即先实现音符动画再实现图片旋转动画然后将两个效果合并到一起。![Picture](https://upload-images.jianshu.io/upload_images/8850933-383035f1e3efe2d9.png)### 先看下概念图![Picture](https://upload-images.jianshu.io/upload_images/8850933-ba057648b0d2d6fb.png)### 音符动画音符动画这里是利用贝塞尔曲线 PathMeasure ValueAnimator来实现的![Picture](https://upload-images.jianshu.io/upload_images/8850933-4fe9efa5e5ac0ed3.png)1.贝塞尔曲线的绘制:因为音符的运动轨迹是自下而上的,因此我们在添加Path路径的时候需要先将起点移到右下角,然后再绘制贝塞尔曲线。```javapath = new Path();//将起点移到右下角path.moveTo(getWidth(),getHeight()-getWidth()/6);//绘制自下而上的贝塞尔曲线path.quadTo(0,getHeight(),getWidth()/4,0);```![Picture](https://upload-images.jianshu.io/upload_images/8850933-0f051f7df955f4cd.gif)2.PathMeasure ValueAnimator实现音符沿轨迹运动```javaprivate void initPath() {    //新建两个float数组pos用来存储每个轨迹点的坐标,tan用来存储正切值    pos = new float[2];    tan = new float[2];    path = new Path();    path.moveTo(getWidth(),getHeight()-getWidth()/6);    path.quadTo(0,getHeight(),getWidth()/4,0);    pathMeasure = new PathMeasure(path,false);    length = pathMeasure.getLength();    valueAnimator = ValueAnimator.ofFloat(0,2f);    valueAnimator.setDuration(3000);    //设置重复执行动画    valueAnimator.setRepeatCount(ValueAnimator.INFINITE);    //设置为匀速运动    valueAnimator.setInterpolator(new LinearInterpolator());    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {        @Override        public void onAnimationUpdate(ValueAnimator animation) {float temp=(float) animation.getAnimatedValue();val= temp/2;//这里实现音符的透明度从0~1~0的效果if(temp>1){    Music3.this.setAlpha(Math.abs(temp-2f));}else {    Music3.this.setAlpha(temp);}//更新界面invalidate();        }    });    valueAnimator.start();}@Overrideprotected void onDraw(Canvas canvas) {    super.onDraw(canvas);    //获取每个点对应的坐标    pathMeasure.getPosTan(length*val,pos,tan);    //创建音符BitMap宽高是逐渐放大的    scaledBitmap = Bitmap.createScaledBitmap(bitmap, (int)(getWidth()/5*val) 4, (int)(getWidth()/5*val) 4, true);    canvas.drawPath(path,paint);    canvas.drawBitmap(scaledBitmap,pos[0],pos[1],paint);}```![Picture](https://upload-images.jianshu.io/upload_images/8850933-5bc9d199074ec173.gif)### 图片旋转这里我引用的一个第三方的圆形图片库```groovyimplementation 'de.hdodenhof:circleimageview:2.2.0'```实现图片旋转```javacircleImageView = findViewById(R.id.mm);RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);rotateAnimation.setInterpolator(new LinearInterpolator());rotateAnimation.setDuration(4000);rotateAnimation.setRepeatCount(Animation.INFINITE);circleImageView.startAnimation(rotateAnimation);```![Picture](https://upload-images.jianshu.io/upload_images/8850933-518e7b666d034cb7.gif)最后附上源码[https://gitee.com/itfittnesss/DouYinMusic](https://gitee.com/itfittnesss/DouYinMusic)个人博客[https://myml666.github.io](https://myml666.github.io)  继续阅读全文



想在安卓巴士找到更多优质博文,可移步博客区

如果对本篇文章感兴趣,请前往,
原文地址:
http://www.apkbus.com/blog-964955-80059.html
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )