放yy直播点赞动画
最近在做直播相关的东西,这个动画是IOS先撸出来的,后来android这边要模仿,大部分直播应用都有很炫酷的点赞动画,所以也没什么好稀奇的。如果有现成的轮子了,就没必要自己再造了,后来参照了程序亦非猿的实现,做了些修改,最终效果还不错。

刚开始自己造轮子的时候也走了些弯路,最初是给这些图标一些随机的初始速度和偏移量然后慢慢上升,效果总是不大好,差了点意思。后来仔细研究发现这些图标上升的路线并不是直线,而是一个三阶贝塞尔曲线。
一阶贝塞尔曲线,实际上就是一条连接两点的直线段。
二阶贝塞尔曲线,就是两点间的一条抛物线,利用一个控制点来控制抛物线的形状。
三阶贝塞尔曲线,则需要一个起点,一个终点,两个控制点来控制曲线的形状。
三节贝塞尔曲线的公式

公式中:P0,是我们的起点,P3是终点,P1,P2是途径的两个点,而t则是一个因子,取值范围是0-1。
整个曲线的生成过程

实现代码如下,调用的时候只需要在构造方法中传入两个随机点即可。
public class BesselEvaluator implements TypeEvaluator<float[]> {
private float point1[] = new float[2], point2[] = new float[2];
public BesselEvaluator(float[] point1, float[] point2) {
this.point1 = point1;
this.point2 = point2;
}
@Override
public float[] evaluate(float fraction, float[] point0, float[] point3) {
float[] currentPosition = new float[2];
currentPosition[0] = point0[0] * (1 - fraction) * (1 - fraction) * (1 - fraction)
+ point1[0] * 3 * fraction * (1 - fraction) * (1 - fraction)
+ point2[0] * 3 * (1 - fraction) * fraction * fraction
+ point3[0] * fraction * fraction * fraction;
currentPosition[1] = point0[1] * (1 - fraction) * (1 - fraction) * (1 - fraction)
+ point1[1] * 3 * fraction * (1 - fraction) * (1 - fraction)
+ point2[1] * 3 * (1 - fraction) * fraction * fraction
+ point3[1] * fraction * fraction * fraction;
return currentPosition;
}
}
详细的动画实现可以参考一步一步教你实现Periscope点赞效果,但很显然我这里完成点赞动画,任务还没有完成。有几个问题需要解决:允许连续点赞,而且是计数的,什么时候把点赞的数量抛给服务器;我怎么看到其他用户点赞,或者其他用户怎么看的到我点赞。
先看第一个问题吧,什么时候把点赞数量抛给服务器?由于产品经理带着小姨子跑路了,Ios和android两个端的策略还不太一样,但我们达成的基本共识就是:不能点一次抛一次,抛的次数越少越好。Ios是本地维护一个count,没隔一段时间检测count有增加,就抛一次。android这里是连续点击的时间间隔大于一个约定值,就认为本轮点赞结束,然后抛一次。以前有研究过单击双击,这次连续点击也来了,该来的总要来的。
public class MainActivity extends AppCompatActivity {
long mLastTime = 0;
long mCurTime = 0;
private final int DELAY = 500;//连续点击的临界点
BubbleView bubbleView;
private int mClickCount = 0;
private int currLikeCount;
private TextView likeCount;
private Timer delayTimer;
private TimerTask timeTask;
private Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
praiseRequest(mClickCount);
delayTimer.cancel();
super.handleMessage(msg);
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
bubbleView=(BubbleView)findViewById(R.id.praise_anim);
bubbleView.setDefaultDrawableList();
likeCount = (TextView) findViewById(R.id.like_count);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mCurTime = System.currentTimeMillis();
if (mCurTime - mLastTime < DELAY) {
mClickCount++;
} else {
mClickCount = 1;
}
currLikeCount++;
likeCount.setText(String.valueOf(currLikeCount));
delay();
mLastTime = mCurTime;
bubbleView.startAnimation(bubbleView.getWidth(), bubbleView.getHeight());
}
});
}
private void delay() {
if (timeTask != null)
timeTask.cancel();
timeTask = new TimerTask() {
@Override
public void run() {
Message message = new Message();
mHandler.sendMessage(message);
}
};
delayTimer = new Timer();
delayTimer.schedule(timeTask, DELAY);
}
/**
* 点赞请求网络
*/
private void praiseRequest(int count) {
}
}
第二个问题由于暂时没条件做推送,所以只能客户端每隔一段时间轮一次接口了,如果相比较上次数量有增加,动画上就弹出相应数量的爱心数,这里就需要给屏幕上允许出现的爱心数量设置一个最大值,要不然一瞬间弹出几百个甚至上千个肯定要悲剧了。


