仿小米视频下滑视频动画效果
昨日无意间看到小米视频,感觉效果不错,不过由于我并没有接触过视频类的项目,所以在这里只对动画效果做了模仿,并不能达到小米视频的真正效果。
首先我们先来看一下小米视频的效果:
在向下滑动一定距离后,videoview(况且称之为viewdeoview吧)会随着下滑滑动到屏幕的下方,并且在滑动过程中位置不在变化,那么首先先缕清思路,首先我们要自定义一个可以监听滑动的scrollview,这个不是很难,直接上代码:
@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {super.onScrollChanged(l, t, oldl, oldt);if(scrollChanged!=null){scrollChanged.changed(this,l,t,oldl,oldt);}}public interface ScrollChanged{void changed(MyScrollView who,int l, int t, int oldl, int oldt);}public ScrollChanged scrollChanged;public void setScrollChanged(ScrollChanged scrollChanged){this.scrollChanged=scrollChanged;}}
这样的话我们就定义好了布局,然后我们在想如何让一个布局一直保持在屏幕下方而位置不变呢?这时候我想到了RelativeLayout的属性,于是脑洞大开,开始写布局文件先:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/test_rl"android:layout_width="match_parent"android:layout_height="match_parent"><com.example.mvptestdemo.MyScrollViewandroid:id="@+id/test_sc"android:layout_width="match_parent"android:layout_height="wrap_content"><LinearLayoutandroid:id="@+id/test_ll"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><VideoViewandroid:id="@+id/test_vv"android:layout_width="match_parent"android:layout_height="250dp"android:background="@android:color/black" /><LinearLayoutandroid:id="@+id/test_ll2"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/transparent"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="101dp"android:background="@android:color/holo_red_dark"android:gravity="center"android:text="111111111111111111111" />
<span style="white-space:pre"> </span>....................................................<TextViewandroid:layout_width="match_parent"android:layout_height="101dp"android:background="@android:color/holo_red_dark"android:gravity="center"android:text="111111111111111111111" /></LinearLayout></LinearLayout></com.example.mvptestdemo.MyScrollView>
</RelativeLayout>
我们布局最外层是一个Relativetlayout,然后是我们自定义的Scrollview了。布局很简单,最后我们来看activity部分的代码:
首先我们应该获取VideoView布局的宽高,于是我们在oncreate中开始获取:
videoView.post(new Runnable() {@Overridepublic void run() {height = videoView.getHeight();width = videoView.getWidth();}});
然后我们开始对Scrollview的滚动进行监听,由于监听是动态的,所以我们应该保证在滑动过程中,VideoView的动画只执行一次,所以我们定义一个全局的boolean来确定他只执行一次:
<pre name="code" class="java"> myScrollView.setScrollChanged(new MyScrollView.ScrollChanged() {@Overridepublic void changed(MyScrollView who, int l, int t, int oldl, int oldt) {if (t >= height) {if (!isAnim) {startAnim();isAnim = !isAnim;}} else {if (isAnim) {startAnim2();isAnim = !isAnim;}}}});
这里的t就是我们滑动的距离,当我们滑动的距离大于VideoView的高度时我们执行动画,并且对boolean进行变换。
接下来我们来看startAnim()的部分代码,首先我们要在将VideoView想办法改到外层的RelativeLayout中,于是我们可以通过动态的代码进行设置:
new Handler().post(new Runnable() {@Overridepublic void run() {float i = new Float(height) / new Float(width);newHeight = (int) (new Float(newWidth) * i);LinearLayout layout = (LinearLayout) myScrollView.getChildAt(0);layout.removeView(videoView);RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(newWidth, newHeight);lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);lp.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);lp.setMargins(0, 0, 30, 30);videoView.setLayoutParams(lp);relativeLayout.addView(videoView);}});
这里先说handler,起初我没有在外层加handler.post,但是在滑动太快的时候会出现nullpointer的异常,在各种度娘谷歌娘一通后才知道是由于布局没有完成而造成的,于是加入post来执行。
首先我们根据VideoView的宽高比来进行对缩小后的视频进行宽高的计算,这里要注意float和int的转换问题。然后我们从scrollview中移除videoview,然后给videoview重新设置LayoutParams,因为RelativeLayout有addRule的方法,所以下面的代码也非常简单,在写完这几行代码后我们再向下滑动的时候,VideoView已经乖乖的站在了屏幕的下方,这时候我们就需要一个简单的位移动画来使这个过程不那么生涩:
ObjectAnimator animator2 = ObjectAnimator.ofFloat(videoView, View.TRANSLATION_X,-(widthPixels-newWidth),0);ObjectAnimator animator3 = ObjectAnimator.ofFloat(videoView, View.TRANSLATION_Y, -(heightPixels-newHeight) ,0);AnimatorSet animatorSet=new AnimatorSet();animatorSet.playTogether( animator2, animator3);animatorSet.setDuration(1000);animatorSet.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationStart(Animator animation) {super.onAnimationStart(animation);new Handler().post(new Runnable() {@Overridepublic void run() {videoView.start();}});}@Overridepublic void onAnimationEnd(Animator animation) {super.onAnimationEnd(animation);}});animatorSet.start();
这是简单的属性动画,并没有什么比较难以理解的部分,在执行完这个动画之后我们让videoview开始播放视频........
这样我们的下滑过程中的动画已经模仿的差不多了,我们来看一下效果吧~
这是全部的动画效果,最后我们只需要在上滑到小于Viderview的高度时,执行另外一个回归原来位置的动画即可,由于小米视频在回来的时候并没有对其执行动画处理,可能也是为了动画执行时的边框问题,于是我在这里也只是写了改变布局的代码:
new Handler().post(new Runnable() {@Overridepublic void run() {relativeLayout.removeView(videoView);LinearLayout layout = (LinearLayout) myScrollView.getChildAt(0);LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(width, height);videoView.setLayoutParams(lp);layout.removeAllViews();layout.addView(videoView);layout.addView(ll2);videoView.start();
大功告成了,这只是一个很简单的例子,通过改变布局和动画相结合我们可以做出很多比较有意思的效果,希望大家多多尝试~如果有更好的效果请分享给我~~~~
最后上一张我老婆的美图:
祝大家上班愉快~
仿小米视频下滑视频动画效果相关推荐
- 直播app源代码 直播软件开发Android UI动画 仿直播点赞飘心动画效果
直播app源代码 直播软件开发Android UI动画 仿直播点赞飘心动画效果 一个飘心的小动画,之前看也看到网上有很多轮子,但是感觉不是很符合我的需求,所以自己就凑活凑活搞出来一个,废话不多说先看图 ...
- 小米空气净化器介绍(动画效果)PPT模板-优页文档
模板介绍 小米空气净化器介绍(动画效果)PPT模板-优页文档.一套,演讲发布,幻灯片模板,内含橙色多种配色,简约,科技风格设计,动态播放效果,精美实用. 希望下面这份精美的PPT模板能给你带来帮助,温 ...
- 手把手教你撸最新Youtube视频 拖拽动画效果
前言 又到了金三银四的季节了,忙的人特别忙,面试啊,加班啊,闲的人也是特别闲吧,就比如我,天天划水,闲的写文章,做动画,同时呢各种新技术在不断的涌进,推动者软件行业的发展,不要焦虑,不要着急,学好本分 ...
- Android实现仿QQ登录界面背景动画效果
登录QQ的时候,我们会看到在登录界面的背景不是静态的,而是一段动画效果,刚开始觉得蛮好奇的,现在我们也来实现一下这种效果,实现起来还是挺简单的. 实现步骤: 1.自定义CustomVideoView类 ...
- Android UI设计与开发】第03期:引导界面(三)仿微信引导界面以及动画效果
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/8985457 基于前两篇比较简单的实例做铺垫之后,这一篇我们来实 ...
- 引导界面(三)仿微信引导界面以及动画效果
基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是so easy!正所谓会者不难,难者不会,大概说的就是这个意思了吧 ...
- html5点赞按钮特效,jquery仿直播app按钮点赞动画效果
特效描述:直播app按钮 按钮点赞动画 点赞动画效果.仿照直播软件制作的飘赞效果,jquery点赞动画效果. 代码结构 1. 引入JS 2. HTML代码 $(function () { $(&quo ...
- Android UI动画 仿直播点赞飘心动画效果
首先在写之前加上效果图: 第一步我们先导入依赖:allprojects {repositories {..........maven { url 'https://jitpack.io' }} }de ...
- 仿百度糯米团顶部搜索栏动画效果
看到百度糯米6.7版本 顶部搜索栏有个动画效果如下: 首先 这不是个简单的缩放变宽的动画,因为里面的字体整体左移. 所以 应该可以做成两个重叠的布局,上层的做左移动画,底层的右移动画. 反之就动画反过 ...
最新文章
- 推荐10款冷门但强大的windows软件,值得收藏!
- 纪念逝去的岁月——C/C++选择排序
- python爬虫正则表达式实例-Python爬虫(十一)_案例:使用正则表达式的爬虫
- sql server服务看不到,显示为远程过程调用在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误10061...
- python api开发用什么框架_python+requests接口自动化框架
- 火焰图 性能分析 java,使用火焰图进行Java应用性能分析
- ubutun 更换网络源_Ubuntu 更换源
- 华为鸿蒙系统学习笔记11-鸿蒙(HarmonyOS)2.0方舟编译器官方网址开源地址
- 谈谈持久连接——HTTP权威指南读书心得(五)
- RAC安装之一 安装前准备
- html compiler注册机,XXX计算器1.8注册分析和注册机代码
- 获取所有QQ好友列表以及好友信息
- 32位kali安装minidwep_原水_新浪博客
- 苹果手机用计算机打不开,苹果手机更新ios11后,照片在电脑上打不开怎么办?...
- 在 Airbnb 使用机器学习预测房源的价格
- mac上破解photoshop cs6
- 虚拟机安装debian
- c语言十全十美游戏规则,十全十美游戏
- 手机怎么绑定邮箱微信,邮箱可以登录微信吗?
- mybatis-plus 分页类型转换工具类
热门文章
- 计算机组成原理基础知识试题及答案,[电脑基础知识]计算机组成原理试题库.doc...
- 致那些徘徊在测试界的屌丝
- 企业转型升级,务必抓住“企业上云”政策红利
- 一节前端课:html+css+js做个计算器
- 帆软报表(FineReport)版本9打开版本10的报表
- 最后1天,包邮送50豆瓣高分Python 好书
- 王者舰队服务器维护需要几天,王者舰队怎么快速获取金币 金币快速获得方法...
- 浪潮飞龙系列国产服务器
- 仿真器VCS solver 对包含 function 约束的求解
- Oracle11g新特性之Replay a captured workload 捕获工作负载新环境重放负载测试压力