css3烟花效果-炫丽的列表下拉刷新效果

下拉刷新是一个很常用的功能。 现在很多app都提供了同样的下拉刷新的效果,就像Google提供的SwipeRefreshlayout一样。 看完多了是不是觉得有点无聊呢? 如果在用户等待下拉的时候提供一些有创意的疗效,一定会给用户带来不一样的体验。 明天给大家介绍一个烟花下拉刷新效果——FireworkyPullToRefresh。

Talkischeapcss3烟花效果,showmethegif:

css3烟花效果_烟花效果图_烟花效果视频

疗效很爆炸吗? 看看如何在我们的应用程序中使用这种令人眼花缭乱的下拉刷新效果:

在build.gradle中添加依赖:

 compile 'com.cleveroad:fireworkypulltorefresh:1.0.3'

在xml文件中,RecyclerView的父容器使用FireworkyPullToRefresh:


        

FireworkyPullToRefresh 提供以下可配置属性:

以上四种配置可以直接在xml中使用:

<com.cleveroad.pulltorefresh.firework.FireworkyPullToRefreshLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        ...
        app:ptr_fireworkColors="@array/fireworkColors"
        app:ptr_background="@drawable/background"
        app:ptr_rocketAnimDuration="1000">

也可以通过代码来设置:

//use .config() methods:
mPullToRefresh.getConfig().setBackground(backgroundDrawable);
mPullToRefresh.getConfig().setBackground(backgroundBitmap);
mPullToRefresh.getConfig().setBackground(R.drawable.background);
mPullToRefresh.getConfig().setBackgroundColor(Color.BLACK);
mPullToRefresh.getConfig().setBackgroundColorFromResources(R.color.background);
mPullToRefresh.getConfig().setFireworkColors(colorsIntArray);
mPullToRefresh.getConfig().setFireworkColors(R.array.fireworkColors);
mPullRefreshView.getConfig().setFireworkStyle(Configuration.FireworkStyle.MODERN);
mPullToRefresh.getConfig().setRocketAnimDuration(1000L);

刷新弹跳

用法和SwipeRefreshlayout很相似,通过实现socket PullToRefreshView.OnRefreshListener来添加刷新逻辑:

烟花效果图_css3烟花效果_烟花效果视频

mPullToRefresh.setOnRefreshListener(new PullToRefreshView.OnRefreshListener() {
    @Override
    public void onRefresh() {
        //refresh your data here        
    }
});

开始或取消动画

mPullRefreshView.setRefreshing(isRefreshing);

定制动漫

如果你想自己实现动画css3烟花效果,也可以重绘FireworkyPullToRefreshLayout.OnChildScrollUpCallback来实现自己的动画逻辑

mPullToRefresh.setOnChildScrollUpCallback(new FireworkyPullToRefreshLayout.OnChildScrollUpCallback() {
    @Override
    public boolean canChildScrollUp(@NonNull FireworkyPullToRefreshLayout parent, @Nullable View child) {
        //put your implementation here
    }
});

具体实现细节可以查看源码,github:github.com/Clveroad/F...