首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

「实战」如何用H5实现原生体验的图片预览组件

二、实现基础 图片预览组件目前是基于alloyFinger.js来做手势支持,transform.js来做CSS3的变换,to.js来做动画的过渡函数。...手势细节-惯性 单指拖动图片然后松开手指时,手Q原生的图片预览器有继续滑动一段距离的惯性效果。 滑动到终点之后,图片真正停在的点是在延长点上。...否则就导致轻轻拖动一下,惯性却非常大。因此滑动距离是拖动距离的一个小比例值。 上述的实现惯性的方法其实只能算近似模拟,不符合现实生活中曲线运动的问题的惯性运动轨迹。...手势细节-回弹 交互上,图片放大和缩小是有倍数限制的,超过最大/最小倍数值的时候,会让用户继续放大一部分,但再超过一定的阈值之后会停止放大,并在手指松开之后回弹到最大/最小倍数。...在touchend的回调中,设置缩小值回弹到max。 四、总结 感谢@dntzhang 提供alloyFinger的支持,感谢@javinzhong 提供的先行实验版。

3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    从0开始打造UI框架:动态化框架Scrollview物理学算法解析

    质量分为惯性质量和引力质量。这里主要谈的是惯性质量。惯性质量是物体惯性的量度:对于m越大的物体,就越难改变其运动状态(速度)。 Velocity: 速度。...A:滚动,但是没有滚动到底部,速度逐步减小最终停止 B:滚动,最终会超过底部,回弹并最终停止 C:已经超过底部,直接回弹,但并不会反复弹,不像普通弹簧 1.  ...但是值得注意的是,如果滑动超过了边界,导致了回弹,这就不再是这种场景了。...场景B&场景C 场景B核心点是如果滚动很快并超过底部边界,最符合用户预期的应该是回弹停止到最底部,而不是像弹簧一样弹回来甚至反复弹。 场景C也一样,希望最终能回到边界,而不是弹力过强直接大幅度回弹。...使得超过边界的情况下,能回弹,但又不会反复回弹,最终回到边界区域。 ? 四、物理学模块的设计和实现 ? ?

    1K10

    原生 JS 实现惯性滚动,给鼠标滚轮增加阻尼感,纵享丝滑

    前言当我们在移动终端上滑动页面,手指离开屏幕后,页面的滚动并不会马上停止,而是在一段时间内继续保持惯性滚动,并且滑动阻尼感和持续时间与滑动手势的幅度成正比。...,同时讲解其中技术原理与细节,用最少量的代码实现 JS 鼠标惯性滚动。...实现原理首先需要利用 DOM 事件禁止鼠标滚动,转为 JS 控制。...通过 JS 模拟页面滚动实际可以看做是在执行一个连续的动画,这时候肯定就离不开与浏览器动画息息相关的 requestAnimationFrame 函数了,我们需要知道它的回调函数会传入一个 DOMHighResTimeStamp...(value);}此时页面就可以像往常一样滚动了,并且是不依赖系统默认事件的,由 JS 代理滚动效果,接下来我们继续往方法里处理如何平滑过渡。

    1.4K41

    微信小程序官方组件展示之视图容器movable-view源码

    directionstringnone否movable-view的移动方向,属性值有all、vertical、horizontal、none1.2.0inertiabooleanFALSE否movable-view是否带有惯性...如果 y 的值不在可移动范围内,会自动移动到可移动范围;改变 y 的值会触发动画;单位支持px(默认)、rpx;1.2.0dampingnumber20否阻尼系数,用于控制 x 或y改变时的动画和过界回弹的动画...,值越大移动越快1.2.0frictionnumber2否摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值1.2.0disabledbooleanFALSE...事件也被catch1.9.90bindchange 返回的 source 表示产生移动的原因值说明touch拖动touch-out-of-bounds超出移动范围out-of-bounds超出移动范围后的回弹...friction惯性空字符串setDataBug & Tip1.tip: movable-view 必须设置 width 和height属性,不设置默认为10px2.tip: movable-view

    43940

    一文学会用 react-spring 做弹簧动画

    回过头来看下这三个参数: mass: 质量(也就是重量),质量越大,回弹惯性越大,回弹的距离和次数越多 tension: 张力,弹簧松紧程度,弹簧越紧,回弹速度越快 friction:摩擦力,增加点阻力可以抵消质量和张力的效果...这些参数设置不同的值,弹簧动画的效果就不一样: tension: 400 tension: 100 可以看到,确实 tension(弹簧张力)越大,弹簧越紧,回弹速度越快。...mass: 2 mass: 20 可以看到,mass(质量越大),惯性越大,回弹距离和次数越大。...react-spring 主打的是弹簧动画,就是类似弹簧那种回弹效果。 只要指定 mass(质量)、tension(张力)、friction(摩擦力)就可以了。...mass 质量:决定回弹惯性,mass 越大,回弹的距离和次数越多。 tension 张力:弹簧松紧程度,弹簧越紧,回弹速度越快。

    21310
    领券