高仿即刻侧滑阴影返回动画

目标效果

第一次看到即刻的侧滑拖拽就很感兴趣 这种拖拽动画的感觉太舒服了

即刻的动画效果

“pic0”/

对比下仿写的效果

“pic2”/

效果图压缩的有点厉害 先将就下吧

仿写思路

考虑到所有的界面都可以使用这种效果,我首先想到的是继承ViewGroup来实现
,这里选择继承FrameLayout

通过重写onInterceptTouchEvent(MotionEvent event)来判断是否拦截滑动事件

重写onTouchEvent(MotionEvent event)来处理绘制流程

由于ViewGroup为透明背景重写dispatchDraw(Canvas canvas)来完成初始化绘制

动画绘制思路

由于我的粗心没有仔细观察到原即刻的动画阴影内部横线的变化,仿写的最终效果其实是有略微差异的

原即刻中横线从无到有变化再到变化至箭头的过程是随着阴影同步变化的一气呵成

仿写中由于观察不细致导致横线变化至箭头的过程理解为了两步

  • 前半步是横线从无到有从小到大随着阴影同步变化
  • 后半步是当阴影增长到最大继续拖拽的话横线开始变化至箭头

所以整个绘制流程以阴影是否拖拽至最大分为了两部分

  • 如果没有拖拽至最大,贝塞尔曲线的控制点继续变化即可
  • 如果已经拖拽至最大,贝塞尔曲线的控制点不再变化,直线开始变为折线

扩展

简单的扩展下实现一些可选配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<slideDampongAnimationLayout.SlideDampingAnimationLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/search_result_slide_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
<--配置阴影颜色-->
app:bezier_curves_color="@color/black"
<--quadratic_bezier_curves二阶贝塞尔样式 high_order_bezier_curves类即刻样式-->
app:bezier_curves_type="quadratic_bezier_curves"
<--only_left只触发左边 only_right只触发右边 both两边都可触发-->
app:allow_gesture="only_left">
<--content-->
</slideDampongAnimationLayout.SlideDampingAnimationLayout>

可配置左右事件的监听

mSlideAnimationLayout.setSlideListener(new SlideEventListener() {
        @Override
        public void leftEvent() {
        }

        @Override
        public void rightEvent() {
        }
    });

最后

Gradle引入

implementation 'com.github.dabutaizha:SlideDampingAnimationLayout:v1.0.2'

项目地址:https://github.com/dabutaizha/SlideDampingAnimationLayout

欢迎大家star或者建议

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2019 All Rights Reserved.

访客数 : | 访问量 :