This commit is contained in:
2026-09-24 16:25:22 +08:00
commit 7428184f01
1198 changed files with 314515 additions and 0 deletions
@@ -0,0 +1,59 @@
import { hexToRgb } from '../libs/color.uts'
import { xdAnimation } from './xdAnimation.uts';
export { XDANIMATION_FLIP3D_OPTIONS, XDANIMATION_TRANSLATE_OPTIONS, XDANIMATION_ROTATE_OPTIONS, XDANIMATION_SCALE_OPTIONS } from "../interface.uts"
export class xAnimationS {
public static translate(opts : XDANIMATION_TRANSLATE_OPTIONS) {
if (opts.ele == null) return
let view = opts.ele as HTMLElement
let duration_s = (opts?.duration ?? 1000)
let delay_s = (opts?.delay ?? 0)
let translation_s = (opts?.translation ?? 0)
let fromlen_s = (opts?.from ?? 360)
let len_s = (opts?.len ?? 360)
let loop_s = (opts?.loop ?? 0)
xdAnimation.translate(view, duration_s, delay_s, translation_s, fromlen_s, len_s, loop_s, opts?.start, opts?.end)
}
public static rotate(opts : XDANIMATION_ROTATE_OPTIONS) {
if (opts.ele == null) return
let view = opts.ele as HTMLElement
let duration_s = (opts?.duration ?? 1000)
let delay_s = (opts?.delay ?? 0)
let from_s = (opts?.from ?? 0)
let deg_s = (opts?.deg ?? 360)
let loop_s = (opts?.loop ?? 0)
xdAnimation.rotate(view, duration_s, delay_s, from_s, deg_s, loop_s, opts?.start, opts?.end)
}
public static scale(opts : XDANIMATION_SCALE_OPTIONS) {
if (opts.ele == null) return
let view = opts.ele as HTMLElement
let duration_s = (opts?.duration ?? 1000)
let delay_s = (opts?.delay ?? 0)
let direction_s = (opts?.direction ?? 2)
let scale_s = (opts?.scale ?? 1)
let from_s = (opts?.from ?? 0)
let loop_s = (opts?.loop ?? 0)
xdAnimation.scale(view, duration_s, delay_s, direction_s, from_s, scale_s, loop_s, opts?.start, opts?.end)
}
public static flip3D(opts : XDANIMATION_FLIP3D_OPTIONS) {
if (opts.ele == null) return
let view = opts.ele as HTMLElement
let duration_s = (opts?.duration ?? 1000)
let delay_s = (opts?.delay ?? 0)
let axis_s = (opts?.axis ?? 1)
let from_s = (opts?.from ?? 0)
let deg_s = (opts?.deg ?? 360)
let loop_s = (opts?.loop ?? 0)
let cameraDistance_s = (opts?.cameraDistance ?? 12)
let scaleZ_s = (opts?.scaleZ ?? 0.5)
xdAnimation.flip3D(view, duration_s, delay_s, axis_s, from_s, deg_s, loop_s, cameraDistance_s, scaleZ_s, opts?.start, opts?.end)
}
public static clearAnimations(ele : UniElement | null, reset : boolean = true) {
if (ele == null) return
let view = ele as HTMLElement
xdAnimation.clearAnimations(view,reset)
}
}
@@ -0,0 +1,251 @@
export class xdAnimation {
public static translate(
view : HTMLElement,
duration : number = 1000,
delay : number = 0,
translation : number = 0, //0平行移x,1平移y,2平移x,y
fromLen : number = 0, // 起始位置
len : number = 0, // 移动的距离
loop : number = 0,//-1永久播放动画,0循环1次,依次类推
start : (() => void) | null = null,
end : (() => void) | null = null
) {
view.style.transitionDuration = `${0}ms`;
view.style.transitionDelay = `${0}ms`;
view.style.transitionTimingFunction = 'linear'
// 设置初始位置
if (translation === 0) {
view.style.transform = `translateX(${fromLen}px)`;
} else if (translation === 1) {
view.style.transform = `translateY(${fromLen}px)`;
} else if (translation === 2) {
view.style.transform = `translate(${fromLen}px, ${fromLen}px)`;
}
function starttras() {
// 设置动画持续时间
view.style.transitionDuration = `${duration}ms`;
// 设置动画延迟
view.style.transitionDelay = `${delay}ms`;
if (translation === 0) {
console.log(fromLen, len)
view.style.transform = `translateX(${len}px)`;
} else if (translation === 1) {
view.style.transform = `translateY(${len}px)`;
} else if (translation === 2) {
view.style.transform = `translate(${len}px, ${len}px)`;
}
// 动画开始回调
if (start) start();
}
// 设置动画结束后的位置
if (delay == 0) {
setTimeout(() => {
starttras()
}, 50);
} else {
setTimeout(() => {
starttras()
}, delay);
}
let _this = this;
// 动画结束后的处理
view.addEventListener('transitionend', () => {
if (loop === -1) {
// 永久循环
_this.translate(view, duration, delay, translation, fromLen, len, loop, start, end);
} else if (loop > 0) {
// 有限循环
_this.translate(view, duration, delay, translation, fromLen, len, loop - 1, start, end);
} else {
// 动画结束回调
if (end) end();
}
}, { once: true });
}
public static scale(
view : HTMLElement,
duration : number = 1000,
delay : number = 0,
direction : number = 0, // 0: 水平缩放, 1: 竖直翻转,2:x,y缩放,
fromScale : number = 0, // 起始位置
scale : number = 0, // 移动的距离
loop : number = 0,//-1永久播放动画,0循环1次,依次类推
start : (() => void) | null = null,
end : (() => void) | null = null
) {
view.style.transitionDuration = `${0}ms`;
view.style.transitionDelay = `${0}ms`;
view.style.transitionTimingFunction = 'linear'
// 设置初始位置
function setValue(value : number) {
if (direction === 0) {
view.style.transform = `scaleX(${value})`;
} else if (direction === 1) {
view.style.transform = `scaleY(${value})`;
} else if (direction === 2) {
view.style.transform = `scale(${value}, ${value})`;
}
}
setValue(fromScale)
function starttras() {
// 设置动画持续时间
view.style.transitionDuration = `${duration}ms`;
// 设置动画延迟
view.style.transitionDelay = `${delay}ms`;
setValue(scale)
// 动画开始回调
if (start) start();
}
// 设置动画结束后的位置
if (delay == 0) {
setTimeout(() => {
starttras()
}, 50);
} else {
setTimeout(() => {
starttras()
}, delay);
}
let _this = this;
// 动画结束后的处理
view.addEventListener('transitionend', () => {
if (loop === -1) {
// 永久循环
_this.scale(view, duration, delay, direction, fromScale, scale, loop, start, end);
} else if (loop > 0) {
// 有限循环
_this.scale(view, duration, delay, direction, fromScale, scale, loop - 1, start, end);
} else {
// 动画结束回调
if (end) end();
}
}, { once: true });
}
public static rotate(
view : HTMLElement,
duration : number = 1000,
delay : number = 0,
fromDeg : number = 0, // 起始位置
deg : number = 0, // 移动的距离
loop : number = 0,//-1永久播放动画,0循环1次,依次类推
start : (() => void) | null = null,
end : (() => void) | null = null
) {
view.style.transitionDuration = `${0}ms`;
view.style.transitionDelay = `${0}ms`;
view.style.transitionTimingFunction = 'linear'
// 设置初始位置
function setValue(value : number) {
view.style.transform = `rotate(${value}deg)`;
}
setValue(fromDeg)
function starttras() {
// 设置动画持续时间
view.style.transitionDuration = `${duration}ms`;
view.style.transitionTimingFunction = 'linear'
// 设置动画延迟
view.style.transitionDelay = `${delay}ms`;
setValue(deg)
// 动画开始回调
if (start) start();
}
// 设置动画结束后的位置
if (delay == 0) {
setTimeout(() => {
starttras()
}, 50);
} else {
setTimeout(() => {
starttras()
}, delay);
}
let _this = this;
// 动画结束后的处理
view.addEventListener('transitionend', () => {
if (loop === -1) {
// 永久循环
_this.rotate(view, duration, delay, fromDeg, deg, loop, start, end);
} else if (loop > 0) {
// 有限循环
_this.rotate(view, duration, delay, fromDeg, deg, loop - 1, start, end);
} else {
// 动画结束回调
if (end) end();
}
}, { once: true });
}
public static flip3D(
view : HTMLElement,
duration : number = 1000,
delay : number = 0,
axis : number = 1, // 0: X轴, 1: Y轴
fromDeg : number = 0, // 起始位置
deg : number = 0, // 移动的距离
loop : number = 0,//-1永久播放动画,0循环1次,依次类推
cameraDistance : number = 8, // 控制视角距离,默认值更合理
scaleZ : number = 0.8, // 控制Z轴缩放,默认值更自然
start : (() => void) | null = null,
end : (() => void) | null = null
) {
view.style.transitionDuration = `${0}ms`;
view.style.transitionDelay = `${0}ms`;
view.style.transitionTimingFunction = 'linear'
// 设置透视视角
view.style.perspective = `${cameraDistance}px`;
view.style.transformStyle = "preserve-3d";
// 设置动画延迟
view.style.transitionDelay = `${0}ms`;
// 设置动画持续时间
view.style.transitionDuration = `${0}ms`;
// 设置初始角度
function setValue(value : number) {
if (axis === 0) {
view.style.transform = `rotateX(${value}deg) scaleZ(${scaleZ})`;
} else if (axis === 1) {
view.style.transform = `rotateY(${value}deg) scaleZ(${scaleZ})`;
}
}
setValue(fromDeg)
// 设置动画结束后的角度
setTimeout(() => {
// 设置动画延迟
view.style.transitionDelay = `${delay}ms`;
// 设置动画持续时间
view.style.transitionDuration = `${duration}ms`;
setValue(deg)
// 动画开始回调
if (start) start();
}, delay || 50);
let _this = this;
// 动画结束后的处理
view.addEventListener('transitionend', () => {
if (loop === -1) {
// 永久循环
_this.flip3D(view, duration, delay, axis, fromDeg, deg, loop, cameraDistance, scaleZ, start, end);
} else if (loop > 0) {
// 有限循环
_this.flip3D(view, duration, delay, axis, fromDeg, deg, loop - 1, cameraDistance, scaleZ, start, end);
} else {
// 动画结束回调
if (end) end();
}
}, { once: true });
}
public static clearAnimations(view : HTMLElement, _ : boolean = true) {
view.style.removeProperty('transform')
view.style.removeProperty('transition-delay')
view.style.removeProperty('transition-duration')
}
}