登录

unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/createAnimation.js

@@ -0,0 +1,115 @@
+"use strict";
+const common_vendor = require("../../../../common/vendor.js");
+class MPAnimation {
+  constructor(options, _this) {
+    this.options = options;
+    this.animation = common_vendor.index.createAnimation({
+      ...options
+    });
+    this.currentStepAnimates = {};
+    this.next = 0;
+    this.$ = _this;
+  }
+  _nvuePushAnimates(type, args) {
+    let aniObj = this.currentStepAnimates[this.next];
+    let styles = {};
+    if (!aniObj) {
+      styles = {
+        styles: {},
+        config: {}
+      };
+    } else {
+      styles = aniObj;
+    }
+    if (animateTypes1.includes(type)) {
+      if (!styles.styles.transform) {
+        styles.styles.transform = "";
+      }
+      let unit = "";
+      if (type === "rotate") {
+        unit = "deg";
+      }
+      styles.styles.transform += `${type}(${args + unit}) `;
+    } else {
+      styles.styles[type] = `${args}`;
+    }
+    this.currentStepAnimates[this.next] = styles;
+  }
+  _animateRun(styles = {}, config = {}) {
+    let ref = this.$.$refs["ani"].ref;
+    if (!ref)
+      return;
+    return new Promise((resolve, reject) => {
+      nvueAnimation.transition(ref, {
+        styles,
+        ...config
+      }, (res) => {
+        resolve();
+      });
+    });
+  }
+  _nvueNextAnimate(animates, step = 0, fn) {
+    let obj = animates[step];
+    if (obj) {
+      let {
+        styles,
+        config
+      } = obj;
+      this._animateRun(styles, config).then(() => {
+        step += 1;
+        this._nvueNextAnimate(animates, step, fn);
+      });
+    } else {
+      this.currentStepAnimates = {};
+      typeof fn === "function" && fn();
+      this.isEnd = true;
+    }
+  }
+  step(config = {}) {
+    this.animation.step(config);
+    return this;
+  }
+  run(fn) {
+    this.$.animationData = this.animation.export();
+    this.$.timer = setTimeout(() => {
+      typeof fn === "function" && fn();
+    }, this.$.durationTime);
+  }
+}
+const animateTypes1 = [
+  "matrix",
+  "matrix3d",
+  "rotate",
+  "rotate3d",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "scale",
+  "scale3d",
+  "scaleX",
+  "scaleY",
+  "scaleZ",
+  "skew",
+  "skewX",
+  "skewY",
+  "translate",
+  "translate3d",
+  "translateX",
+  "translateY",
+  "translateZ"
+];
+const animateTypes2 = ["opacity", "backgroundColor"];
+const animateTypes3 = ["width", "height", "left", "right", "top", "bottom"];
+animateTypes1.concat(animateTypes2, animateTypes3).forEach((type) => {
+  MPAnimation.prototype[type] = function(...args) {
+    this.animation[type](...args);
+    return this;
+  };
+});
+function createAnimation(option, _this) {
+  if (!_this)
+    return;
+  clearTimeout(_this.timer);
+  return new MPAnimation(option, _this);
+}
+exports.createAnimation = createAnimation;

unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/uni-transition.js

@@ -0,0 +1,265 @@
+"use strict";
+const uni_modules_uniTransition_components_uniTransition_createAnimation = require("./createAnimation.js");
+const common_vendor = require("../../../../common/vendor.js");
+const _sfc_main = {
+  name: "uniTransition",
+  emits: ["click", "change"],
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    modeClass: {
+      type: [Array, String],
+      default() {
+        return "fade";
+      }
+    },
+    duration: {
+      type: Number,
+      default: 300
+    },
+    styles: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    customClass: {
+      type: String,
+      default: ""
+    },
+    onceRender: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isShow: false,
+      transform: "",
+      opacity: 1,
+      animationData: {},
+      durationTime: 300,
+      config: {}
+    };
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.open();
+        } else {
+          if (this.isShow) {
+            this.close();
+          }
+        }
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    // 生成样式数据
+    stylesObject() {
+      let styles = {
+        ...this.styles,
+        "transition-duration": this.duration / 1e3 + "s"
+      };
+      let transform = "";
+      for (let i in styles) {
+        let line = this.toLine(i);
+        transform += line + ":" + styles[i] + ";";
+      }
+      return transform;
+    },
+    // 初始化动画条件
+    transformStyles() {
+      return "transform:" + this.transform + ";opacity:" + this.opacity + ";" + this.stylesObject;
+    }
+  },
+  created() {
+    this.config = {
+      duration: this.duration,
+      timingFunction: "ease",
+      transformOrigin: "50% 50%",
+      delay: 0
+    };
+    this.durationTime = this.duration;
+  },
+  methods: {
+    /**
+     *  ref 触发 初始化动画
+     */
+    init(obj = {}) {
+      if (obj.duration) {
+        this.durationTime = obj.duration;
+      }
+      this.animation = uni_modules_uniTransition_components_uniTransition_createAnimation.createAnimation(Object.assign(this.config, obj), this);
+    },
+    /**
+     * 点击组件触发回调
+     */
+    onClick() {
+      this.$emit("click", {
+        detail: this.isShow
+      });
+    },
+    /**
+     * ref 触发 动画分组
+     * @param {Object} obj
+     */
+    step(obj, config = {}) {
+      if (!this.animation)
+        return;
+      for (let i in obj) {
+        try {
+          if (typeof obj[i] === "object") {
+            this.animation[i](...obj[i]);
+          } else {
+            this.animation[i](obj[i]);
+          }
+        } catch (e) {
+          console.error(`方法 ${i} 不存在`);
+        }
+      }
+      this.animation.step(config);
+      return this;
+    },
+    /**
+     *  ref 触发 执行动画
+     */
+    run(fn) {
+      if (!this.animation)
+        return;
+      this.animation.run(fn);
+    },
+    // 开始过度动画
+    open() {
+      clearTimeout(this.timer);
+      this.transform = "";
+      this.isShow = true;
+      let { opacity, transform } = this.styleInit(false);
+      if (typeof opacity !== "undefined") {
+        this.opacity = opacity;
+      }
+      this.transform = transform;
+      this.$nextTick(() => {
+        this.timer = setTimeout(() => {
+          this.animation = uni_modules_uniTransition_components_uniTransition_createAnimation.createAnimation(this.config, this);
+          this.tranfromInit(false).step();
+          this.animation.run();
+          this.$emit("change", {
+            detail: this.isShow
+          });
+        }, 20);
+      });
+    },
+    // 关闭过度动画
+    close(type) {
+      if (!this.animation)
+        return;
+      this.tranfromInit(true).step().run(() => {
+        this.isShow = false;
+        this.animationData = null;
+        this.animation = null;
+        let { opacity, transform } = this.styleInit(false);
+        this.opacity = opacity || 1;
+        this.transform = transform;
+        this.$emit("change", {
+          detail: this.isShow
+        });
+      });
+    },
+    // 处理动画开始前的默认样式
+    styleInit(type) {
+      let styles = {
+        transform: ""
+      };
+      let buildStyle = (type2, mode) => {
+        if (mode === "fade") {
+          styles.opacity = this.animationType(type2)[mode];
+        } else {
+          styles.transform += this.animationType(type2)[mode] + " ";
+        }
+      };
+      if (typeof this.modeClass === "string") {
+        buildStyle(type, this.modeClass);
+      } else {
+        this.modeClass.forEach((mode) => {
+          buildStyle(type, mode);
+        });
+      }
+      return styles;
+    },
+    // 处理内置组合动画
+    tranfromInit(type) {
+      let buildTranfrom = (type2, mode) => {
+        let aniNum = null;
+        if (mode === "fade") {
+          aniNum = type2 ? 0 : 1;
+        } else {
+          aniNum = type2 ? "-100%" : "0";
+          if (mode === "zoom-in") {
+            aniNum = type2 ? 0.8 : 1;
+          }
+          if (mode === "zoom-out") {
+            aniNum = type2 ? 1.2 : 1;
+          }
+          if (mode === "slide-right") {
+            aniNum = type2 ? "100%" : "0";
+          }
+          if (mode === "slide-bottom") {
+            aniNum = type2 ? "100%" : "0";
+          }
+        }
+        this.animation[this.animationMode()[mode]](aniNum);
+      };
+      if (typeof this.modeClass === "string") {
+        buildTranfrom(type, this.modeClass);
+      } else {
+        this.modeClass.forEach((mode) => {
+          buildTranfrom(type, mode);
+        });
+      }
+      return this.animation;
+    },
+    animationType(type) {
+      return {
+        fade: type ? 1 : 0,
+        "slide-top": `translateY(${type ? "0" : "-100%"})`,
+        "slide-right": `translateX(${type ? "0" : "100%"})`,
+        "slide-bottom": `translateY(${type ? "0" : "100%"})`,
+        "slide-left": `translateX(${type ? "0" : "-100%"})`,
+        "zoom-in": `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
+        "zoom-out": `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
+      };
+    },
+    // 内置动画类型与实际动画对应字典
+    animationMode() {
+      return {
+        fade: "opacity",
+        "slide-top": "translateY",
+        "slide-right": "translateX",
+        "slide-bottom": "translateY",
+        "slide-left": "translateX",
+        "zoom-in": "scale",
+        "zoom-out": "scale"
+      };
+    },
+    // 驼峰转中横线
+    toLine(name) {
+      return name.replace(/([A-Z])/g, "-$1").toLowerCase();
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return {
+    a: $data.isShow,
+    b: $data.animationData,
+    c: common_vendor.n($props.customClass),
+    d: common_vendor.s($options.transformStyles),
+    e: common_vendor.o((...args) => $options.onClick && $options.onClick(...args))
+  };
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:/项目2023/视力表/vision-record/uni_modules/uni-transition/components/uni-transition/uni-transition.vue"]]);
+wx.createComponent(Component);

unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/uni-transition.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

unpackage/dist/dev/mp-weixin/uni_modules/uni-transition/components/uni-transition/uni-transition.wxml

@@ -0,0 +1 @@
+<view hidden="{{!a}}" ref="ani" animation="{{b}}" class="{{c}}" style="{{d}}" bindtap="{{e}}"><slot></slot></view>