仿直播点赞动画

最新推荐文章于 2022-01-24 08:34:00 发布
原创 最新推荐文章于 2022-01-24 08:34:00 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

前一段时间感觉直播很火，因此我就下了七八个直播软件去看了，不要问我为啥下这么多，我会告诉你我想看看哪个平台的妹子颜值高吗，好吧最终喜欢上看映客的一个妹子。妹子歌唱的很好听可惜屌丝的我涮不起礼物，只能在屏幕下方狂点赞了。好了这次当然不是讨论直播平台的妹子，而是看下直播软件点赞的效果怎样实现的。
说一下思想吧，首先利用属性动画的放大效果让生成的图片不至于太突兀的显示，接着让生成的图片沿着三阶贝塞尔曲线的轨迹去移动，在移动的过程中逐渐设置图片的透明效果至0，最后在动画结束的时候remove掉新生成的图片。

下面看下效果图吧
这里写图片描述

效果就是这么个效果，下面看具体实现吧

首先看下布局文件

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.jh.mymathsintext.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@color/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:title="@string/app_name">

    </android.support.v7.widget.Toolbar>

    <com.jh.mymathsintext.MyRelative
        android:id="@+id/rela"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="100dp"
        android:layout_below="@id/toolbar"
        android:gravity="bottom|center_horizontal">

    </com.jh.mymathsintext.MyRelative>


    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/pl_blue"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dp"/>



</RelativeLayout>

布局文件没什么好讲的，接着看下具体实现，先把整体代码贴出来在分步细讲

public class MyRelative extends RelativeLayout{

    private int []drawable={R.drawable.pl_blue,R.drawable.pl_red,R.drawable.pl_yellow};

    private  LayoutParams params;

    private Random random=new Random();

    private int height,width;

    public MyRelative(Context context) {
        super(context);
        init();
    }

    public MyRelative(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();

    }

    public MyRelative(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();

    }

    /**
     * 获取图片的大小
     */
    public void init(){
        BitmapFactory.Options options=new BitmapFactory.Options();
        options.inJustDecodeBounds=true;
        Bitmap bitmap=BitmapFactory.decodeResource(getResources(),R.drawable.pl_red,options);
        width=options.outWidth;
        height=options.outHeight;
//        width=ContextCompat.getDrawable(getContext(),R.drawable.pl_red).getIntrinsicWidth();
//        height=ContextCompat.getDrawable(getContext(),R.drawable.pl_red).getIntrinsicHeight();

        params=new LayoutParams(width, height);




    }

    /**
     * 生成图片，并设置动画
     */
    public void addView(){
        final ImageView imageView=new ImageView(getContext());
        imageView.setLayoutParams(params);
        imageView.setBackgroundResource(drawable[random.nextInt(3)]);
        addView(imageView);
        AnimatorSet set=getAnimation(imageView);//属性动画控制放大效果
        ValueAnimator valueAnimator=setPoint(imageView);//控制移动
        AnimatorSet animatorSet=new AnimatorSet();
        animatorSet.playSequentially(set,valueAnimator);//设置属性动画按顺序执行
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                removeView(imageView);
            }
        });
        animatorSet.start();



    }

    /**
     * 属性动画控制放大效果
     * @param imageView
     * @return
     */
    public AnimatorSet getAnimation(ImageView imageView){
        ObjectAnimator objectAnimator1=ObjectAnimator.ofFloat(imageView,SCALE_X,0f,1f);
        ObjectAnimator objectAnimator2=ObjectAnimator.ofFloat(imageView,SCALE_Y,0f,1f);
        AnimatorSet animatorSet=new AnimatorSet();
        animatorSet.playTogether(objectAnimator1,objectAnimator2);//控制动画一起执行
        animatorSet.setDuration(500);
        return animatorSet;
    }

    /**
     * 创建贝塞尔轨迹并让图片沿着贝塞尔轨迹运行
     * @param imageView
     * @return
     */
    public ValueAnimator setPoint(final View imageView){
        MyPoint myPoint=new MyPoint(getPoint(2),getPoint(1));
        ValueAnimator valueAnimator=ValueAnimator.ofObject(myPoint,new PointF((this.getWidth()-width)/2,this.getHeight()-height),
                new PointF(random.nextInt(getWidth()),0));
        valueAnimator.setDuration(2000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                PointF pointF= (PointF) animation.getAnimatedValue();
                Log.i("tag","dfdgdfadfsdsdd"+pointF.x);
                imageView.setX(pointF.x);
                imageView.setY(pointF.y);
                imageView.setAlpha(1-animation.getAnimatedFraction());
            }
        });

        return valueAnimator;

    }

    /**
     * 随机生成点
     * @param height
     * @return
     */
    public PointF getPoint(int height){
        PointF pointF=new PointF();
        pointF.x=random.nextInt(getWidth()-50);
        pointF.y=random.nextInt(getHeight()-50)/height;
        return pointF;
    }

}

