仿抖音 APP 视频切换和点赞效果

栏目: IT技术 · 发布时间: 4年前

内容简介:作者:Yun丶Lei链接:https://www.jianshu.com/p/c43c75303174

code小生 一个专注大前端领域的技术平台 公众号回复 Android 加入安卓技术群

作者:Yun丶Lei

链接:https://www.jianshu.com/p/c43c75303174

声明:本文已获 Yun丶Lei 授权发表,转发等请联系原作者授权

1、ViewPager2

网上很多仿抖音视频切换的很多都是使用自定义竖方向的ViewPager或者使用RecyclerView+PagerSnapHelper实现。但是这两种方式其实都有一定的缺陷:

1、但是ViewPager实现,生命周期有一定问题(ps:FragmentPagerAdapter在新版本中提供了BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT来解决这个问题),notifyDataSetChanged支持很不好。关于生命周期的更新可以参考androidx中的Fragment懒加载方案

2、而使用RecyclerView+PagerSnapHelper实现,需要自己处理生命周期。

其实我们可以使用androidx中提供的ViewPage2来实现这个功能。

dependencies {
    implementation "androidx.viewpager2:viewpager2:1.0.0"
}

查看源码,ViewPager2继承自ViewGroup,其中发现了三个比较重要的成员变量:

private LinearLayoutManager mLayoutManager;
RecyclerView mRecyclerView;
private PagerSnapHelper mPagerSnapHelper;

明眼人一看就知道了,ViewPager2的核心实现就是RecyclerView+LinearLayoutManager+PagerSnapHelper了,因为LinearLayoutManager本身就支持竖向和横向两种布局方式,所以ViewPager2也能很容易地支持这两种滚动方向了,而几乎不需要添加任何多余的代码。

使用上和老的ViewPager基本没啥却别,下面ViewPager2的几个新东西:

  • 支持RTL布局

  • 支持竖向滚动

  • 完整支持notifyDataSetChanged

  • FragmentStateAdapter替换了原来的 FragmentStatePagerAdapter

  • RecyclerView.Adapter替换了原来的 PagerAdapter

  • registerOnPageChangeCallback替换了原来的 addPageChangeListener (刚开始使用没看完源码,按照之前的set或者add找了半天,囧)

  • public void setUserInputEnabled(boolean enabled)禁止滑动

  • ...

关于更多ViewPager2的资料大家可以自行搜索。

2、视频播放器

本demo中使用的是GSYVideoPlayer,实际项目中可自行选择封装。demo中没有对其进行过多的处理,只是为了看效果,实际的抖音中有更多复杂的东西。

3、demo结构

仿抖音 APP 视频切换和点赞效果
demo结构

看最后实现的效果

仿抖音 APP 视频切换和点赞效果
视频切换
仿抖音 APP 视频切换和点赞效果
点赞、视频控制

4、无限上滑

借助ViewPager2的监听和adapter的notifyDataSetChanged即可实现

viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        super.onPageSelected(position)
        if (position==urlList.size-1){
            urlList.add(urlList[0])
            mPagerAdapter.notifyDataSetChanged()
        }
    }
})

5、视频和作者主页切换控制

override fun onResume() {
    super.onResume()
    if (mCurrentPosition > 0) {
        videoPlayer?.onVideoResume(false)
    } else {
        videoPlayer?.postDelayed({
            videoPlayer?.startPlayLogic()
        }, 200)
    }
}
override fun onPause() {
    super.onPause()
    likeLayout?.onPause()
    videoPlayer?.onVideoPause()
    mCurrentPosition = videoPlayer?.gsyVideoManager?.currentPosition ?: 0
}

6、点赞效果

抖音的点赞效果是由右侧的桃心点赞和屏幕的点击构成,右侧的点击后为点赞状态并有点赞动画,再次点击取消点赞。

先来看看效果:

仿抖音 APP 视频切换和点赞效果
点赞

此处我们观察效果基本和此前用过的一个三方库比较相似,此处就先又此代替,后面有时间再进行完善。

该库为Like Button,使用方式很简单,如下:

<com.github.like.LikeButton
    android:id="@+id/likeBtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    app:icon_size="40dp"
    app:icon_type="heart"
    app:like_drawable="@mipmap/ic_heart_on"
    app:unlike_drawable="@mipmap/ic_heart_off" />

LikeButton具有以下属性,使用时可自行去查看

<com.github.like.LikeButton
    app:icon_type="Star"
    app:circle_start_color="@color/colorPrimary"
    app:like_drawable="@drawable/thumb_on"
    app:unlike_drawable="@drawable/thumb_off"
    app:dots_primary_color="@color/colorAccent"
    app:dots_secondary_color="@color/colorPrimary"
    app:circle_end_color="@color/colorAccent"
    app:icon_size="25dp"
    app:liked="true"
    app:anim_scale_factor="2"
    app:is_enabled="false"/>

设置LikeButton的监听事件:

