博客
关于我
Android 自定义View实现直播点赞特效
阅读量:707 次
发布时间:2019-03-21

本文共 2174 字,大约阅读时间需要 7 分钟。

#直播点赞特效View开发

##1.需求背景

随着直播行业的快速发展,观众互动成为直播观看体验的重要环节。在现有的点赞、评论功能基础上,开发带有视觉特效的点赞功能可以显著提升用户体验。本文将详细介绍如何开发一个类似直播点赞特效的需求。

##2.自定义View实现特效

为了实现点赞特效,我们需要自定义一个View,并通过动画实现红心的放大、透明度变化以及沿着预设轨迹移动的效果。

###2.1自定义View类实现思路

  • View基本结构:继承RelativeLayout,作为容纳点赞特效的布局基础。
  • 动画控制:使用动画框架实现缩放、透明度渐变以及贝塞尔曲线运动轨迹。
  • 特效逻辑:点击屏幕时触发特效,随机生成点赞标记并附带动画效果。

###2.2Xml布局文件

###2.3Activity代码

public class GivePraiseActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.givepraise_layout);    }}

##3.点赞特效动画实现

###3.1动画Step1:创建缩放和透明度动画

private void addAnimator(final ImageView imageView) {    ObjectAnimator alpha = ObjectAnimator.ofFloat(imageView, "alpha", 0.3f, 1f);    ObjectAnimator scaleX = ObjectAnimator.ofFloat(imageView, "scaleX", 0.2f, 1f);    ObjectAnimator scaleY = ObjectAnimator.ofFloat(imageView, "scaleY", 0.2f, 1f);    AnimatorSet set = new AnimatorSet();    set.setDuration(100);    set.playTogether(alpha, scaleX, scaleY);    set.setTarget(imageView);        set.addListener(new Animator.AnimatorListener() {        @Override        public void onAnimationEnd(Animator animation) {            startBzierAnimation(imageView);        }    });        set.start();}

###3.2动画Step2:贝塞尔曲线运动轨迹

private void startBzierAnimation(final ImageView iv) {    iv.setAlpha(0);    ValueAnimator anim = getBzierAnimator(iv);    anim.start();}

###3.3贝塞尔动画实现

private ValueAnimator getBzierAnimator(final ImageView iv) {    PointF[] points = getBezierPoints(iv);    BezierEvaluator evaluator = new BezierEvaluator(points[1], points[2]);    ValueAnimator anim = ValueAnimator.create();    anim.setTarget(iv);    anim.addUpdateListener(updateListener);    anim.setDuration(3000);    anim.setInterpolator(getRandomInterpolator());    anim.begin();    return anim;}

##4.估值器的运算

贝塞尔曲线由四个点参数化:

  • P0:点赞特效起始点,位于屏幕底边中心。
  • P1:随机选在屏幕下方一个点。
  • P2:随机选在屏幕上方一个点。
  • P3:点赞特效结束点,位于屏幕顶部。

动画过程中,通过线性插值计算点卡的位置:[P(t) = P0(1-t)^3 + 3P1 t(1-t)^2 + 3P2 t^2(1-t) + P3 t^3]

具体实现可参考贝塞尔曲线动画BezierEvaluator类。

##5.特效展示

点击屏幕后,系统将随机生成四个点赞标记并附带动画效果。标记将沿着自定义轨迹从起始位置放大到正常大小,随后以贝塞尔曲线运动至终点位置。

本实现通过结合Android动画框架和贝塞尔曲线算法,实现了一个流畅且有创意的点赞特效。

转载地址:http://dhgez.baihongyu.com/

你可能感兴趣的文章
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>
Mysql中各类锁的机制图文详细解析(全)
查看>>