美文网首页UI效果仿写android开发工作随笔
仿今日头条刷新vector动画

仿今日头条刷新vector动画

作者: 言吾許 | 来源:发表于2018-03-28 17:25 被阅读195次

一般的刷新动画是一个圈圈在转，而头条的比较特殊，直接上写好的效果图(一直不知道怎么把图片尺寸调小o(╯□╰)o)吧~


刷新动画_.gif

首先整个效果是通过SVG和vector来实现的，如果不是很了解，请看大佬的文章：
SVG学习--AnimatedVectorDrawable的使用
动画思路：
整个view可以分为五个部分：
1、最外面的壳（不需要动画）
2、中间矩形框
3、矩形框中的灰色矩形块
4、三根短线
5、三根长线

第一步：在drawable文件夹下新建名为refresh的vector文件：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="200"
    android:viewportWidth="200">
    <!--外面大框-->
    <path
        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" />
    <!--小长方形框-->
    <path
        android:name="middle_rect"
        android:pathData="M71,75
                          L100,75
                          L100,95
                          L72,95
                          L72,75"
        android:strokeColor="@color/colorCustomHeaderLine"
        android:strokeWidth="2" />
    <!--里面的正方形-->
    <path
        android:name="inner_rect"
        android:fillColor="@color/colorCustomHeaderInner"
        android:pathData="M73,76
                          L99,76
                          L99,94
                          L73,94" />
    <!--短线条-->
    <path
        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" />
    <!--长线条-->
    <path
        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" />
</vector>

打开xml右边的预览，我们可以看到效果


效果图.png

第二步：在drawable文件夹下新建名为refresh_vector的animated-vector

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/refresh">
    <target
        android:name="middle_rect"
        android:animation="@animator/anim_middle_rect" />

    <target
        android:name="short_lines"
        android:animation="@animator/anim_short_lines" />

    <target
        android:name="long_lines"
        android:animation="@animator/anim_long_lines" />

    <target
        android:name="inner_rect"
        android:animation="@animator/anim_inner_rect" />

</animated-vector>

这里需要注意几点：
1、android:drawable="@drawable/refresh"这里一定要引用上面的refresh文件
2、target标签下的name一定要和refresh中的path标签下的名字一致

第三步：新建animator文件夹（不是anim），并在下面新建短线、长线、中间矩形框和里面矩形对应的objectAnimator集合：

anim_middle_rect.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <!--中间长方形-->
    <objectAnimator
        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" />
    <objectAnimator
        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" />
    <objectAnimator
        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" />
    <objectAnimator
        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" />

</set>

anim_short_lines.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <!--起点为短线-->
    <objectAnimator
        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" />
    <objectAnimator
        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" />
    <objectAnimator
        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" />
    <objectAnimator
        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" />
</set>

anim_long_lines.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <!--开始为长线-->
    <objectAnimator
        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" />
    <objectAnimator
        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" />
    <objectAnimator
        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" />
    <objectAnimator
        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" />
</set>

anim_inner_rect.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <!--里面的长方形-->
    <objectAnimator
        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" />
    <objectAnimator
        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" />
    <objectAnimator
        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" />
    <objectAnimator
        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" />

</set>

最后一步，在activity中：

<ImageView
        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();
                            }
                        });
                    }
                });

相关文章

  • 仿今日头条刷新vector动画

    一般的刷新动画是一个圈圈在转，而头条的比较特殊，直接上写好的效果图(一直不知道怎么把图片尺寸调小o(╯□╰)o)吧...

  • android自定义View索引

    一：加载动画 1：android仿qq下拉刷新旋转白条加载动画 2：android常用旋转线条加载动画 ...

  • 高仿今日头条加载动画

    01 每每浏览手机app时，发现有的效果体验不错，作为一位程序员，总想要是自己来做，怎么实现。 今天我们来模仿今日...

  • 用Path动态绘制Drawable

    今日头条的下拉刷新动画在下拉过程中有一个动态绘制刷新图的效果： 基本思路 按照最终呈现的图构造出完整的Path路径...

  • iOS源码博文集锦6

    iOS精选源码 一个多环条形联动的动画 仿今日头条的菜单栏，可编辑菜单栏条目 一款优秀的 聆听夜空FM 源码 仿汽...

  • android仿今日头条点赞动画

    以下是我的胡编乱造 github地址：https://github.com/workertao/acode_emo...

  • 仿今日头条项目架构

    仿今日头条项目架构 （一）—— ios11导航栏和tabBar层级仿今日头条项目架构 （二）—— 项目主架构的搭建...

  • 仿今日头条新闻上下拉刷新

    一.实现业务处理层 // 创建单利方法 + (instancetype)shareLoadData; // 创建解...

  • 动画示例

    动画示例（一） —— 一种外扩的简单动画动画示例（二） —— 一种抖动的简单动画动画示例（三） —— 仿头条一种L...

  • 精仿今日头条

    精仿今日头条，数据是抓取今日头条App的数据。使用RxJava + Retrofit + MVP开发的开源项目，仅...

网友评论

    本文标题：仿今日头条刷新vector动画

    本文链接：https://www.haomeiwen.com/subject/kpaycftx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    UI效果仿写

    android开发工作随笔

    关于我们|服务条款|联系我们|仿今日头条刷新vector动画|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！