AlloyTeam
source link: https://github.com/AlloyTeam/PhyTouch
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
PhyTouch
丝般顺滑的触摸运动方案
Smooth scrolling, rotation, pull to refresh and any motion for the web.
Install
npm install phy-touch
Usage
var phyTouch = new PhyTouch({
touch:"#wrapper",//反馈触摸的dom
vertical: true,//不必需，默认是true代表监听竖直方向touch
target: { y: 0 }, //运动的对象
property: "y", //被运动的属性
min: 100, //不必需,运动属性的最小值
max: 2000, //不必需,滚动属性的最大值
sensitivity: 1,//不必需,触摸区域的灵敏度，默认值为1，可以为负数
factor: 1,//不必需,表示触摸位移运动位移与被运动属性映射关系，默认值是1
moveFactor: 1,//不必需,表示touchmove位移与被运动属性映射关系，默认值是1
step: 45,//用于校正到step的整数倍
bindSelf: false,
maxSpeed: 2, //不必需，触摸反馈的最大速度限制
value: 0,
change:function(value){
target.style.transform = "translate(0," + value + "px)"
target.style.webkitTransform = "translate(0," + value + "px)"
},
touchStart:function(evt, value){ },
touchMove:function(evt, value){ },
touchEnd:function(evt,value){ },
tap:function(evt, value){ },
pressMove:function(evt, value){ },
animationEnd:function(value){ } //运动结束
})通过对象的实例可以自行运动DOM:
phyTouch.to(value, time, ease)
value是必填项time是非必填项，默认值是600ease是非必填项，默认值是先加速后减速的运动函数，CSS版本默认值是cubic-bezier(0.1, 0.57, 0.1, 1)
通过对象的实例可以自行停止DOM运动:
phyTouch.stop()
Demo(Mobile)
Related links
License
This content is released under the MIT License.
Recommend
-
97
首先是大佬登场介绍 AC 是每年一度的 Alloy Team 团队技术分享会，而前段时间 TFC 主要是邀请业界大牛的技术分享。AC 希望给开发者提供最好的参会体验，也希望现场的各位分享自己的故事。插个开场舞图： 第一场：面向亿万级用户的 Web 同构直出
-
43
飞机上的梗 某天，小明同学突然反馈 ：“昨晚发现根本无法使用你们的应用... .... 怎么回事呢”。我和我的小伙伴们立马惊呆了，心想：“老司机多年的经验有一种预感，那就是同学你使用姿势不正确...（此处省略 300 字）”。...
-
17
也许你有听过一个问题，你这款 web 应用性能怎么样呀？你会回答什么呢？是否会优于海量 web 应用市场呢？本文就来整理下如何进行 web 性能监控？包括我们需要监控的指标、监控的分类、performance 分析以及如何监控。但是，如何...
-
16
AlloyTeam AlloyTeam Copyright © 2020 Tencent AlloyTeam. All Rights Reserved. ...
-
7
腾讯AlloyTeam团队给 VSCode 贡献400+行核心代码增强其插件化能力已认证的官方帐号在前几天腾讯文档 AlloyTeam 给 VSCode 合入了大概 400 行核心代码，主要涉及到 VSCode 配置化的...
-
6
AlloyPhoto 简约版--Tencent AlloyTeamAlloyPhoto 简约版 1.0 原图
-
7
AlloyTeam AlloyTeam Copyright © 2021 Tencent AlloyTeam. All Rights Reserved.
-
7
This site can’t be reached The connection was reset.
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK