You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
2.4 KiB
103 lines
2.4 KiB
// @ts-nocheck
|
|
import type { ComponentPublicInstance } from 'vue'
|
|
import { ease, linear } from './ease';
|
|
import { Timeline, Animation } from './';
|
|
export type UseTransitionOptions = {
|
|
duration ?: number
|
|
immediate ?: boolean
|
|
context ?: ComponentPublicInstance
|
|
}
|
|
// #ifndef UNI-APP-X && APP
|
|
import { ref, watch, type Ref } from '@/uni_modules/lime-shared/vue'
|
|
|
|
export function useTransition(percent : Ref<number>|(() => number), options : UseTransitionOptions) : Ref<number> {
|
|
const current = ref(0)
|
|
const { immediate, duration = 300 } = options
|
|
let tl:Timeline|null = null;
|
|
let timer = -1
|
|
const isFunction = typeof percent === 'function'
|
|
watch(isFunction ? percent : () => percent.value, (v) => {
|
|
if(tl == null){
|
|
tl = new Timeline()
|
|
}
|
|
tl.start();
|
|
tl.add(
|
|
new Animation(
|
|
current.value,
|
|
v,
|
|
duration,
|
|
0,
|
|
ease,
|
|
nowValue => {
|
|
current.value = nowValue
|
|
clearTimeout(timer)
|
|
if(current.value == v){
|
|
timer = setTimeout(()=>{
|
|
tl?.pause();
|
|
tl = null
|
|
}, duration)
|
|
}
|
|
}
|
|
)
|
|
);
|
|
}, { immediate })
|
|
|
|
return current
|
|
}
|
|
|
|
// #endif
|
|
|
|
// #ifdef UNI-APP-X && APP
|
|
type UseTransitionReturnType = Ref<number>
|
|
export function useTransition(source : any, options : UseTransitionOptions) : UseTransitionReturnType {
|
|
const outputRef : Ref<number> = ref(0)
|
|
const immediate = options.immediate ?? false
|
|
const duration = options.duration ?? 300
|
|
const context = options.context //as ComponentPublicInstance | null
|
|
let tl:Timeline|null = null;
|
|
let timer = -1
|
|
const watchFunc = (v : number) => {
|
|
if(tl == null){
|
|
tl = new Timeline()
|
|
}
|
|
tl!.start();
|
|
tl!.add(
|
|
new Animation(
|
|
outputRef.value,
|
|
v,
|
|
duration,
|
|
0,
|
|
ease,
|
|
nowValue => {
|
|
outputRef.value = nowValue
|
|
clearTimeout(timer)
|
|
if(outputRef.value == v){
|
|
timer = setTimeout(()=>{
|
|
tl?.pause();
|
|
tl = null
|
|
}, duration)
|
|
}
|
|
}
|
|
),
|
|
null
|
|
);
|
|
}
|
|
|
|
if (context != null && typeof source == 'string') {
|
|
context.$watch(source, watchFunc, { immediate } as WatchOptions)
|
|
} else if(typeof source == 'function'){
|
|
watch(source, watchFunc, { immediate })
|
|
} else if(isRef(source) && typeof source.value == 'number') {
|
|
watch(source as Ref<number>, watchFunc, { immediate })
|
|
}
|
|
// else if(source instanceof Ref<number>){
|
|
// watch(source as Ref<number>, watchFunc, { immediate })
|
|
// }
|
|
|
|
const stop = ()=>{
|
|
|
|
}
|
|
return outputRef //as UseTransitionReturnType
|
|
}
|
|
|
|
// #endif
|