今天是CJJ同学投稿,小小的点赞,看起来并不像想象中的那么简单,可能大家还记得CJJ同学的上篇投稿 让Google脸疼的Bottom navigation规范长啥样?作为开发,对产品对设计也这般关心,我必须给他这份用心先点个赞。
手在键盘敲很轻,欲说却不知从何吐槽……咳,刚装逼了,现在进入正题。几乎每个社交App都有点赞功能,但是就国内的app来说,你可能记得点赞的内容而压根忽视了点赞的效果。
举个例子,就用户最多的微信、QQ来说,点赞也就是个心形和拇指的放大动画(自己去体验下),这里顺便吐槽下网易的点赞,动画做的不错,虽然我手机小小不流畅,可是不能取消赞是怎么回事? 也许,现在你觉得无非就是个点赞效果,随便做个点击效果就好了,也许产品设计的人也是这样觉得的,也许用户根本就不在乎。我想说的是,友好的交互,会影响用户的体验,做好细节,会让App更成功。
一款用户可以向其他人直播视频的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,我瞎掰了,呵呵”
点赞效果有了一点变化,还是很漂亮。
作者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肯花费那么多时间去完成这个不起眼的小功能————点赞。我觉得,他们注重细节,注重交互。希望做产品的同学可以看到,其实,我们程序员可以完成很多绚丽的东西,请设计的时候,不要那么单调。那些年,我们一起点过的赞可能不是很漂亮,希望,以后的赞可以真的很赞。
微信扫一扫
关注该公众号