转载

开源移动端元素拖拽惯性弹动以及下拉加载两个JS

这篇文章发布于 2017年01月25日，星期三，12:18，归类于js实例。阅读 177 次, 今日 177 次

byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5920

本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

一、前言

开源两个起点中文网M站两个动效交互JS，MIT协议，保留版权注释信息，即使压缩后。

二、任意元素屏幕拖移外带惯性边缘弹动效果

此效果可以在起点中文网M站首页看到，gif录屏效果如下：

开源移动端元素拖拽惯性弹动以及下拉加载两个JS

项目地址： https://github.com/yued-fe/inertia

https://github.com/yued-fe 是阅文集团用户体验设计中心前端组的团队github账号，虽然现在还是一片荒芜，但以后会有多多小而美或者大而全的项目开源出来，大家可以多多关注。

此动效使用原生JavaScript编写，适用于触屏设备。

使用也很简单：

使用示意

①. 引入JS文件，例如

<script src="Inertia.js"></script>

②. 绑定

new Inertia(ele);

然后恭喜你，效果就有了！

语法

new Inertia(ele, option);

其中：

ele 表示拖移弹动的元素；
option 为可选参数，包括：
- edge ，布尔值，表示是否吸附边缘，默认为 true ，也就是吸附。

补充说明

有时候希望元素不是紧靠边缘而是留有间隙，可以使用透明边框，或者标签嵌套使用padding等CSS属性控制。

关于原理实现

惯性减速使用的是自己私藏的私动画JS小算法，可参见此文：“ 分享一个即插即用的私藏缓动动画JS小算法 ”。
贴边弹动使用的是Tween.js中的一个Bounce算法，详见此文：“ 如何使用Tween.js各类原生动画运动缓动算法 ”。

三、基于窗体的下拉释放加载刷新效果

此效果在APP中很常见，在移动web端也是可以实现的。

阅读任意一本书籍，然后下拉释放，就可以看到交互效果。

开源移动端元素拖拽惯性弹动以及下拉加载两个JS

或者你也可以狠狠地点击这里：下拉释放加载刷新简易demo

或者手机扫码访问：

项目地址： https://github.com/yued-fe/drag-loading

使用也很简单：

如何使用

①. 引入JS文件，例如

<script src="drag-loading.js"></script>

②. 绑定

new DragLoading(el, {
    onReload: function() {
        /** 执行刷新操作
         * ... 
        */

        // loading下拉还原
        this.origin();
    }
});

其中：

el 表示隐藏（ height:0 隐藏）在滚动窗体顶部的下拉元素；
option 为可选参数，包括：
- trigger ，包装器对象，感受下拉操作的容器，默认为 $('body') 。
- maxY ，数值，表示loading元素全部展开时候的高度值，也是触发 onReload 回调的边界高度，默认为 40 。
- onReload ，函数，当下拉足够高时候触发的刷新回调方法，默认是空函数。

暴露属性和方法

{
    // el就是loading元素
    el: el,
    // reload回调方法
    callback: {
        reload: function() {}
    },
    // loading元素高度等UI还原
    origin: function() {},
    // 下拉阻尼处理，这个一般用不到
    damping: function () {}
}