Alloytouch 实现润滑动作

从目前我知道一些框架(如MUI)带有"下拉滑动刷新"的方案,实际上在引用"下拉刷新"这一功能不可能将整一个框架进行引用,因此从腾讯开源中的Alloytouch看到这样润滑动作开源项目,来帮助你实现类似于"下拉刷新".


访问 (github)


DEMO

现在Alloytouch提供了几个DEMO,这可以让你深刻理解它能实现什么,通过下面的地址跳转查看:

Pull To Refresh: http://alloyteam.github.io/AlloyTouch/refresh/pull_refresh/
QQ KanDian: http://alloyteam.github.io/AlloyTouch//refresh/infinite/kandian.html
Full Page Scroll : http://alloyteam.github.io/AlloyTouch/full_page/
Simple : http://alloyteam.github.io/AlloyTouch/example/simple.html
3D : http://alloyteam.github.io/AlloyTouch/example/3d.html
Rotate : http://alloyteam.github.io/AlloyTouch/example/rotate.html
Carousel : http://alloyteam.github.io/AlloyTouch/example/carousel.html
Carousel2 : http://alloyteam.github.io/AlloyTouch/example/carousel2.html
Three.js : http://alloyteam.github.io/AlloyTouch/example/threejs/

 

导入Alloytouch

我为你们准备了一个github版本地址,以方便测试Alloytouch,你仅仅引用到页面上即可开始。

<script src="https://alloyteam.github.io/AlloyTouch/transformjs/transform.js"></script>
<script src="https://alloyteam.github.io/AlloyTouch/alloy_touch.js"></script>

当然官方也提供CDN:

 

核心的API (官方的描述)

var alloyTouch = new AlloyTouch({
            touch:"#wrapper",//反馈触摸的dom
            vertical: true,//不必需,默认是true代表监听竖直方向touch
            target: target, //运动的对象
            property: "translateY",  //被运动的属性
            min: 100, //不必需,运动属性的最小值
            max: 2000, //不必需,滚动属性的最大值
            sensitivity: 1,//不必需,触摸区域的灵敏度,默认值为1,可以为负数
            factor: 1,//不必需,表示触摸位移与被运动属性映射关系,默认值是1
            step: 45,//用于校正到step的整数倍
            bindSelf: false,
           maxSpeed: 2, //不必需,触摸反馈的最大速度限制
            initialValue: 0,
            change:function(value){  },
            touchStart:function(evt, value){  },
            touchMove:function(evt, value){  },
            touchEnd:function(evt,value){  },
            tap:function(evt, value){  },
            pressMove:function(evt, value){  },
            animationEnd:function(value){  } //运动结束
})

通过对象的实例可以自行运动DOM:

alloyTouch.to(value, time, ease)
  • value是必填项
  • time是非必填项,默认值是600
  • ease是非必填项,默认值是先加速后减速的运动函数,CSS版本默认值是cubic-bezier(0.1, 0.57, 0.1, 1)

通过对象的实例可以自行停止DOM运动:

alloyTouch.stop()

 

 

完整下拉

在这里有一个被单独分离的演示页面,你可以直接参考它,因为它能进行使用

请在真机或模拟环境下进行测试

 

参考:

https://github.com/AlloyTeam/AlloyTouch

 

——感谢你的阅读,若有错误请评论中指出



Cabbagelol将做些什么
负责记录Cabbagelol的总结,或者共享有趣的内容,这就是后院的最重要做的事情⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄。
备案:粤ICP备15107172号-1
邮箱:nickmiku@foxmail.com

Copyright © 2015 - 2017 Cabbagelol. All Rights Reserved. Powered By Wordpress(EverBox).