likeBtn.setOnLikeListener(object : OnLikeListener {
    override fun liked(p0: LikeButton?) {
        toast("已点赞~~")
    }

    override fun unLiked(p0: LikeButton?) {
        toast("取消点赞~~")
    }

})

我们可以看一下点赞按钮的点赞效果

仿抖音 APP 视频切换和点赞效果
点赞

7、屏幕点赞

分析抖音的屏幕点赞由几个部分组合而成(红心可自绘,也可以直接使用图片)

1、刚开始显示的时候,有个由大到小缩放动画

2、透明度变化

3、向上平移

4、由小到大的缩放

5、刚开始显示的时候有个小小的偏移,避免每个红心在同一个位置

8、实现过程

获取红心

private var icon: Drawable = resources.getDrawable(R.mipmap.ic_heart)

监听Touch事件,并在按下位置添加View

override fun onTouchEvent(event: MotionEvent?): Boolean {
    if (event?.action == MotionEvent.ACTION_DOWN) {     //按下时在Layout中生成红心
        val x = event.x
        val y = event.y
        addHeartView(x, y)
        onLikeListener()
    }
    return super.onTouchEvent(event)
}

为红心添加一个随机的偏移(此处为-10~10)

img.scaleType = ImageView.ScaleType.MATRIX
val matrix = Matrix()
matrix.postRotate(getRandomRotate())       //设置红心的微量偏移

设置一开始的缩放动画

private fun getShowAnimSet(view: ImageView): AnimatorSet {
    // 缩放动画
    val scaleX = ObjectAnimator.ofFloat(view, "scaleX", 1.2f, 1f)
    val scaleY = ObjectAnimator.ofFloat(view, "scaleY", 1.2f, 1f)
    val animSet = AnimatorSet()
    animSet.playTogether(scaleX, scaleY)
    animSet.duration = 100
    return animSet
}

设置慢慢消失时的动画

private fun getHideAnimSet(view: ImageView): AnimatorSet {
    // 1.alpha动画
    val alpha = ObjectAnimator.ofFloat(view, "alpha", 1f, 0.1f)
    // 2.缩放动画
    val scaleX = ObjectAnimator.ofFloat(view, "scaleX", 1f, 2f)
    val scaleY = ObjectAnimator.ofFloat(view, "scaleY", 1f, 2f)
    // 3.translation动画
    val translation = ObjectAnimator.ofFloat(view, "translationY", 0f, -150f)
    val animSet = AnimatorSet()
    animSet.playTogether(alpha, scaleX, scaleY, translation)
    animSet.duration = 500
    return animSet
}

设置动画关系,并且在动画结束后Remove该红心

val animSet = getShowAnimSet(img)
val hideSet = getHideAnimSet(img)
animSet.start()
animSet.addListener(object : AnimatorListenerAdapter() {
    override fun onAnimationEnd(animation: Animator?) {
        super.onAnimationEnd(animation)
        hideSet.start()
    }
})
hideSet.addListener(object : AnimatorListenerAdapter() {
    override fun onAnimationEnd(animation: Animator?) {
        super.onAnimationEnd(animation)
        removeView(img)     //动画结束移除红心
    }
})

区分单击和多次点击,单击的时候控制视频的暂停和播放,多次点击的时候实现点赞功能

override fun onTouchEvent(event: MotionEvent?): Boolean {
    if (event?.action == MotionEvent.ACTION_DOWN) {     //按下时在Layout中生成红心
        val x = event.x
        val y = event.y
        mClickCount++
        mHandler.removeCallbacksAndMessages(null)
        if (mClickCount >= 2) {
            addHeartView(x, y)
            onLikeListener()
            mHandler.sendEmptyMessageDelayed(1, 500)
        } else {
            mHandler.sendEmptyMessageDelayed(0, 500)
        }

    }
    return true
}

private fun pauseClick() {
    if (mClickCount == 1) {
        onPauseListener()
    }
    mClickCount = 0
}

fun onPause() {
    mClickCount = 0
    mHandler.removeCallbacksAndMessages(null)
}

完整代码

只是为了做实验,代码写的比较乱 https://github.com/leiyun1993/DouYinLike


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据结构与算法分析(Java版)(英文原版)

数据结构与算法分析(Java版)(英文原版)

(美)Clifford A.Shaffer / 电子工业出版社 / 2002-5 / 39.00元

《数据结构与算法分析(C++版)(第2版)》采用程序员最爱用的面向对象C++语言来描述数据结构和算法,并把数据结构原理和算法分析技术有机地结合在一起,系统介绍了各种类型的数据结构和排序、检索的各种方法。作者非常注意对每一种数据结构的不同存储方法及有关算法进行分析比较。书中还引入了一些比较高级的数据结构与先进的算法分析技术,并介绍了可计算性理论的一般知识。本版的重要改进在于引入了参数化的模板,从而提......一起来看看 《数据结构与算法分析(Java版)(英文原版)》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具