资讯专栏INFORMATION COLUMN

vue + any-touch实现一个iscroll ? - (1) 实现拖拽和滑动动画

张红新 / 1196人阅读

摘要:先看本次文章先实现内容拖拽和滑动动画后续文章一步一步增加功能比如滚动条下拉加载等功能说点湿的其实代码量挺大的近行还有另一个类似的库他的代码量和差不多因为原理都是一样的阅读他们的代码发现里面很多逻辑其实都是在做手势判断比如拖拽和划还有部分元

any-touch

先看demo

demo

本次文章先实现内容拖拽和滑动动画, 后续文章一步一步增加功能, 比如滚动条/ 下拉加载等功能.

说点湿的

iscroll其实代码量挺大的(近2100行, 还有另一个类似的库betterScroll他的代码量和iscroll差不多, 因为原理都是一样的), 阅读他们的代码
发现里面很多逻辑其实都是在做手势判断, 比如拖拽(pan), 和划(swipe), 还有部分元素(表单元素等)需要多带带判断点击(tap), 这部分代码接近1/3, 所以我决定用自己开发的手势库(any-touch)实现一个iscroll, 同时配合文字让大家最终都可以以最少的代码实现一个iscroll.

vue

观察了一段时间推荐排行, 发现大家都对vue感兴趣, 所以本次的"iscroll"将以vue组件的形式实现, 同时我也希望借助vue强大的抽象能力, 让最终代码控制在500行以内, 希望大家喜欢.

本文是个系列文章

本文先实现拖拽和滑动动画, 因为这2部分都依赖手势, 借此用最少的代码先实现最核心的功能, 也让大家对后续的内容有信心.

简单说下iscroll原理

添加2个div, 最内的div(子div)通过设置css的transform的translate的值来模拟系统滚动效果.

说完逻辑再说代码

拖拽的时候通过panstart/panmove手势返回的位移增量(deltaX/Y)进行位置变化, 同时关闭动画效果.

发生快速划(swipe)的时候, 开启动画, 同时通过计算目标位置动画时间来触发滑动动画.

代码
.any-scroll-view {
    position: relative;
    width: 100%;
    height: 90vh; 
    overflow: hidden;

    &__body {
        transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);
        background: #eee;
        position: absolute;
        width: 100%;
        height: 100%;
    }
}
import AnyTouch from "any-touch";
export default {
    name: "any-scroll-view",

    props: {
        // 减速度, 单位px/s²
        acceleration: {
            type: Number,
            default: 3600
        }
    },

    data() {
        return {
            scrollTop: 0,
            scrollLeft: 0,
            transitionDuration: 300
        };
    },

    computed: {
        bodyStyle() {
            return {
                transitionDuration: `${this.transitionDuration}ms`,
                transform: `translate(${this.scrollLeft}px, ${
                    this.scrollTop
                }px)`
            };
        }
    },

    mounted() {
        const at = new AnyTouch(this.$el);

        // 第一次触碰
        at.on("inputstart", (ev) => {
            this.stopRoll();
        });

        // 拖拽开始
        at.on("panstart", (ev) => {
            this.move(ev);
        });

        // 拖拽中
        at.on("panmove", (ev) => {
            this.move(ev);
        });

        // 快速滑动
        at.on("swipe", (ev) => {
            this.decelerate(ev);
        });

        this.$on("hook:destroy", () => {
            at.destroy();
        });
    },

    methods: {
        // https://github.com/nolimits4web/swiper/blob/master/dist/js/swiper.esm.js#L87
        // https://github.com/nolimits4web/Swiper/blob/master/src/utils/utils.js#L25
        getCurrentTranslate() {
            const style = getComputedStyle(this.$refs.body, null);
            const { transform } = style;
            const array = transform.match(/(-?)(d)+(.d{0,})?/g);
            return { x: Math.round(array[4]), y: Math.round(array[5]) };
        },

        stopRoll() {
            const { x, y } = this.getCurrentTranslate();
            this.moveTo({ scrollTop: y, scrollLeft: x });
        },

        /**
         * 移动body
         * @param {Object} 拖拽产生的数据
         *  @param {Number} deltaX: x轴位移变化
         *  @param {Number} deltaY: y轴位移变化
         */
        move({ deltaX, deltaY }, transitionDuration = 0) {
            this.transitionDuration = transitionDuration;
            this.scrollLeft += deltaX;
            this.scrollTop += deltaY;
        },

        /**
         * 移动到
         */
        moveTo({ scrollTop, scrollLeft }, transitionDuration = 0) {
            this.transitionDuration = transitionDuration;
            this.scrollLeft = scrollLeft;
            this.scrollTop = scrollTop;
        },

        /**
         * 拖拽松手后减速移动至停止
         * velocityX/Y的单位是px/ms
         */
        decelerate(ev) {
            const directionSign = { up: -1, right: 1, down: 1, left: -1 }[
                ev.direction
            ];

            // Top? | Left?
            let SCROLL_SUFFIX = "Top";
            // x ? | y?
            let AXIS_SUFFIX = "Y";
            if (ev.velocityX > ev.velocityY) {
                SCROLL_SUFFIX = "Left";
                AXIS_SUFFIX = "X";
            }

            // 减速时间, 单位ms
            // t = (v₂ - v₁) / a
            const velocity = ev[`velocity${AXIS_SUFFIX}`];
            this.transitionDuration = Math.round(
                ((velocity * 1000) / this.acceleration) * 1000
            );

            // 滑动距离
            // s = (v₂² - v₁²) / (2 * a)
            const scrollAxis = `scroll${SCROLL_SUFFIX}`;
            this[scrollAxis] +=
                directionSign *
                Math.round(
                    Math.pow(velocity * 1000, 2) / (2 * this.acceleration)
                );
        }
    }
};
下一期

