那些年，我们一起点过的赞
今天是CJJ同学投稿，小小的点赞，看起来并不像想象中的那么简单，可能大家还记得CJJ同学的上篇投稿 让Google脸疼的Bottom navigation规范长啥样？作为开发，对产品对设计也这般关心，我必须给他这份用心先点个赞。
手在键盘敲很轻，欲说却不知从何吐槽……咳，刚装逼了，现在进入正题。几乎每个社交App都有点赞功能，但是就国内的app来说，你可能记得点赞的内容而压根忽视了点赞的效果。
举个例子，就用户最多的微信、QQ来说，点赞也就是个心形和拇指的放大动画（自己去体验下），这里顺便吐槽下网易的点赞，动画做的不错，虽然我手机小小不流畅，可是不能取消赞是怎么回事？ 也许，现在你觉得无非就是个点赞效果，随便做个点击效果就好了，也许产品设计的人也是这样觉得的，也许用户根本就不在乎。我想说的是，友好的交互，会影响用户的体验，做好细节，会让App更成功。
介绍下我认为点赞做的比较好的App及简单介绍如何实现。
Periscope
一款用户可以向其他人直播视频的App,点赞效果让人眼前一亮。
大概在一年前，程序亦非猿就写了一步一步教你实现Periscope点赞效果：
http://www.jianshu.com/p/03fdcfd3ae9c
我也在个人项目中用了，感觉良好。
作者实现这个效果的思路是：
1.爱心出现在底部并且水平居中
2.爱心的颜色/类型 随机
3.爱心进入时候有一个缩放的动画
4.缩放完毕后,开始变速向上移动,并且伴随alpha渐变效果
5.爱心移动的轨迹光滑,是个曲线
其实，难点就是曲线运动，作者用了三次方贝塞尔曲线的公式：
P0,是爱心的起点,P3是终点,P1,P2是途径的两个点。在自定义TypeEvaluator，实现了动画曲线效果。具体你可以去看作者原文，因为他写了，我就不啰嗦了。我讲讲不够优美的地方，爱心出来移动太分散，源码中，作者提供P1,P2点时候，处理的很随意，所以这里是可以做优化的。
/**
* 获取中间的两个 点
*
* @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;
}程序耦合性有点高，也就是不能自定义，这个也是可以做处理的。总体来说，写的很好。
小编采访作者为什么写这个？
程序亦非猿：“写了快一年了...跟风persicope啊，哈哈 , 效果帅 ,就想实现 ,如此而已”。
https://github.com/AlanCheen
国外的一个社交网络及微博客服务的网站，App点赞效果十分漂亮
我最早是看到frogermcs/LikeAnimation实现了。
https://github.com/frogermcs/LikeAnimation
效果如下：
看起来也挺复杂的，作者用了很简单的实现方式，一步一步分出来。
1.先实现一个画圆的视图CircleView
看图知道主要在ondraw()函数画两个不断扩大圆就可以，内部圆提供的画笔path 设置：
maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));2.接下来就是实现一个画四周点的视图DotsView。
其实还是画圆，我们需要确定各个圆的圆心。
int cX = (int) (centerX + currentRadius1 * Math.cos(i * OUTER_DOTS_POSITION_ANGLE * Math.PI / 180));
int cY = (int) (centerY + currentRadius1 * Math.sin(i * OUTER_DOTS_POSITION_ANGLE * Math.PI / 180));3.星星的缩放动画，这个很简单，作者没写个画星星的类，直接用图片代替了。
4.最后写了个LikeButtonView继承FrameLayout，把以上三部分组合起来了。
看布局源码就知道了。
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<frogermcs.io.likeanimation.DotsView
android:id="@+id/vDotsView"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"/>
<frogermcs.io.likeanimation.CircleView
android:id="@+id/vCircle"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"/>
<ImageView
android:id="@+id/ivStar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_star_rate_off"/>
</merge>因为没有提供向外监听的方法，所以你是无法知道选择的state的，这点可以添加。动画效果还是挺流畅的，但是本人不是很喜欢这种实现方式，因为我觉得一个View也是可以实现这种效果的，不信？我接下来介绍的就是这样做的。
小编采访作者为什么写这个？
frogermcs：“Hello, Chinese friends，我瞎掰了，呵呵”
最新 Twitter App 版本
点赞效果有了一点变化，还是很漂亮。
作者hanks-zy实现了这种效果SmallBang
https://github.com/hanks-zyh/SmallBang
hanks实现这个的思路是：
1.将当前的view变小,画圆半径从小到大,同时颜色渐变 (P1)
2.当半径到达MAX_RADIUS,开始画空心圆,空闲圆半径变大,画笔宽度从MAX_RADIUS变小
3.当空心圆半径达到 MAX_RADIUS - RINGWIDTH (P2), 此时变成圆环,在圆环上生成个DOT_NUMBER个小圆,均匀分布
4.空心圆继续变大,逐渐圆环消失; 同时小圆向外扩散,扩散过程小圆半径减小,颜色渐变;同时下面的view逐渐变大 (P3)
从源码上看，就一个view类，SmallBang继承了View,主要是在这个bang(...)函数做了位置的初始化和动画的逻辑,在ondraw()函数根据动画过程得到的progress和自己定义好的P1,P2,P3做比较，然后去绘制各个过程。
动画效果还是挺流畅，效果也挺棒。这里说说这个库不足的地方。
public static SmallBang attach2Window(Activity activity) {
ViewGroup rootView = (ViewGroup) activity.findViewById(Window.ID_ANDROID_CONTENT);
SmallBang smallBang = new SmallBang(activity);
rootView.addView(smallBang,
new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
return smallBang;
}传入参数是activity，会导致如果是dialog使用，就必须改代码，这里写死了，可以优化。
因为此效果多半在列表中使用，所以测试中效果发生的位置会有偏差，是位置获取采用的方式所导致的。
还有就是作者没做取消的效果，可以在里面设置个isSelect的状态，并向外提供这个状态的方法。
小编采访作者为什么写这个？
hanks：“使用 Twitter 的时候看到了，感觉动画很活泼，感觉实现起来也不难。”
最后说说
看完这么多漂亮的点赞效果，我们应该思考，为什么国外的App肯花费那么多时间去完成这个不起眼的小功能————点赞。我觉得，他们注重细节，注重交互。希望做产品的同学可以看到，其实，我们程序员可以完成很多绚丽的东西，请设计的时候，不要那么单调。那些年，我们一起点过的赞可能不是很漂亮，希望，以后的赞可以真的很赞。