首先需要获取一下图片的大小然后设置给新创建的imageview

 /**
     * 获取图片的大小
     */
    public void init(){
        BitmapFactory.Options options=new BitmapFactory.Options();
        options.inJustDecodeBounds=true;
        Bitmap bitmap=BitmapFactory.decodeResource(getResources(),R.drawable.pl_red,options);
        width=options.outWidth;
        height=options.outHeight;
//        width=ContextCompat.getDrawable(getContext(),R.drawable.pl_red).getIntrinsicWidth();
//        height=ContextCompat.getDrawable(getContext(),R.drawable.pl_red).getIntrinsicHeight();

        params=new LayoutParams(width, height);

    }

然后就是给新创建的imageview设置放大动画了，这里利用属性动画实现

/**
     * 属性动画控制放大效果
     * @param imageView
     * @return
     */
    public AnimatorSet getAnimation(ImageView imageView){
        ObjectAnimator objectAnimator1=ObjectAnimator.ofFloat(imageView,SCALE_X,0f,1f);
        ObjectAnimator objectAnimator2=ObjectAnimator.ofFloat(imageView,SCALE_Y,0f,1f);
        AnimatorSet animatorSet=new AnimatorSet();
        animatorSet.playTogether(objectAnimator1,objectAnimator2);//控制动画一起执行
        animatorSet.setDuration(500);
        return animatorSet;
    }

接下来就是要让新生成的imageview实现沿着三阶贝塞尔曲线轨迹去移动了，重点是获取三阶贝塞尔曲线的轨迹坐标，这个可以利用实现TypeEvaluator接口和PointF实现。这是会重写TypeEvaluator接口里的evaluate（）方法，看下方法实现吧


    @Override
    public PointF evaluate(float fraction, PointF startValue, PointF endValue) {

        float timeDel=1-fraction;

        PointF pointF=new PointF();
        //三阶贝塞尔曲线公式
        pointF.x=timeDel*timeDel*timeDel*startValue.x+3*pointF1.x*timeDel*timeDel*fraction+3*pointF2.x*fraction*fraction*timeDel+
                endValue.x*fraction*fraction*fraction;
        pointF.y=timeDel*timeDel*timeDel*startValue.y+3*pointF1.y*timeDel*timeDel*fraction+3*pointF2.y*fraction*fraction*timeDel+
                endValue.y*fraction*fraction*fraction;
        return pointF;
    }

对就是在上述方法里实现获取三阶贝塞尔曲线轨迹坐标，先看下贝塞尔曲线的公式

这里写图片描述

三阶贝塞尔曲线公式如上，因为evaluate（）方法里有起始点和终点，只需要在创建两个点就可以了，为了让每一个生成的imageview运行轨迹大致不相同，我们可以随机生成这两个点，代码如下所示

 /**
     * 随机生成点
     * @param height
     * @return
     */
    public PointF getPoint(int height){
        PointF pointF=new PointF();
        pointF.x=random.nextInt(getWidth()-50);
        pointF.y=random.nextInt(getHeight()-50)/height;
        return pointF;
    }

