现在视频应用越来越火,periscope火起来后,国内也出现了不少跟风者,界面几乎跟periscope一模一样.periscope确实不错,点赞的效果也让人眼前一亮,很漂亮,于是乎,我就想着自己实现一下.
最终的效果图如下:
最终效果图.gif
录制的效果不太好,手机运行起来还是挺好看的.
不能说一模一样,但是也差不多了吧!~
惯例:
通过本文你将学习到什么?
- 自定义view的一些基础方法以及一些注意点
- 随机数的使用
- 插补器的使用
- 属性动画的高级用法
- 贝塞尔曲线在android中的实现以及应用
ok,如果感兴趣,那么跟着我来看看这个效果是如何实现的吧!
仔细看看,这个效果中包含了什么细节?
1、爱心出现在底部并且水平居中
2、爱心的颜色/类型 随机
3、爱心进入时候有一个缩放的动画
4、缩放完毕后,开始变速向上移动,并且伴随alpha渐变效果
5、爱心移动的轨迹光滑,是个曲线
ok,接下去我们一个一个去实现它
1.第一步,底部,水平居中
这个我相信大家很容易想到使用relativelayout,对,没错,那么我们先定义一个类姑且叫favorlayout吧,继承自relativelayout,并且重载构造函数,并定义一些变量.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
public class favorlayout extends relativelayout{private random random = new random();//用于实现随机功能 private int dheight;//爱心的高度 private int dwidth;//爱心的宽度private int mheight;//favorlayout的高度 private int mwidth;//favorlayout的宽度public favorlayout(context context) { super(context); }public favorlayout(context context, attributeset attrs) { super(context, attrs); //为了显示区域,我设置了一个背景颜色,随意 setbackgroundcolor(getresources().getcolor(r.color.bg));//init里做一些初始化变量的操作 init();}//重写onmeasure 获取控件宽高@override protected void onmeasure(int widthmeasurespec, int heightmeasurespec) { super.onmeasure(widthmeasurespec, heightmeasurespec); //注意!! 获取本身的宽高 需要在测量之后才有宽高 mwidth = getmeasuredwidth(); mheight = getmeasuredheight(); }}//定义完毕后我们来实现底部,水平居中://定义一个layoutparams 用它来控制子view的位置 private layoutparams lp; //底部 并且 水平居中 lp = new layoutparams(dwidth, dheight); lp.addrule(center_horizontal, true); //这里的true 要注意 不是true lp.addrule(align_parent_bottom, true); //好了,之后只要给子view设置layoutparams就可以实现了 |
2.接下来实现第二步,随机爱心
在android实现随机数可以使用random类,这里我只准备了3种不同的爱心,来看看代码如何实现吧:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//首先定义 3个代表不同爱心的drawable,以及他们的和drawables private drawable red ; private drawable yellow ; private drawable blue ; private drawable[] drawables ; //接下去我们初始化: //初始化显示的图片 drawables = new drawable[3]; red = getresources().getdrawable(r.mipmap.red); yellow = getresources().getdrawable(r.mipmap.yellow); blue = getresources().getdrawable(r.mipmap.blue); //赋值给drawables drawables[0]=red; drawables[1]=yellow; drawables[2]=blue; |
这样,下次取值时候只要使用如下代码,就能随机获取到爱心了:
|
1
|
drawables[random.nextint(3)]//表示0-2的随机数,注意,3是取不到的,是个开区间 |
3.好了随机的爱心问题搞定,接下去让我们做缩放动画吧~
说到android动画,我们以前常用animation,它通常情况下能满足我们的需求,但是它的功能比较弱,并不是很好用.好在3.0后,强大的属性动画的出现,让动画在android中实现起来变得非常容易.如果你还不知道属性动画怎么使用,赶紧去了解一下吧!
(以前在eoe上发过一篇帖子,很基础,objectanimator的运用,有兴趣可以看下,提前说下,那是很久以前写的!)
废话不说了,那么具体怎么做呢,来看代码吧:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//我封装了一个方法 利用objectanimator animatorset来实现 alpha以及x,y轴的缩放功能//target就是爱心private animatorset getenteranimtor(final view target) { objectanimator alpha = objectanimator.offloat(target,view.alpha, 0.2f, 1f); objectanimator scalex = objectanimator.offloat(target,view.scale_x, 0.2f, 1f); objectanimator scaley = objectanimator.offloat(target,view.scale_y, 0.2f, 1f); animatorset enter = new animatorset(); enter.setduration(500); enter.setinterpolator(new linearinterpolator()); enter.playtogether(alpha,scalex, scaley); enter.settarget(target); return enter; } |
ok,缩放功能已经加了,第一个阶段也算是完成了,我们来看看效果吧:
偶,忘记说了,我们给外面的按钮设置点击事件,并且提供外部一个方法调用:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
mbtnstartanim.setonclicklistener(new view.onclicklistener() { @override public void onclick(view v) { mfavorlayout.addfavor(); } });public void addfavor() { imageview imageview = new imageview(getcontext()); //随机选一个 imageview.setimagedrawable(drawables[random.nextint(3)]); // 设置底部 水平居中 imageview.setlayoutparams(lp); addview(imageview); log.v(tag, "add后子view数:"+getchildcount()); animator set = getenteranimtor(imageview); set.start();} |
好了这下可以运行看看效果啦,可以看到,爱心的颜色是随机的,并且也有了缩放动画.
到此,简单的功能我们已经完成了,那么接下去就是大头了.
4.实现贝塞尔曲线效果
我们怎么让爱心按照曲线移动?而且还有随机呢?
ok,接下去就是本文的主角贝塞尔曲线登场的时刻啦,这也是我实现这个效果学到的最重要的知识.
我是看这篇文章学习了解贝塞尔曲线的,推荐一下.
简单来说,就是给定几个点,计算出一个曲线.(其实复杂得我看不懂)
简单了解贝塞尔曲线后,发现三次方贝塞尔曲线 符合我们的要求
公式:
公式.png
拿到了公式,先不要着急,我们先思考一下,明确一下它的参数是干什么的:
公式中需要四个p,p0,是我们的起点,p3是终点,p1,p2是途径的两个点
而t则是我们的一个因子,取值范围是0-1,熟悉动画的同学应该就明白,0-1,对动画的作用有多么重大!!!所以看到这个,真是笑了~~
因为需要自己实现贝塞尔,所以我想到了属性动画中的typeevaluator,它就是我们需要的.
好了,接下来,我们来实现吧~
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
//我们自定义一个bezierevaluator 实现 typeevaluator//由于我们view的移动需要控制x y 所以就传入pointf 作为参数,是不是感觉完全契合??public class bezierevaluator implements typeevaluator<pointf> { private pointf pointf1;//途径的两个点 private pointf pointf2; public bezierevaluator(pointf pointf1,pointf pointf2){ this.pointf1 = pointf1; this.pointf2 = pointf2; } @override public pointf evaluate(float time, pointf startvalue, pointf endvalue) { float timeleft = 1.0f - time; pointf point = new pointf();//结果 pointf point0 = (pointf)startvalue;//起点 pointf point3 = (pointf)endvalue;//终点 //代入公式 point.x = timeleft * timeleft * timeleft * (point0.x) + 3 * timeleft * timeleft * time * (pointf1.x) + 3 * timeleft * time * time * (pointf2.x) + time * time * time * (point3.x); point.y = timeleft * timeleft * timeleft * (point0.y) + 3 * timeleft * timeleft * time * (pointf1.y) + 3 * timeleft * time * time * (pointf2.y) + time * time * time * (point3.y); return point; }} |
到这一步,只要我们传入两个ponitf就能得到一个贝塞尔曲线了.接下来我们在favorlayout中定义获取一个贝塞尔动画的方法:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
private valueanimator getbeziervalueanimator(view target) { //初始化一个bezierevaluator bezierevaluator evaluator = new bezierevaluator(getpointf(2),getpointf(1)); //这里最好画个图 理解一下 传入了起点 和 终点 valueanimator animator = valueanimator.ofobject(evaluator,new pointf((mwidth-dwidth)/2,mheight-dheight),new pointf(random.nextint(getwidth()),0));//随机 animator.addupdatelistener(new bezierlistenr(target)); animator.settarget(target); animator.setduration(3000); return animator; }//这里涉及到另外一个方法:getpointf(),这个是我用来获取途径的两个点// 这里的取值可以随意调整,调整到你希望的样子就好/** * 获取中间的两个 点 * @param scale */ private pointf getpointf(int scale) { pointf pointf = new pointf(); pointf.x = random.nextint((mwidth - 100));//减去100 是为了控制 x轴活动范围,看效果 随意~~ //再y轴上 为了确保第二个点 在第一个点之上,我把y分成了上下两半 这样动画效果好一些 也可以用其他方法 pointf.y = random.nextint((mheight - 100))/scale; return pointf; } |
眼尖的你一定发现了我给动画加了一个监听,只有在回调里使用了计算的值,才能真正做到曲线运动,否则没有效果哦:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
private class bezierlistenr implements valueanimator.animatorupdatelistener { private view target; public bezierlistenr(view target) { this.target = target; } @override public void onanimationupdate(valueanimator animation) { //这里获取到贝塞尔曲线计算出来的的x y值 赋值给view 这样就能让爱心随着曲线走啦 pointf pointf = (pointf) animation.getanimatedvalue(); target.setx(pointf.x); target.sety(pointf.y); // 这里偷个懒,顺便做一个alpha动画,这样alpha渐变也完成啦 target.setalpha(1-animation.getanimatedfraction()); } } |
好了这个方法写完,让我们来测试一下效果如何吧!
对了,需要修改一下addfavor方法
|
1
2
3
4
5
6
7
8
9
10
|
public void addfavor() { imageview imageview = new imageview(getcontext()); //随机选一个 imageview.setimagedrawable(drawables[random.nextint(3)]); imageview.setlayoutparams(lp); addview(imageview); log.v(tag, "add后子view数:"+getchildcount()); getbeziervalueanimator(imageview).start(); } |
好了,点击一下,看看效果吧!!!
bezier效果图.gif
怎么样?还不错吧???
缩放的效果我们做了,曲线效果也有了
那么接下去把他们连起来即可!!~
5.收尾,最终效果
5.1 实现变速
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
// 我为了实现 变速效果 挑选了几种插补器private interpolator line = new linearinterpolator();//线性 private interpolator acc = new accelerateinterpolator();//加速 private interpolator dce = new decelerateinterpolator();//减速 private interpolator accdec = new acceleratedecelerateinterpolator();//先加速后减速 // 在init中初始化 private interpolator[] interpolators ;// 最终 init方法长这样:private void init() { //初始化显示的图片 drawables = new drawable[3]; red = getresources().getdrawable(r.mipmap.red); yellow = getresources().getdrawable(r.mipmap.yellow); blue = getresources().getdrawable(r.mipmap.blue); drawables[0]=red; drawables[1]=yellow; drawables[2]=blue; //获取图的宽高 用于后面的计算 //注意 我这里3张图片的大小都是一样的,所以我只取了一个 dheight = red.getintrinsicheight(); dwidth = red.getintrinsicwidth(); //底部 并且 水平居中 lp = new layoutparams(dwidth, dheight); lp.addrule(center_horizontal, true);//这里的true 要注意 不是true lp.addrule(align_parent_bottom, true); // 初始化插补器 interpolators = new interpolator[4]; interpolators[0] = line; interpolators[1] = acc; interpolators[2] = dce; interpolators[3] = accdec; } |
5.2 合并前俩种动画,做成最终动画
|
1
2
3
4
5
6
7
8
9
10
11
12
|
private animator getanimator(view target){ animatorset set = getenteranimtor(target); valueanimator beziervalueanimator = getbeziervalueanimator(target); animatorset finalset = new animatorset(); finalset.playsequentially(set); finalset.playsequentially(set, beziervalueanimator); finalset.setinterpolator(interpolators[random.nextint(4)]);//实现随机变速 finalset.settarget(target); return finalset; } |
5.3 最后修改addfavor方法:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
public void addfavor() { imageview imageview = new imageview(getcontext()); //随机选一个 imageview.setimagedrawable(drawables[random.nextint(3)]); imageview.setlayoutparams(lp); addview(imageview); log.v(tag, "add后子view数:"+getchildcount()); animator set = getanimator(imageview); set.addlistener(new animendlistener(imageview)); set.start(); } |
在修改addfavor方法的同时我增加了一个监听,目的是为了在动画结束后,把爱心移除,不然,子view只增不减!!!!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
private class animendlistener extends animatorlisteneradapter { private view target; public animendlistener(view target) { this.target = target; } @override public void onanimationend(animator animation) { super.onanimationend(animation); //因为不停的add 导致子view数量只增不减,所以在view动画结束后remove掉 removeview((target)); log.v(tag, "removeview后子view数:"+getchildcount()); } } |
以上就是实现periscope点赞效果的全部过程，很详细，希望对大家的学习有所帮助，大家可以动手操作一下，应用到自己的项目中。
