vueuse笔记-Animation

useAnimate

响应式Web动画API
用法示例:
实现一个文字变大的动画

<template>
<div ref="el" style="font-size:30px;"> VueUse useAnimate</div>
  <a-button type="primary" @click="play()">播放</a-button>
  <a-button @click="pause()">暂停</a-button>
  <a-button type="primary" @click="reverse()">反转</a-button>
  <a-button @click="cancel()">取消</a-button> 
</template>
<script>
import {useAnimate} from '@vueuse/core'
const el = ref();
const {
  isSupported,
  animate,
  play,
  pause,
  reverse,
  finish,
  cancel,
  pending,
  playState,
  replaceState,
  startTime,
  currentTime,
  timeline,
  playbackRate
  } = useAnimate(el,{fontSize:'50px'},1000)
</script>

useInterval

反应计数器每隔一段时间增加一次
用法示例:

<template> 
 <div>
    {{counter}}
    <a-button @click="resume()">开启Interval</a-button>
    <a-button @click="pause1()">暂停Interval</a-button>
    <a-button @click="reset()">重置Interval</a-button>
  </div> 
</template>
<script>
 import {useInterval} from '@vueuse/core'
 const {counter,reset,pause:pause1,resume} = useInterval(1000,{controls:true});
 //counter从0开始
</script>

useIntervalFn

带有控件的setInterval的包装
用法示例:
如下会每隔1s在控制台打印123,当暂停时,isActive的值为false

<template>
<div>
    <a-button @click="resume()">开启IntervalFn</a-button>
    <a-button @click="pause()">暂停IntervalFn</a-button>
    isActive:{{isActive}}
  </div>
/template>
<script>
 import {useIntervalFn} from '@vueuse/core'
const {pause,resume,isActive} = useIntervalFn(()=>{
    console.log("123")
  },1000)
</script>

useNow

反应当前的日期实例
用法如下:

<template>
<div>
    <a-button @click="resume()">开启now</a-button>
    <a-button @click="pause()">暂停now</a-button>
    isActive:{{isActive}}
  </div>
/template>
<script>
 import {useNow} from '@vueuse/core'
const {pause,resume,now} = useNow({controls:true})
</script>

useRafFn

调用每个requestAnimationFrame的函数。有暂停和恢复的控制
示例如下:

<template>
<div>
    count:{{count}}
    <a-button @click="resume()">开启requestAnimationFrame</a-button>
    <a-button @click="pause()">暂停requestAnimationFrame</a-button>
  </div> 
</template>
<script>
import {useRafFn} from '@vueuse/core'
const count = ref(0);
const {pause,resume} = useRafFn(()=>{
    count.value++
    console.log(count.value)
  })
</script>

useTimeoutFn

带有控件的setTimeout的包装
用法示例:
3s后文字变为'Hello world',isPending的值变成了false

import {useTimeoutFn} from '@vueuse/core'
const msg = ref("3s后改变")
const {isPending,start,stop} = useTimeoutFn(()=>{
    msg.value = 'Hello world'
})

useTimestamp

反应当前的时间戳

<template>
<div>
    <a-button @click="resume()">开启 timestamp</a-button>
    <a-button @click="pause()">暂停 timestamp</a-button>
    timestamp:{{timestamp}}
  </div>
/template>
<script>
 import {useTimestamp} from '@vueuse/core'
const {pause,resume,timestamp} = useTimestamp({controls:true})
</script>