android今日头条刷新,仿今日头条刷新vector动画
一般的刷新动画是一个圈圈在转,而头条的比较特殊,直接上写好的效果图(一直不知道怎么把图片尺寸调小o(╯□╰)o)吧~
刷新动画_.gif
首先整个效果是通过SVG和vector来实现的,如果不是很了解,请看大佬的文章:
SVG学习--AnimatedVectorDrawable的使用
动画思路:
整个view可以分为五个部分:
1、最外面的壳(不需要动画)
2、中间矩形框
3、矩形框中的灰色矩形块
4、三根短线
5、三根长线
第一步:在drawable文件夹下新建名为refresh的vector文件:
android:width="200dp"
android:height="200dp"
android:viewportHeight="200"
android:viewportWidth="200">
android:name="out_rect"
android:pathData="M70,60
L130,60
Q140,60 140,70
L140,130
Q140,140 130,140
L70,140
Q60,140 60,130
L60,70
Q60,60 70,60"
android:strokeColor="@color/colorCustomHeaderLine"
android:strokeWidth="2" />
android:name="middle_rect"
android:pathData="M71,75
L100,75
L100,95
L72,95
L72,75"
android:strokeColor="@color/colorCustomHeaderLine"
android:strokeWidth="2" />
android:name="inner_rect"
android:fillColor="@color/colorCustomHeaderInner"
android:pathData="M73,76
L99,76
L99,94
L73,94" />
android:name="short_lines"
android:pathData="M108,75
L128,75
M108,85
L128,85
M108,95
L128,95"
android:strokeColor="@color/colorCustomHeaderLine"
android:strokeWidth="2" />
android:name="long_lines"
android:pathData="
M72,105
L128,105
M72,115
L128,115
M72,125
L128,125"
android:strokeColor="@color/colorCustomHeaderLine"
android:strokeWidth="2" />
打开xml右边的预览,我们可以看到效果
效果图.png
第二步:在drawable文件夹下新建名为refresh_vector的animated-vector
android:drawable="@drawable/refresh">
android:name="middle_rect"
android:animation="@animator/anim_middle_rect" />
android:name="short_lines"
android:animation="@animator/anim_short_lines" />
android:name="long_lines"
android:animation="@animator/anim_long_lines" />
android:name="inner_rect"
android:animation="@animator/anim_inner_rect" />
这里需要注意几点:
1、android:drawable="@drawable/refresh"这里一定要引用上面的refresh文件
2、target标签下的name一定要和refresh中的path标签下的名字一致
第三步:新建animator文件夹(不是anim),并在下面新建短线、长线、中间矩形框和里面矩形对应的objectAnimator集合:
anim_middle_rect.xml:
android:ordering="sequentially">
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M71,75
L100,75
L100,95
L72,95
L72,75"
android:valueTo="M99,75
L128,75
L128,95
L100,95
L100,75"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M99,75
L128,75
L128,95
L100,95
L100,75"
android:valueTo="M99,105
L128,105
L128,125
L100,125
L100,105"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M99,105
L128,105
L128,125
L100,125
L100,105"
android:valueTo="M71,105
L100,105
L100,125
L72,125
L72,105"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M71,105
L100,105
L100,125
L72,125
L72,105"
android:valueTo="M71,75
L100,75
L100,95
L72,95
L72,75"
android:valueType="pathType" />
anim_short_lines.xml:
android:ordering="sequentially">
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M108,75
L128,75
M108,85
L128,85
M108,95
L128,95"
android:valueTo="M72,105
L128,105
M72,115
L128,115
M72,125
L128,125"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M72,105
L128,105
M72,115
L128,115
M72,125
L128,125"
android:valueTo="M72,105
L92,105
M72,115
L92,115
M72,125
L92,125"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M72,105
L92,105
M72,115
L92,115
M72,125
L92,125"
android:valueTo="M72,75
L128,75
M72,85
L128,85
M72,95
L128,95"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M72,75
L128,75
M72,85
L128,85
M72,95
L128,95"
android:valueTo="M108,75
L128,75
M108,85
L128,85
M108,95
L128,95"
android:valueType="pathType" />
anim_long_lines.xml:
android:ordering="sequentially">
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M72,105
L128,105
M72,115
L128,115
M72,125
L128,125"
android:valueTo="M72,75
L92,75
M72,85
L92,85
M72,95
L92,95"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M72,75
L92,75
M72,85
L92,85
M72,95
L92,95"
android:valueTo="M72,75
L128,75
M72,85
L128,85
M72,95
L128,95"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M72,75
L128,75
M72,85
L128,85
M72,95
L128,95"
android:valueTo="M108,105
L128,105
M108,115
L128,115
M108,125
L128,125"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M108,105
L128,105
M108,115
L128,115
M108,125
L128,125"
android:valueTo="M72,105
L128,105
M72,115
L128,115
M72,125
L128,125"
android:valueType="pathType" />
anim_inner_rect.xml
android:ordering="sequentially">
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M73,76
L99,76
L99,94
L73,94"
android:valueTo="M101,76
L127,76
L127,94
L101,94"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M101,76
L127,76
L127,94
L101,94"
android:valueTo="M101,106
L127,106
L127,124
L101,124"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M101,106
L127,106
L127,124
L101,124"
android:valueTo="M73,106
L99,106
L99,124
L73,124"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M73,106
L99,106
L99,124
L73,124"
android:valueTo="M73,76
L99,76
L99,94
L73,94"
android:valueType="pathType" />
最后一步,在activity中:
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
final AnimatedVectorDrawable animatedVectorDrawable = (AnimatedVectorDrawable) ContextCompat.getDrawable(this, R.drawable.refresh_vector);
findViewById(R.id.imageView).setImageDrawable(animatedVectorDrawable);
animatedVectorDrawable.start();
//循环动画貌似只能这样。。。
final Handler mainHandler = new Handler(Looper.getMainLooper());
animatedVectorDrawable.registerAnimationCallback(new Animatable2.AnimationCallback() {
@Override
public void onAnimationEnd(Drawable drawable) {
mainHandler.post(new Runnable() {
@Override
public void run() {
animatedVectorDrawable.start();
}
});
}
});
android今日头条刷新,仿今日头条刷新vector动画相关推荐
- android 横向滚动 导航,仿今日头条横向滚动导航栏--原生js
咳咳!先打一波小广告,在上一篇里忘记了,那啥--我的那个个人博客做好了-->(我的博客) 好嘞,言归正传,说说我们的效果. 其实就是实现横向滑动,进行选择. 原理: 鼠标按下,获取当前鼠标坐标, ...
- vue仿今日头条_vue 仿今日头条
vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...
- vue仿今日头条_vue 仿今日头条 - osc_isfcy2fi的个人空间 - OSCHINA - 中文开源技术交流社区...
vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...
- vue仿今日头条_Vue仿今日头条实例详解
前言 vue也弄了一段时间了,前段时间一直想用vue写个移动端,加之年底也不是很忙,于是前几天便着手开始弄了,到今天为止也算是勉强能看了 因为也是纯粹的写写前端页面,所以数据方面用的是mock.js, ...
- android高仿今日头条,高仿今日头条App
采用了MVVM + RAC的方式,对微头条界面 使用YYCache 进行了本地缓存 效果跟目前最新的今日头条有些地方不一样,因为今日头条最近更新了新版本 下面对项目中的一些效果和实现思路做下介绍 如果 ...
- android开发:BottomNavigationView仿今日头条底部菜单栏
效果: 1.在xml中加入BottomNavigationView <com.google.android.material.bottomnavigation.BottomNavigationV ...
- vue 仿今日头条_Vue仿今日头条实例详解_莺语_前端开发者
前言 因为也是纯粹的写写前端页面,所以数据方面用的是mock. 账号: vue-toutiao 密码: 123456 如果你想修改接口,请copy一份在修改 如果你想后台接口也自己开发的话.可以阅读我 ...
- android 今日头条加载动画,Android 仿今日头条简单的刷新效果实例代码
点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感 ...
- html仿今日头条下拉刷新,小程序 仿今日头条 带滑动切换的文章列表
小程序 仿今日头条 带滑动切换的文章列表 发布时间:2018-07-19 09:41, 浏览次数:353 拿别人仿今日头条的代码做的改版, 首先感谢前辈.其次,这个代码虽然能用,但是js里还是存在一些 ...
最新文章
- arcgis合并tif影像_微图影像地图导出拼接大图的参数说明
- C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用...
- JNI编译时错误 编码GBK的不可映射字符 解决方法
- jquery 开发总结(不断更新)
- python socketserver实现服务器端执行命令 上传文件 断点续传
- VisualStudioCode下载安装与安装中文插件教程(图文教程)
- HISAT2+StringTie+Ballgown安装及使用流程
- /etc/resolv.conf服务器客户端DNS重要配置文件
- 代码同步工具_可以多重连接的数据库管理工具
- String中的compareTo()方法
- access vba 常量数组赋值_聊聊 VBA 数组的那些坑
- npkill(安全快速的清理电脑上的 node_modules)
- EF6 MVC5译文
- spring源码-第三个后置处理器
- Eclipse —— 官网下载地址
- mysql与java编写人事管理系统,java+mysql企业人事管理系统的设计
- 51单片机DHT11温湿度传感器
- 基于单片机的无线防盗报警系统设计(#0449)
- amr文件怎么转换成mp3
- 企业知识、经验如何传承?知识管理系统告诉你
热门文章
- 阿里云史上最大技术升级:面向万物智能的飞天2.0
- 相见恨晚!遗憾仅有不到1% 的人知道
- 直播连麦贾扬清,谈谈他所理解的四大 AI 落地问题 | 攻“疫”技术公开课
- 对于华为,英特尔与微软表示继续提供支持;亚马逊亲证云计算服务出现宕机;中国移动5G套餐曝光,每月都含200G流量……...
- 深入浅出Docker 镜像 | 技术头条
- sketch里的ios控件_使用Sketch建立Design System
- matlab from有什么用,Matlab函数使用'fromworkspace'将向量传递给simulink
- 珠海小学计算机比赛,欢聚一堂 共叙佳话 —— 参加珠海市中小学信息技术工作年会纪要...
- vue pdfjs 在线预览
- docker sonarqube 7.7 sonar-scanner-4.6.2 maven 安装、搭建+实战