接下来需要做的事情就是将轨迹坐标赋给imageview，代码如下

 /**
     * 创建贝塞尔轨迹并让图片沿着贝塞尔轨迹运行
     * @param imageView
     * @return
     */
    public ValueAnimator setPoint(final View imageView){
        MyPoint myPoint=new MyPoint(getPoint(2),getPoint(1));
        ValueAnimator valueAnimator=ValueAnimator.ofObject(myPoint,new PointF((this.getWidth()-width)/2,this.getHeight()-height),
                new PointF(random.nextInt(getWidth()),0));
        valueAnimator.setDuration(2000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                PointF pointF= (PointF) animation.getAnimatedValue();
                Log.i("tag","dfdgdfadfsdsdd"+pointF.x);
                imageView.setX(pointF.x);
                imageView.setY(pointF.y);
                imageView.setAlpha(1-animation.getAnimatedFraction());
            }
        });

        return valueAnimator;

    }

然后需要做的就是将放大动画和轨迹动画设置给imageview去实现即可，

 /**
     * 生成图片，并设置动画
     */
    public void addView(){
        final ImageView imageView=new ImageView(getContext());
        imageView.setLayoutParams(params);
        imageView.setBackgroundResource(drawable[random.nextInt(3)]);
        addView(imageView);
        AnimatorSet set=getAnimation(imageView);//属性动画控制放大效果
        ValueAnimator valueAnimator=setPoint(imageView);//控制移动
        AnimatorSet animatorSet=new AnimatorSet();
        animatorSet.playSequentially(set,valueAnimator);//设置属性动画按顺序执行
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                removeView(imageView);
            }
        });
        animatorSet.start();



    }

注意的一点是在动画结束的时候最好将生成的imageview给移除掉，到此为止点赞效果就做出来了，别拦我，我要去跟女神表白了

