首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Android自定义下拉刷新动画--仿百度外卖下拉刷新

现如今的APP各式各样,同样也带来了各种需求,一个下拉刷新都能玩出花样了,前两天订饭的时候不经意间看到了“百度外卖”的下拉刷新,今天的主题就是它–自定义下拉刷新动画。...分析 image.png 我们可以看到百度外卖的下拉刷新的头是一个骑车的快递员在路上疾行,分析一下我们得到下面的动画: 背景图片的平移动画 太阳的自旋转动画 两个小轮子的自旋转动画 这就很简单了,接下来我们去百度外面的图片资源文件里找到这几张图片...:(下载百度外卖的apk直接解压即可) image.png 定义下拉刷新头文件:headview.xml 这里注意一下:我们定义了两张背景图片的ImageView是为了可以实现背景的平移动画效果...动画定义完了我们开始定义下拉刷新列表,下拉刷新网上有很多,不详细的说了,简单的改造一下,根据刷新状态开启关闭动画即可。...,其实很简单,所有的下拉刷新动画都类似这样实现的。

1.4K30
您找到你想要的搜索结果了吗?
是的
没有找到

Android源码解析--超好看的下拉刷新动画

,如果给你的项目中加上这些动画,相信你的app一定很优秀,今天给大家分析一下来自Yalantis的一个超好看的下拉刷新动画。...接下来我们看一下代码: 一、首先我们需要自定义刷新的动态RefreshView(也就是下拉时候的头) 1.初始化头所占用的Dimens private void initiateDimens() {...,下面我们来看看怎么结合下拉刷新来调用吧?...二、我们还需要自定义一个PullToRefreshView(下拉刷新) 1.我们的PullToRefreshView这里需要继承ViewGroup 我们先把刚才定义的刷新时的动画加进来 private...说明: 自定义View里面的一些动画效果,包括飞机的动画效果,风的动画效果和一些方法没有详细介绍,有兴趣的小伙伴可以到github上下载源码仔细研究一下,作者写的还是比较不错的,很佩服。

1.2K20

Android ScrollView实现下拉弹回动画效果

这里设计一个自定义View,继承了ScrollView,实现可以下拉里面的内容,松手后画面弹回,这个自定义的View可以当做ScrollView来使用。 一般设计时的应用效果: ?...android.view.View; import android.view.animation.TranslateAnimation; import android.widget.ScrollView; /** * 实现了可以有下拉弹回的...当滚动到最上或者最下时就不会再滚动,这时移动布局 if (isNeedMove()) { if (normal.isEmpty()) { // 填充矩形,目的:就是告诉this:我现在已经有了,你松开的时候记得要执行回归动画...deltaY / 2, inner.getRight(), inner.getBottom() - deltaY / 2); } break; default: break; } } /*** * 开启动画移动...*/ public void animation() { // 开启移动动画 TranslateAnimation ta = new TranslateAnimation(0, 0, inner.getTop

1K31

Android自定义下拉刷新动画--仿百度外卖下拉刷新

现如今的APP各式各样,同样也带来了各种需求,一个下拉刷新都能玩出花样了,前两天订饭的时候不经意间看到了“百度外卖”的下拉刷新,今天的主题就是它--自定义下拉刷新动画。...分析 我们可以看到百度外卖的下拉刷新的头是一个骑车的快递员在路上疾行,分析一下我们得到下面的动画: 背景图片的平移动画 太阳的自旋转动画 两个小轮子的自旋转动画 这就很简单了,接下来我们去百度外面的图片资源文件里找到这几张图片...:(下载百度外卖的apk直接解压即可) 定义下拉刷新头文件:headview.xml 这里注意一下:我们定义了两张背景图片的ImageView是为了可以实现背景的平移动画效果。...动画定义完了我们开始定义下拉刷新列表,下拉刷新网上有很多,不详细的说了,简单的改造一下,根据刷新状态开启关闭动画即可。...好了,自定义下拉刷新动画我们就实现了,其实很简单,所有的下拉刷新动画都类似这样实现的。

1K100

实现一个带下拉弹簧动画的 ScrollView

在刚推出的 Support Library 25.3.0 里面新增了一个叫 SpringAnimation 的动画,也就是弹簧动画。要是用它来做一个滑动控件下拉回弹的效果,应该不错吧。...property - 动画的性质,可以选择平移、缩放、旋转等 finalPosition - 动画结束时,控件所在位置的坐标偏移量 这里实现的滑动控件是上下滑动的,所以我们这样来获取 SpringAnimation...再调用 springAnim.start() 就可以开始动画啦。...在顶部的时候如果是往上滑动,则把动画效果取消,把控件位置复原,否则可能出现控件一直偏移的情况。 最后当手指抬起时,执行弹簧动画就好了。...下拉回弹的效果就已经完成了。对了,我们顺便把底部上拉的回弹也做一下呗。

1.2K80

利用max-height适应多尺寸屏幕的下拉动画

移动设备的特点之一便是屏幕尺寸多种多样,所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性。...比如我们要制作以下动画:红框2为详细内容,默认收起;红框1处为事件响应热区,点击后展开或收起红框2的内容。 ? 这个 动画我们需要考虑以下几点: 1....不使用任何动画框架。 我们在制作下拉展开动画的时候,一般首先会想到将内容节点的高度设置为0,然后事件触发将内容节点的高度设为展开后的值。...移动设备的特点之一,便是其浏览器对css属性和动画支持的很好,我们可以大胆的使用。细节如下: 1....简易demo如下,因demo无法模拟移动设备的多屏尺寸,大家可以改变container的宽度模拟,当然,移动设备上container的宽度取值为100%: See the Pen 不同尺寸移动设备下拉动画适配

1.2K80

Android从零撸美团(二) - 仿美团下拉刷新自定义动画

先上图: 一、分析 美团的下拉加载动画初看挺简单的,就一个卖萌的小人。细看的话还稍微有点复杂,一共有三个状态。 刚开始下拉的时候,小脑袋从小变大的过程。...下拉到一定程度但还没松手,小人翻了个跟头直到完全出现。再往下拉保持最后完全出现的状态。 松开后左右摇头卖萌直至加载结束回弹回去。 这是三个动画啊!真佩服这些大厂,简单的加载动画都搞这么复杂。。...正在下拉还没松手时调用 //每次重新下拉时,将图片资源重置为小人的大脑袋 mImage.setImageResource(R.drawable.commonui_pull_image...Header高度100%时,开始加载正在下拉的初始动画,即翻跟头 if (percent >= 1.0) {..."50" android:drawable="@drawable/commonui_refreshing_image_frame_06" /> 好啦,以上就是仿美团下拉刷新自定义动画的实现过程

47520

CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

css3动画 化用菜鸟教程的说法,CSS3动画是根据@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。...指定至少这两个CSS3的动画属性绑定向一个选择器:1.规定动画的名称。2.规定动画的时长。 3.过渡案例-炫酷下拉 ?...3-1原理分析 1.首先就是一个导航下拉,就是鼠标放上去出现一个下拉列表 2.然后发现,下拉里面,每一个选项是从不同的两个方向出现的 3.出现的方式是奇数项从左边进,偶数项从右边进,进入方式是滑动淡入。...3-2实现过程 1.首先页面的布局,这个应该大家都知道,菜单无非就是一个ul-li列表,下拉列表就是li下面的一个ul-li。...demo-nav li:hover ul li { opacity: 1; transform: translate3d(0, 0, 0); } 注意1:在显示下拉列表的操作上

4K40
领券