JS动画

您可以使用Quasar通过Javascript(使用RAF - requestAnimationFrame())创建动画。

import { animate } from 'quasar'

let id = animate.start({
name: 'unique-animation-name', // 可选,如果没有提供,则创建并返回唯一的一个
from: '0', // 当前位置
to: '100', // 最后位置
duration: 300, //动画的持续时间
done (finalPosition) {...}, //在动画完成时调用的函数
cancel (currentPosition) {...}, // 在动画中止时调用的函数
apply (currentPosition) {...}, // 每个步骤调用的函数,以便您可以应用更改
easing (currentPosition) { // 自定义缓动函数,请参见下文
// ...返回当前位置的变换...
}
})
//开始一个相同名称的动画将中止前一个动画

//使用动画名称停止动画
animate.stop('unique-animation-name')
// 或者
animate.stop(id) // 从上面返回的ID

例子:

import { animate } from 'quasar'

animate.start({
from: 6,
to: 158,
apply (pos) {
el.style.maxHeight = `${pos}px`
},
done () {
console.log(`we're done!`)
}
})

缓动(Easing)函数

缓动函数取当前动画百分比进度(0和1之间的浮点数)并返回位置乘数(0表示初始位置,1表示最终位置)。

包括以下缓动函数:

Material Design Curves

例如:

import { animate, easing } from 'quasar'

animate.start({
from: 0,
to: 100,
easing: easing.standard
...
})

或者用转盘:

<template>
<q-carousel :swipe-easing="overshoot">
Slides...
</q-carousel>
</template>
<script>
import { easing, QCarousel } from 'quasar'
export default {
components: {
QCarousel
},
data: () => ({
overshoot: easing.overshoot
})
}
</script>