vue中的methods和computed数据处理机制探索——多行文字的随机飘动效果

   

   在用vue实现文字随机飘动效果的时候,引出了一些在vue中处理随机函数的一些小技巧。

   如果你是为了文字随机飘动效果而来,也请了解一下我探索的历程。

   如何实现一个随机飘动的多行字呢?

   第一步:有多行字,暂时称他为子标签,相对于父容器绝对定位。

   第二步:动态修改子标签的style,如left,top值,当然你也可以用transform中的tranlate()。别忘了给子标签加上transiton动画过渡样式。

   第三步:用随机函数Math.random(),给每一个子标签绑定一个随机出现的位置。

   第四步:用定时器setInterval(),不断触发绑定在子标签上的随机样式。

  如果用computed计算属性,你可能会这样写,给style绑上一个计算属性,然后在计算属性里丢一个任意的“触发器”,他可能不参与计算,但vue监听到了他的变化后会触发计算属性的更新,带动了style的更新,perfect~(代码如下)

<template>
  <div class="home">
    <div class="ul">
      <div class="li" :style="random">老年人的赡养纠纷</div>
      <div class="li" :style="random">房子漏水纠纷怎么处理</div>
      <div class="li" :style="random">房产如何继承</div>
      <div class="li" :style="random">交通事故保险赔偿纠纷</div>
      <div class="li" :style="random">被宠物狗咬伤</div>
      <div class="li" :style="random">偷税漏税</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      num:Math.random(),
      state: true,
      timer: ''
    }
  },
  computed: {
    //生成随机样式
    random () {
      console.log(this.num) // 这里我输出一下随机数字,用于触发computed计算属性
      let x = 50 + parseInt(Math.random() * 850) + 'px'
      let y = 50 + parseInt(Math.random() * 300) + 'px'
      let z = parseInt(Math.random() * 200) + 'px'
      let opacity = parseInt(z) / 200 > 0.2 ? parseInt(z) / 200 : 0.2
      let scale = parseInt(z) / 200 > 0.6 ? parseInt(z) / 200 : 0.6
      let r = parseInt(Math.random() * 250)
      let g = parseInt(Math.random() * 250)
      let b = parseInt(Math.random() * 250)
      return {
        'color': 'rgb(' + r + ',' + g + ',' + b + ')',
        'opacity': opacity,
        'transform': 'translate3d(' + x + ',' + y + ',' + z + ') scale(' + scale + ')'
      }
    }
  },
  mounted () {
     setInterval(() => {
       this.num = Math.random()
     }, 6000)
  }
}
</script>
<style lang="less" scoped>
  @import '~@/assets/css/home.less';
</style>

  如果用computed会出现,所有的文字都重叠在一起的效果,因为计算属性相当于一个赋值操作,他只会计算一次,这也是为什么计算属性的性能优于methods的原因,methods是函数,你每次使用他,都会存在调用,相当于重新计算(如果你拿函数来计算的话),而在这个场景中,这个消耗性能的特性反而变成了优点,因为我就是要每次都用随机数重新计算style,给每个子标签一个随即位置,而不是只用一个随机数算一次。

  ok,我们用函数return计算的值,得到了想要的结果。

  问题又来了,怎么重新调用函数?重新计算style?

  我们可以利用computed监听data里面的值去触发computed更新,那么函数怎么更新呢?

  函数是更新不了的,但其他属性可以,比如data,当然computed也可以。那么我们就可以把函数和表达式写在一起,这个表达式可能没什么意义,但他绑定了data的值,这样你可以通过操作data的值来触发更新。代码如下。

<template>
  <div class="home">
    <div class="ul">
    <-- 这里state只是用于触发更新,不管他是true还是false,都是重新调用random函数 -->
      <div class="li" :style="state?random():random()">老年人的赡养纠纷</div>
      <div class="li" :style="state?random():random()">房子漏水纠纷怎么处理</div>
      <div class="li" :style="state?random():random()">房产如何继承</div>
      <div class="li" :style="state?random():random()">交通事故保险赔偿纠纷</div>
      <div class="li" :style="state?random():random()">被宠物狗咬伤</div>
      <div class="li" :style="state?random():random()">偷税漏税</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      state: true,
      timer: ''
    }
  },
  methods: {
    random () {
      let x = 50 + parseInt(Math.random() * 850) + 'px'
      let y = 50 + parseInt(Math.random() * 300) + 'px'
      let z = parseInt(Math.random() * 200) + 'px'
      let opacity = parseInt(z) / 200 > 0.2 ? parseInt(z) / 200 : 0.2
      let scale = parseInt(z) / 200 > 0.6 ? parseInt(z) / 200 : 0.6
      let r = parseInt(Math.random() * 250)
      let g = parseInt(Math.random() * 250)
      let b = parseInt(Math.random() * 250)
      return {
        'color': 'rgb(' + r + ',' + g + ',' + b + ')',
        'opacity': opacity,
        'transform': 'translate3d(' + x + ',' + y + ',' + z + ') scale(' + scale + ')'
      }
    }
  },
  mounted () {
    this.timer = setTimeout(() => {
      this.state = !this.state
      clearTimeout(this.timer)
    }, 0)
    setInterval(() => {
      this.state = !this.state
    }, 6000)
  }
}
</script>
<style lang="less" scoped>
  @import '~@/assets/css/home.less';
</style>

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:C马雯娟 返回首页