wx-mini-weview/components/mask/mask.js

weixin UI

Component({
  options: {
    styleIsolation: 'apply-shared'
  },
  properties: {
    // 动画类型，支持 'fade'、'slide-top'、'slide-bottom'、'slide-left'、'slide-right'、'scale'、'rotate' 等
    showAnimationType: {
      type: String,
      value: 'fade'
    },

    hideAnimationType: {
      type: String,
      value: 'fade'
    },

    showDuration: {
      type: Number,
      value: 100
    },

    hideDuration: {
      type: Number,
      value: 100
    },

    maskBgColor: {
      type: String,
      value: '0, 5, 8'
    },

    maskBgAlpha: {
      type: Number,
      value: 0.7
    },

    zIndex: {
      type: Number,
      value: 8000
    },

    colorfulMode: {
      type: Boolean,
      value: true
    },
    
    blurAmount: {
      type: Number,
      value: 2 
    }
  },

  data: {
    visible: false,
    currentDuration: '300ms',
    currentAnimationType: '', // 当前动画类型
    gradientColors: [] // Will store random colors for gradient
  },

  methods: {
    catchTouchMove(e) {
      return false
    },
    show() {
      // Generate random gradient colors if in colorful mode
      if (this.data.colorfulMode) {
        this.generateRandomColors();
      }
      
      this.setData({
        visible: true,
        currentDuration: this.data.showDuration + 'ms',
        currentAnimationType: `wv-mask-${this.data.showAnimationType}-in`
      });
    },

    hide() {
      this.setData({
        currentDuration: this.data.hideDuration + 'ms',
        currentAnimationType: `wv-mask-${this.data.hideAnimationType}-out`
      });

      setTimeout(() => {
        this.setData({
          visible: false,
          currentAnimationType: ''
        });
      }, this.data.hideDuration);
    },
    
    // Generate random colors for the gradient
    generateRandomColors() {
      const colors = [];
      // Generate 4 random vibrant colors
      for (let i = 0; i < 4; i++) {
        // Generate vibrant HSL colors (high saturation, moderate lightness)
        const h = Math.floor(Math.random() * 360); // Hue: 0-360
        const s = 70 + Math.floor(Math.random() * 30); // Saturation: 70-100%
        const l = 50 + Math.floor(Math.random() * 20); // Lightness: 50-70%
        colors.push(`hsl(${h}, ${s}%, ${l}%)`);
      }
      
      this.setData({ gradientColors: colors });
    }
  }
});

// Usage example in comments
// that.mask.setData({
//   showAnimationType: 'fade',  // 如 'fade'、'slide-bottom'、'scale'、'rotate' 等
//   hideAnimationType: 'slide-top',
//   showDuration: 500,
//   hideDuration: 500,
//   maskBgColor: '0, 0, 0',   // RGB 部分
//   maskBgAlpha: 0.7,          // 透明度
//   colorfulMode: true, // Enable colorful gradient mode
//   blurAmount: 15 // Customize blur amount
// });