一步一步教你实现Periscope点赞效果

现在视频应用越来越火,Periscope火起来后,国内也出现了不少跟风者,界面几乎跟Periscope一模一样.Periscope确实不错,点赞的效果也让人眼前一亮,很漂亮,于是乎,我就想着自己实现一下.

最终的效果图如下:

 

通过本文你将学习到什么?

1. 自定义view的一些基础方法以及一些注意点

2. 随机数的使用

3. 插补器的使用

4. 属性动画的高级用法

5. 贝塞尔曲线在Android中的实现以及应用

OK,如果感兴趣,那么跟着我来看看这个效果是如何实现的吧!

仔细看看,这个效果中包含了什么细节?

1. 爱心出现在底部并且水平居中

2. 爱心的颜色/类型 随机

3. 爱心进入时候有一个缩放的动画

4. 缩放完毕后,开始变速向上移动,并且伴随alpha渐变效果

5. 爱心移动的轨迹光滑,是个曲线

OK,接下去我们一个一个去实现它

1.第一步,底部,水平居中

这个我相信大家很容易想到使用RelativeLayout,对,没错,那么我们先定义一个类姑且叫FavorLayout吧,继承自RelativeLayout,并且重载构造函数,并定义一些变量

2.接下来实现第二步,随机爱心

在Android实现随机数可以使用Random类,这里我只准备了3种不同的爱心,来看看代码如何实现吧:

 

3.好了随机的爱心问题搞定,接下去让我们做缩放动画吧~

缩放效果图.gif

可以看到,爱心的颜色是随机的,并且也有了缩放动画.

到此,简单的功能我们已经完成了,那么接下去就是大头了.

4.实现贝塞尔曲线效果

我们怎么让爱心按照曲线移动?而且还有随机呢?

OK,接下去就是本文的主角贝塞尔曲线登场的时刻啦,这也是我实现这个效果学到的最重要的知识.

我是看这篇文章学习了解贝塞尔曲线的,推荐一下.
简单来说,就是给定几个点,计算出一个曲线.(其实复杂得我看不懂)

简单了解贝塞尔曲线后,发现三次方贝塞尔曲线 符合我们的要求
公式:

公式.png

拿到了公式,先不要着急,我们先思考一下,明确一下它的参数是干什么的:
公式中需要四个P,P0,是我们的起点,P3是终点,P1,P2是途径的两个点
而t则是我们的一个因子,取值范围是0-1,熟悉动画的同学应该就明白,0-1,对动画的作用有多么重大!!!所以看到这个,真是笑了~~

因为需要自己实现贝塞尔,所以我想到了属性动画中的TypeEvaluator,它就是我们需要的.眼尖的你一定发现了我给动画加了一个监听,只有在回调里使用了计算的值,才能真正做到曲线运动,否则没有效果哦:

 

好了这个方法写完,让我们来测试一下效果如何吧!
对了,需要修改一下addFavor方法

 

好了,点击一下,看看效果吧!!!

Bezier效果图.gif

怎么样?还不错吧???

缩放的效果我们做了,曲线效果也有了
那么接下去把他们连起来即可!!~

5.收尾,最终效果

5.1 实现变速

5.2 合并前俩种动画,做成最终动画

 

5.3 最后修改addFavor方法:

 

在修改addFavor方法的同时我增加了一个监听,目的是为了在动画结束后,把爱心移除,不然,子view只增不减!!!!