大家也发现了, 只有页面在滚动, 没有滚动条, 所以下期我们讲如何给scroll-view加上滚动条.

有不明白的地方

请留言, 知无不言, 言无不尽. 如觉得本文对您有帮助, 就请给any-touch一个star吧, 谢谢.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103276.html

相关文章

  • 移动端点击事件全攻略,这里的坑你知多少?

    摘要:所以这种情况下是不符合点击事件的定义的。,关于移动端的点击事件总结完了,可能你都没想到一个简单的点击事件会有那么多坑,如果你在工作中可能会涉及到移动端开发的话,相信这篇文章还是值得你点赞和收藏的,毕竟是踩了那么多坑的经验总结。 看标题的时候你可能会想,点击事件有什么好说的,还写一篇攻略?哈哈,如果你这么想,只能说明你too young to simple. 接触过移动端开发的同学可能都...

    Nosee 评论0 收藏0
  • 移动端点击事件全攻略,这里的坑你知多少?

    摘要:所以这种情况下是不符合点击事件的定义的。,关于移动端的点击事件总结完了,可能你都没想到一个简单的点击事件会有那么多坑,如果你在工作中可能会涉及到移动端开发的话,相信这篇文章还是值得你点赞和收藏的,毕竟是踩了那么多坑的经验总结。 看标题的时候你可能会想,点击事件有什么好说的,还写一篇攻略?哈哈,如果你这么想,只能说明你too young to simple. 接触过移动端开发的同学可能都...

    microelec 评论0 收藏0
  • 移动端点击事件全攻略,这里的坑你知多少?

    摘要:所以这种情况下是不符合点击事件的定义的。,关于移动端的点击事件总结完了,可能你都没想到一个简单的点击事件会有那么多坑,如果你在工作中可能会涉及到移动端开发的话,相信这篇文章还是值得你点赞和收藏的,毕竟是踩了那么多坑的经验总结。 看标题的时候你可能会想,点击事件有什么好说的,还写一篇攻略?哈哈,如果你这么想,只能说明你too young to simple. 接触过移动端开发的同学可能都...

    Achilles 评论0 收藏0
  • 不到30行, 用any-touch实现一个drawer

    摘要:一个手势库预览的基本逻辑添加个一个是当隐藏的时候打开隐藏的触发开关一个是本身对把手和进行进行定位到界面的右侧边缘调整和把手的样式这里把手主要是要设置背景色为透明具体样式看下面代码用分别给把手和添加拖拽手势当隐藏时拖拽把手向右通过返回的每 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); ...

    source 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<