使用三阶贝塞尔曲线实现直播中点赞效果

作者 贾帅

CSDN: http://blog.csdn.net/jiashuai94

github: https://github.com/shuaijia

01

前言

完整代码,请查看我的github:https://github.com/shuaijia/LiveLike,喜欢的话就给点个赞喽^_^

视频直播想必大家都不谋生,从2015年左右开始,视频直播开始大量普及,市面上的大中型APP基本上都有直播功能,比如专做直播的斗鱼、花椒等。大家都可能看过别人直播甚至参与过直播,那么对精彩的内容总忍不住点赞、送礼物!

那作为开发的我们,总是以技术的角度看待世界,看到酷炫的点赞效果,当然也免不了自己实现一下子。

先看效果:

根据效果先分析一波:

根据效果,确定解决思路和关键技术:

  • 自定义View当然少不了,这是基础
  • 多种爱心随机出现、路径也都不同,所以随机数也是必要的
  • 每个爱心的运动速度、变化快慢是不同的,所以用到了插值器
  • 爱心的运动轨迹是平滑的曲线,而且曲线都不一样,所以我们想到了使用贝塞尔函数
  • 应用贝塞尔函数计算运动中点的位置,就需要使用估值器来实现平滑的动画效果

这些很重要!

有了实现思路,那么接下来我们根据分析的它的特点,一步步得来实现:

02

创建基础View,爱心置于底部并居中

这样使用RelativeLayout最为合适,所以自定义View需继承RelativeLayout:

当然了,构造也少不了

其中init()方法进行一些初始化,接下来的过程中我们会慢慢讲解和一步步完善init方法。

首先在init方法中设置子View的LayoutParams,使其能够实现底部居中。

注意: 控件的宽度高度应在onMeasure方法中获取

03

爱心类型实现随机

在自定义的View中创建 爱心 Drawable对象和数组

在init方法中,将爱心创建并存入数组

默认提供了五种不同颜色的爱心,当然,爱心数组可有开发者由外部设置,进行拓展。

04

爱心进入时的缩放和渐变动画

先看效果:

说到Android动画,我们以前常用Animation,它通常情况下能满足我们的需求,但是它的功能比较弱,并不是很好用。好在3.0后,强大的属性动画的出现,让动画在Android中实现起来变得非常容易。如果你还不知道属性动画怎么使用,赶紧去了解一下吧!

上代码

给传进来的target(就是爱心的ImageView)设置属性动画集,渐变的同时横纵向放大。

对外提供点赞的方法(其实是创建爱心ImageView并添加)

点赞其实就是:在爱心数组中随机抽取一个创建ImageView,添加给付控件并设置渐变和放大动画。

那么这样我们在按钮的点击事件中调用addFavor方法就可以实现如上图的爱心效果了。

05

使用贝塞尔函数实现曲线运动轨迹

我们怎么让爱心按照曲线移动?而且还有随机呢?

接下来就是本文的主角贝塞尔曲线登场的时刻啦,这也是我实现这个效果学到的最重要的知识。

简单来说:就是给定一个起点,一个终点,一个及一个以上的控制点,计算出一个曲线.

简单了解贝塞尔曲线后,发现 三次方贝塞尔曲线 符合我们的要求。

公式:

公式中需要四个P、P0是我们的起点,P3是终点,P1、P2是曲线的两个控制点。而t是一个因子,取值范围是0-1,熟悉动画的同学应该就明白,0-1,对动画的作用有多么重大。

因为需要自己实现贝塞尔,所以想到了属性动画中的TypeEvaluator,它就是我们需要的。

上代码:

先认识一下两个类:

  • TypeEvaluator:在获取动画对象时只需要传入起始和结束值系统就会自动完成值的平滑过渡,这个平滑过渡的完成就是靠TypeEvaluator这个类
  • PointF:点类,与Point一样,区别是其x和y值是float类型

由于我们view的移动需要控制x y 所以就传入PointF 作为参数。

