欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果

程序员文章站 2023-11-25 12:36:40
先看demo demo 说点湿的   iscroll其实代码量挺大的(近2100行, 还有另一个类似的库 betterscroll 他的代码量和i...

vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果

先看demo

demo

说点湿的

 vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果

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)的时候, 开启动画, 同时通过计算 目标位置 和 动画时间 来触发滑动动画.
代码

<div class="any-scroll-view">
  <div ref="body" :style="bodystyle" class="any-scroll-view__body"><slot></slot></div>
</div>
.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)
        );
    }
  }
};

总结

以上所述是小编给大家介绍的vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果,希望对大家有所帮助