美文网首页Android自定义控件自定义View系列
Android view之点赞容易,取消不易

Android view之点赞容易,取消不易

作者: ldoublem | 来源:发表于2016-08-04 16:37 被阅读1451次

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

like.png 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

  <com.ldoublem.thumbUplib.ThumbUpView
            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();

如果觉得还可以,给颗小星星^^
代码下载

相关文章

  • 点赞效果初步整理

    点赞效果初步整理 整理了下点赞效果,记录一下 Android view之点赞容易,取消不易 一步一步教你实现Per...

  • Android view之点赞容易,取消不易

    可以去dribbble上看看原生效果。代码下载好的app在功能完善的基础上,从细节上吸引用户。虽然点赞这个功能点已...

  • Android measure layout draw

    MeasureSpec的简单说明Android自定义View基础之MeasureSpec详解公共技术点之 View...

  • Android开发之属性动画

    Android动画主要分为3种 View动画(Android开发之View动画) 帧动画(Android开发之帧动...

  • Swift---点赞/取消点赞头像动画

    需求: 点赞/取消点赞后,头像要有移动动画。 思路:点赞:已有头像右移,新增头像渐变出现 取消点赞: 个人已点赞可...

  • Ins取消点赞

    Ins取消点赞 最近Instagram宣布取消点赞功能,不管是1个赞还是1000000个赞,统统都是others。...

  • React-native 文章点赞、取消赞

    点赞操作:客户端只处理点赞的状态和取消点赞的状态,具体就是点赞后图标变红,下面的点赞数+1,取消点赞时,图标去红,...

  • Android 中自定义View(二)

    系列文章之 Android中自定义View(一)系列文章之 Android中自定义View(二)系列文章之 And...

  • Android 中自定义View(四)

    系列文章之 Android中自定义View(一)系列文章之 Android中自定义View(二)系列文章之 And...

  • Android 中自定义View(三)

    系列文章之 Android中自定义View(一)系列文章之 Android中自定义View(二)系列文章之 And...

网友评论

本文标题:Android view之点赞容易,取消不易

本文链接:https://www.haomeiwen.com/subject/yjncsttx.html