放yy直播点赞动画的更多相关文章
- iOS直播点赞动画,iOS直播心型点赞动画
https://github.com/songxing10000/LikeAnimation-PraiseAnimation
- 巧用 transition 实现短视频 APP 点赞动画
在各种短视频界面上,我们经常会看到类似这样的点赞动画: 非常的有意思,有意思的交互会让用户更愿意进行互动. 那么,这么有趣的点赞动画,有没有可能使用纯 CSS 实现呢?那当然是必须的,本文,就将巧妙的 ...
- twitter点赞动画详解
今天在微博上看到@过气网红一丝 的一篇微博,codepen上贴出了twitter点赞那个动画效果的源码,地址 http://codepen.io/yisi/pen/LpXVJb .我看了下效果很好看, ...
- uniapp - 点赞动画插件
更新时间: 2019/8/31 - 点击下载demo 点赞动画插件配合animate.css更好用! 该组件参考于:https://github.com/OYsun/VueStar/tree/mast ...
- Vue 左右翻页,点赞动画
因做小活动比较多,使用了一些动画,做些笔记,供大家参考 翻页动画 router -> index.js import Vue from 'vue'; import Router from 'vu ...
- [deviceone开发]-直播APP心形点赞动画示例
一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值. 二. ...
- 直播点赞,上升的动画-- CAKeyFrameAnimation
// // ViewController.m // DMHeartFlyAnimation // // Created by Rick on 16/3/9. // Copyright © 20 ...
- [deviceone开发]-心形点赞动画示例
一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值.二.效 ...
- CSS3点赞动画特效源码下载
体验效果:http://hovertree.com/texiao/jquery/62/ 效果图: 下载:http://hovertree.com/h/bjaf/1dvh9ym6.htm 特效库:htt ...
随机推荐
- 给大家安利一个学习angular2的视频网站
本文地址:http://blog.csdn.net/sushengmiyan 本文作者:苏生米沿 视频地址: https://egghead.io/courses/angular-2-fundamen ...
- Antlr v4入门教程和实例
1 重逢ANTLR 最早知道ANTLR是当年学习Apache Derby数据库源码时,在看到SQL解析那一层时,第一次看到编译原理在实际项目中的应用,惊叹之余也只能望而却步.之前也根据网上一些资料尝试 ...
- 优先使用TimeUnit类中的sleep()
TimeUnit是什么? TimeUnit是java.util.concurrent包下面的一个类,TimeUnit提供了可读性更好的线程暂停操作,通常用来替换Thread.sleep(),在很长一段 ...
- 计算机网络之IP地址
IP地址的分类 整个的因特网就是一个单一的.抽象的网络.IP地址就是给因特网上的每一个主机(或路由器)的每一个接口分配一个在全世界范围内唯一的32位的标识符. 所谓分类的IP地址,就是将IP地址划分为 ...
- Objective-C方法与函数的区别
Objective-C方法与函数的区别 方法是唯对象所有 函数是不依赖于对象存在的 方法 函数 - (void)test; void test(); 方法是以减号 - 开头 - 类型要用()括起来 - ...
- JSP基础概要
[版权申明:本文系作者原创,转载请注明出处] 文章出处:http://blog.csdn.net/sdksdk0/article/details/51925232 作者:朱培 ID:sdksdk0 一 ...
- 将meteor部署到自己的服务器(deploy meteor to your own server)
安装指定版本的node # 所有版本在:https://nodejs.org/download/release/# current dir:/rootwget -c https://nodejs.or ...
- Python动态展现之一
首先: def f(): print('first') def g(): f() g() def f(): print('second') g() 结果: >>> first sec ...
- 重写方法的利器-super
重写方法的利器-super class ilist(list): def __init__(self,dft=None,r=list()): super(ilist, self).__init__(r ...
- iOS中监控软键盘显示或隐藏的可靠方法
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 如果你试图在软键盘的显示或隐藏时去改变的UI界面结构,仅有的方 ...