android点赞取消赞功能吗,Android view之点赞容易,取消不易

本文分享了一种在Android中创建独特点赞动画的方法,通过自定义视图和Path绘制爱心路径,实现从细节上吸引用户的交互体验。代码示例展示了如何在点赞和取消时添加动态裂痕和旋转效果,提升用户体验。同时提供了Gradle依赖和XML布局使用方法。
摘要由CSDN通过智能技术生成

可以去dribbble上看看原生效果。

代码下载

好的app在功能完善的基础上,从细节上吸引用户。虽然点赞这个功能点已经很普遍了,但是千篇一律的生硬效果让这么神圣的操作显得很黯淡(扯淡了,不就是赞赞赞么...),当然也有非常炫酷的,忍不住多点几次赞的效果。比如twitter的点赞。就不码字扯淡了,上图上源码

a132e559f3dd

like.png

a132e559f3dd

shot.gif

使用Path画爱心

Path path = new Path();

path.moveTo((float) (0.5 * realWidth) + rectFlove.left, (float) (0.17 * realHeight) + rectFlove.top);

path.cubicTo((float) (0.15 * realWidth) + rectFlove.left, (float) (-0.35 * realHeight + rectFlove.top),

(float) (-0.4 * realWidth) + rectFlove.left, (float) (0.45 * realHeight) + rectFlove.top,

(float) (0.5 * realWidth) + rectFlove.left, (float) (realHeight * 0.8 + rectFlove.top));

// path.moveTo( (float) (0.5 * realWidth) + rectFlove.left, (float) (realHeight * 0.8 + rectFlove.top));

path.cubicTo((float) (realWidth + 0.4 * realWidth) + rectFlove.left, (float) (0.45 * realHeight) + rectFlove.top,

(float) (realWidth - 0.15 * realWidth) + rectFlove.left, (float) (-0.35 * realHeight) + rectFlove.top,

(float) (0.5 * realWidth) + rectFlove.left, (float) (0.17 * realHeight) + rectFlove.top);

path.close();

取消时候爱心出现裂痕然后分成两半分别向左右倾斜,使用** canvas**

rotate来旋转达到倾斜效果

mBitmapBrokenLeftLove = Bitmap.createBitmap(getMeasuredWidth(), (int) lastY, Bitmap.Config.ARGB_8888);

canvas = new Canvas(mBitmapBrokenLeftLove);

canvas.rotate(-1*mBrokenAngle * mAnimatedBrokenValue, lastX, lastY);

Path path = new Path();

path.moveTo((float) (0.5 * realWidth) + rectFlove.left, (float) (0.17 * realHeight) + rectFlove.top);

path.cubicTo((float) (0.15 * realWidth) + rectFlove.left, (float) (-0.35 * realHeight + rectFlove.top),

(float) (-0.4 * realWidth) + rectFlove.left, (float) (0.45 * realHeight) + rectFlove.top,

(float) (0.5 * realWidth) + rectFlove.left, (float) (realHeight * 0.8 + rectFlove.top));

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.setCracksColor(Color.rgb(22, 33, 44));

mThumbUpView.setFillColor(Color.rgb(11, 200, 77));

mThumbUpView.setEdgeColor(Color.rgb(33, 3, 219));

mThumbUpView.setOnThumbUp(new ThumbUpView.OnThumbUp() {

@Override

public void like(boolean like) {

}

});

mThumbUpView.Like();

mThumbUpView.UnLike();

如果觉得还可以,给颗小星星^^

代码下载

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值