Android控件实现直播App点赞飘心动画
01-04
现在市面上直播类的应用可以说是一抓一大把，随随便便就以什么主题来开发个直播App，说白了就想在这领域分杯羹。在使用这些应用过程中其实不难发现，在所有的直播界面，少不了的就是各种打赏、各种点赞。今天自己就针对点赞功能敲了一下，代码不多，主要是涉及到动画运动轨迹运算，这里需借助 贝塞尔曲线 相关知识，我使用三阶贝塞尔曲线来实现轨迹动画。 运行效果 一、具体实现流程 仔细分析整个点赞过程可以发现，首先是“爱心”的出现动画，然后是“爱心”以类似气泡的形式向上运动。 “爱心”的出现动画 private AnimatorSet generateEnterAnimation(View target) {
Android控件实现直播App特效之点赞飘心动画
08-27
主要为大家详细介绍了FlowLikeView控件实现直播App特效之点赞飘心动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android点赞头像动画,android实现直播点赞飘心动画效果
weixin_39618956的博客
05-25 553
前段时间在写直播的时候，需要观众在看直播的时候点赞的效果，在此参照了腾讯大神写的点赞(飘心动画效果)。下面是效果图：1.自定义飘心动画的属性在attrs.xml 中增加自定义的属性2.定义飘心默认值2.1 dimens.xml50.0dp50.0dp25.0dp400.0dp350.0dp30.0dp27.3dp32.5dp2.2 integers.xml630003.定义飘心动画控制器3.1 A...
android实现直播点赞飘心动画效果
08-27
主要为大家详细介绍了android实现直播点赞飘心动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android炫酷动画代码,Android高级UI特效仿直播点赞动画效果
weixin_36465108的博客
05-25 615
Android高级UI特效仿直播点赞动画效果发布时间：2020-10-02 16:06:18来源：脚本之家阅读：117作者：mrr本文给大家分享高级UI特效仿直播点赞效果—一个优美炫酷的点赞动画，具体实现代码大家参考本文。效果图如下：攻克难点：心形图片的路径等走向 心形图片的控制范围部分代码如下：通过AbstractPathAnimator定义飘心动画控制器@Overridepublic void...
android点赞动画仿twritter,Android仿直播特效之点赞飘心效果
weixin_42349769的博客
05-25 352
本文实例为大家分享了Android实现点赞飘心效果的具体代码，供大家参考，具体内容如下一、概述老规矩先上图好了，基本就是这个样子，录完的视频用格式工厂转换完就这个样子了，将就看吧二、定义我们自己的Layout/*** @author 刘洋巴金* @date 2017-4-27** 定义我们自己的布局* */public class LoveLayout extends RelativeLayout...
微信小程序小组件：仿直播点赞气泡效果，基于Canvas
03-29
先撸一发效果图为敬： (此图片来源于网络，如有侵权，请联系删除! )   实现细节： 1.JS：   drawImage:function(data){[/align] var that = this var p10= data[0][0]; /* 三阶贝塞尔曲线起点坐标值*/ ...
Android UI动画 仿直播点赞飘心动画效果
04-06
作者kaisengao，源码KsgLikeView#ksglikeview，Android UI动画 仿直播点赞飘心动画效果
html5仿直播爱心飘动点赞动画特效.zip
08-11
html5基于canvas制作视频直播打赏桃心飘动点赞动画效果。飘动的爱心动画、爱心飞出动画特效。
Android——贝塞尔曲线动画——直播平台点赞效果
07-12
直播平台中点击心形进行贝塞尔曲线运动
html5点赞动画
03-21
插件描述：HTML5 SVG实现喜欢点赞动画特效.、
html5 canvas飘动的爱心心形动画特效
06-06
完整的一个动态页面 小心心 无限循环 可直接拿来使用
Android点赞的动态动画效果
09-22
直播点赞的动态效果。 随机的动态图片。生成后依据贝塞尔曲线运行后，慢慢的消失。 一个简单的自定义控件。实现动态的点赞效果。
html5+canvas仿抖音直播爱心飘动点赞动画特效源码.zip
11-03
在这个“html5+canvas仿抖音直播爱心飘动点赞动画特效源码.zip”压缩包中，我们可以看到一个使用HTML5 Canvas元素实现的动画特效，其灵感来源于流行的短视频平台抖音中的直播点赞功能。 Canvas是HTML5中的一个核心...
放yy直播点赞动画
weixin_34175509的博客
07-13 198
最近在做直播相关的东西，这个动画是IOS先撸出来的，后来android这边要模仿，大部分直播应用都有很炫酷的点赞动画，所以也没什么好稀奇的。如果有现成的轮子了，就没必要自己再造了，后来参照了程序亦非猿的实现，做了些修改，最终效果还不错。 live.gif 刚开始自己造轮子的时候也走了些弯路，最初是给这些图标一些随机的初始速度和偏移量然后慢慢上升，效...
H5 直播的疯狂点赞动画是如何实现的？(附完整源码)
a110d007的博客
07-08 590
直播有一个很重要的互动：点赞。 为了烘托直播间的氛围，直播相对于普通视频或者文本内容，点赞通常有两个特殊需求： 点赞动作无限次，引导用户疯狂点赞 直播间的所有疯狂点赞，都需要在所有用户界面都动画展现出来 点赞动画图片大小不一，运动轨迹也是随机的 点赞动画图片都是先放大再匀速运动。 快到顶部的时候，是渐渐消失。 收到大量的点赞请求的时候，点赞动画不扎堆，井然有序持续出现。 那么如何实现这些要求呢？下面介绍两种实现方式来实现(底部附完整 demo)： CSS3 实现 用 CSS3 实现动画，显然，我们想到的是用
腾讯课堂 H5 直播间点赞动效实现
azl397985856的专栏
01-24 657
1. 前言以前在看微信视频号直播的时候，经常点击右下角的点赞按钮。看着它的数字慢慢从一位数变成五位数，还是挺有氛围感的。特别是长按的时候，有个手机震动的反馈，很带感。虽然之前很好奇这些飘动...
Android直播点赞动画实战：打造抖音快手同款特效
"本文将深入探讨Android高级UI特效中的仿直播点赞动画效果，该效果在抖音、快手等短视频应用中广受欢迎。作者旨在提供一个实用的实现教程，帮助开发者理解和创建类似直播平台上的点赞动态。文章详细介绍了如何通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值