可以去dribbble上看看原生效果。
代码下载
好的app在功能完善的基础上,从细节上吸引用户。虽然点赞这个功能点已经很普遍了,但是千篇一律的生硬效果让这么神圣的操作显得很黯淡(扯淡了,不就是赞赞赞么...),当然也有非常炫酷的,忍不住多点几次赞的效果。比如twitter的点赞。就不码字扯淡了,上图上源码
like.png
shot.gif
使用Path画爱心
Path path = new Path();
path.cubicTo((float) (0.15 * realWidth) + rectFlove.left, (float) (-0.35 * realHeight + p),
(float) (-0.4 * realWidth) + rectFlove.left, (float) (0.45 * realHeight) + p,
(float) (0.5 * realWidth) + rectFlove.left, (float) (realHeight * 0.8 + p));
// veTo( (float) (0.5 * realWidth) + rectFlove.left, (float) (realHeight * 0.8 + p));
path.cubicTo((float) (realWidth + 0.4 * realWidth) + rectFlove.left, (float) (0.45 * realHeight) + p,
(float) (realWidth - 0.15 * realWidth) + rectFlove.left, (float) (-0.35 * realHeight) + p,
(float) (0.5 * realWidth) + rectFlove.left, (float) (0.17 * realHeight) + p);
path.close();
取消时候爱心出现裂痕然后分成两半分别向左右倾斜,使用** canvas**
rotate来旋转达到倾斜效果
mBitmapBrokenLeftLove = ateBitmap(getMeasuredWidth(), (int) lastY, Bitmap.Config.ARGB_8888);
canvas = new Canvas(mBitmapBrokenLeftLove);
Path path = new Path();
path.cubicTo((float) (0.15 * realWidth) + rectFlove.left, (float) (-0.35 * realHeight + p),
(float) (-0.4 * realWidth) + rectFlove.left, (float) (0.45 * realHeight) + p,
(float) (0.5 * realWidth) + rectFlove.left, (float) (realHeight * 0.8 + p));
path.lineTo(thirdX, thirdY);
path.lineTo(secondX, secondY);
path.close();
canvas.drawPath(path, mPaintLike);
Gradle
compile 'com.ldoublem.thumbUplib:ThumbUplib:0.2'
Usage xml
android:id="@+id/tpv"
android:layout_width="50dp"
android:layout_height="50dp"
app:cracksColor="#33475f"
app:edgeColor="#9d55b8"
app:fillColor="#ea8010"
app:unlikeType="1"
/>
mThumbUpView.b(22, 33, 44));
mThumbUpView.b(11, 200, 77));
mThumbUpView.b(33, 3, 219));
mThumbUpView.setOnThumbUp(new ThumbUpView.OnThumbUp() {
@Override
public void like(boolean like) {
}
});
mThumbUpView.Like();
mThumbUpView.UnLike();
如果觉得还可以,给颗小星星^^
代码下载
本文发布于:2024-02-04 22:40:20,感谢您对本站的认可!
本文链接:https://www.4u4v.net/it/170717996760346.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
留言与评论(共有 0 条评论) |