仿抖音--音乐裁剪控件,android实现IOS版本效果

补充:源码git地址


看了一下抖音的音乐裁剪(IOS),看上去很不错,所以决定实现一下。一路上写了三四个版本,遇到了很多问题,在这里分享一下。首先看下效果:
这里写图片描述


在说明怎么实现之前,我先分享下我在做的过程中的思路。

第一版 :一屏效果

看到这个动画效果,第一反应就是属性动画,根据宽度动态绘制。那么这种动态效果怎么实现呢:刚开始想通过setXfermode来实现,后来发现颜色不太对这里写图片描述,因为你的背景色是有透明度的,后来出来的图也是有透明度的,不好看。

第二版:一屏效果之颜色要对

因为绘制的时候,每个小柱子的宽度是按照屏幕宽度除以个数手动计算的,那么我为什么不直接用蓝色直接绘制一个覆盖到透明的上面,这里有个问题:你绘制的时候,小柱子是按照一个为单位绘制的,但是动画可能出现只在半个柱子上,所以还得切图,Bitmap.createBitmap控制起始位置和宽度,问题解决。

第三版:多屏滑动–该死的bitmap

没有经过大脑的想法:既然一屏实现了,那么多屏的话,我在刚开始绘制view的时候,把宽度搞得很大不就行了!
Bitmap too large to be uploaded into a texture。当头棒喝。。。
查了一下是硬件加速的问题,但是禁止硬件加速有可能卡顿,虽然在demo里测试一下没有卡顿,但是想了想万一多屏的个数长达几十个呢?这个方案不行。

第四版:多屏滑动– scrollview嵌套

既然不能直接画出来大图,那我一个一个的放到scrollview里总行了吧。scrollview –>LinearLayout –> 好多个自定义view
试了一下,不错不错效果可以啊。
PS:这个时候我往里面添加了20个view
后来想了想,万一里面到时候需要几十甚至上百个view呢?因为按照抖音的逻辑,我一屏显示的宽度,代表录制视频的时间,总宽度代表音乐时间,如果我视频只有三秒,但是音乐是肖邦的夜曲呢(五分多钟),这时候是将近106屏,要死啊。试了一下:果然崩了!!! 原因就是OOM,想想也是,这么多view绘制怎么不蹦。

第五版:多屏滑动 – view的滑动复用

既然因为OOM崩了,那么我每次少绘制几个不就行了。
试想一下,其实我每次只需要绘制三屏,然后让后面的复用前面的就好了啊,为自己的机智点赞。
这是鸿洋_2014年写的,哈哈哈哈
Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果
大概原理:每次当第三屏显示的时候,把第一屏删掉,然后在第三屏后面添加一个,这样就实现的无限使用。
但是有个问题啊,人家抖音的IOS版本可以支持快速滑动啊,这个快速滑动到第三屏就不行了,以后也只能快速滑动一屏。
怎么办?

第六版:多屏滑动 – RecycleView 最终版

对于view的复用这个关键字,我们就会想到RecycleView和ListView,那么我把view当做item添加进去不就可以了,复用什么的控件本身就帮我做了啊,越想越开心,说干就干。
由于前面的经验,很快就差不多了,快速滑动没问题,就差显示时候的动画了,根据前面的经验复制粘贴把动画加上,我靠。。。 怎么回事,为什么后面的view刚滑到就有部分动画了? 哦,是因为复用啊。。。没关系,我加上判断。

     holder.myView_last.setSrcW_NOInvalidate(0);//清空属性动画改变的显示
        holder.myView_last.clearAnimation();//如果有动画就清空
        //根据type控制显示,这里的逻辑是对于不显示的view:
        //type=0,只绘制白色;type=1只绘制蓝色。对于显示中的部分手动控制
        holder.myView_last.setType(mDatas.get(position));

为啥加上了还不行,打个LOG看看。。。哦,原来是缓存的问题,RecycleView和listview不一样的地方在于,它每次缓存的个数是两个,那么我当前显示的第一个view的前一个,和最后一个view的后一个view都不会改变。没关系,我手动修改:

  //由于缓存,手动刷新前一个item
   mAdapter.notifyItemChanged(firstVisibleItemPosition - 1, TAG);

到目前位置,不显示的区域的状态尽在掌握中了,但是显示的区域的动画还得改。因为之前只做了一个view从头到尾的动画,现在滑动的时候,view显示一般是一个vie显示一部分,那么就应该对屏幕显示的两个view设置动画,第一个执行完了,再执行第二个。
不对啊
怎么获取不到当前显示的view,getchildAt不好使啊,啥?不能根据position获取啊,因为只保存显示中的view,我们通过getChildCount获取一下,结果是2,那好吧,试试别的方法:

 private MyView_last getView(int position) {
        View child = getLayoutManager().findViewByPosition(position);
        HomeAdapter.MyViewHolder viewHolder = (HomeAdapter.MyViewHolder) getChildViewHolder(child);
        MyView_last myView_last = viewHolder.myView_last;
        if (myView_last == null) {
            return null;
        } else {
            return myView_last;
        }
    }

不错不错,直接在第一个动画结束后执行第二个动画就好了。

还要动画重复执行,没问题,在第二个动画执行完执行第一个就好了

要刚进去就对第一屏开始动画,但是我设置完adapter不能马上获取第一个view怎么办?

//在设置adapter的时候
 if (position == 0 && isFirst) {
            move = ObjectAnimator.ofInt(holder.myView_last, "srcW", 1, 1080);
            move.setDuration(3000);
            move.setRepeatCount(-1);
            move.setInterpolator(new LinearInterpolator());
            move.start();
        }

那就等我获取到这个动画对象以后,立刻执行就好了。


基本上到此为止,该解决的问题都差不多解决了。
如果有遇到相同问题的,欢迎交流。QQ:279825695
源码git地址

你可能感兴趣的:(Android)