核心就是在动画变化过程中,实时根据贝塞尔三阶方程计算点的位置并返回。

到这一步,只要我们传入两个PonitF就能得到一个贝塞尔曲线了。

接下来我们在FavorLayout中定义获取一个贝塞尔动画的方法:

根据贝塞尔曲线方程可知:两个控制点才是真正控制曲线路径的关键!为了使爱心的运动轨迹不同,所以我们随机生成两个控制点,就可以使得曲线轨迹随机

可能你已经发现,我给曲线动画设置了一个监听BezierListener

只有在回调里使用了计算的值,才能真正做到曲线运动,否则没有效果哦。

我们在位置更新时给爱心的ImageView设置x、y值,使其按计算的贝塞尔路径运动起来。

并且同时设置了逐渐变淡动画,也就是在运动过程中逐渐消失的效果。

修改一下addFavor方法:将动画更换为 贝塞尔动画

看下效果:

06

收尾,效果合成

1、实现变速

在init方法中:

随机选用插值器,使得爱心运动有变化。

2、动画合并

3、修改点赞方法

聪明的伙伴可能又看出来了,我给动画集设置了结束监听,又是为什么呢?

4、设置消失监听

我们之前代码其实已经实现点赞效果,但每次点击都在创建新的爱心的ImageView并且添加到父布局中,所以增加了一个监听,目的是为了在动画结束后,把爱心移除,不然,子view只增不减!

07

总结

总结没想好说什么,由于时间仓促,不免有bug或不足的地方,大家发现可以告诉我,有好的建议也可以告诉我,我们一起进步哦!如果您喜欢我的文章,可以去https://github.com/shuaijia/LiveLike点个赞哦!^_^

邮箱:819418850@qq.com

原文发布于微信公众号 - Android机动车(JsAndroidClub)

原文发表时间:2017-10-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Flash/Flex学习笔记(24):粒子效果

粒子爆炸: 仍然要用到以前的小球类,不过稍加改造 package { import flash.display.Sprite; //小球 类 publi...

20250
来自专栏章鱼的慢慢技术路

用OpenGL绘制平滑着色的三角形与相交区域的混合着色

333100
来自专栏GreenLeaves

Javascript之Dom学习

1.简介:DOM是一套对文档的内容进行抽象和概念化的方法。在现实世界里,人们对"世界对象模型"一定不会陌生,当人们用"房子","汽车"等这一类专用名字来描述生活...

21190
来自专栏数据小魔方

频率统计函数——FREQUENCY

今天跟大家分享一个频率统计函数——FREQUENCY函数! ▽▼▽ 在统计一组数据各数量段频数的时候,如果能够善用频率函数,工作效率将会大大提高,当然频率统计也...

35150
来自专栏慎独

Unity第三人称视角解决方案

34220
来自专栏我的技术专栏

UnityShader 表面着色器简单例程集合

90650
来自专栏GIS讲堂

dojo chart详解

Dojo提供了一套很完善的统计图(Chart)接口,在dojox/charting下面,可以支持很多种类型的。

16820
来自专栏iOS技术

移动端地图:屏幕边沿方向指示图标

在我们打游戏的时候,队友跑出我们的屏幕可视区域外时,经常会有一个头像图标在屏幕的边沿,并且起着指示队友方向的作用。

38990
来自专栏恰童鞋骚年

使用Unity3D的设计思想实现一个简单的C#赛车游戏场景

最近看了看一个C#游戏开发的公开课,在该公开课中使用面向对象思想与Unity3D游戏开发思想结合的方式,对一个简单的赛车游戏场景进行了实现。原本在C#中很方便地...

14830
来自专栏万波的专栏

解剖 WebGL & Three.js 工作原理

本文主要通过两方面来解剖 WebGL & Three.js :WebGL背后的工作原理和以Three.js为例,讲述框架在背后扮演什么样的角色,希望对大家学习有...

2.1K20

扫码关注云+社区

领取腾讯云代金券