转载

开源移动端元素拖拽惯性弹动以及下拉加载两个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属性控制。

关于原理实现

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

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

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

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

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

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

或者手机扫码访问:

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

项目地址: 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 () {}
}

补充tips

  • 本方法依赖jQuery.js或者Zepto.js。
  • 仅支持窗体滚动,普通元素下拉加载可以自行微调支持,很简单,把 trigger 和滚动窗体都改成这个可以滚动的普通元素即可。
  • loading元素默认高度 0 隐藏,然后本方法会对底边框进行设置,因此,不要使用 border-bottom 相关样式。

四、2017年春节前的最后一个结语

这下可以正式拜年了。

HTML、CSS以及JS……给你拜年了!

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

祝大家新的一年,升职加薪,心想事成!

来,high起来!

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

本文为原创文章,包含脚本行为,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

本文地址: http://www.zhangxinxu.com/wordpress/?p=5920

(本篇完)

原文  http://www.zhangxinxu.com/wordpress/2017/01/mobile-phone-drag-drop-inertia-loading/
正文到此结束
Loading...