案例展示

补间平移动画

移动轴：

起始位置：

-100

结束位置：

100

时间：

模式：

<template>
    <div style="position: relative">
        <div id="TO"></div>
        <el-form id="formMove" label-width="80px">
            <el-form-item label="移动轴：">
                <el-select v-model="axis" size="small">
                    <el-option label="x" value="x"></el-option>
                    <el-option label="y" value="y"></el-option>
                    <el-option label="z" value="z"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="起始位置：">
                <div style="display: flex; align-items: center; width: 100%">
                    <el-slider
                        v-model="fromPos"
                        :min="-200"
                        :max="200"
                        :step="1"
                        style="flex: 1; margin-right: 5px" />
                    <span class="pos-value">{{ fromPos }}</span>
                </div>
            </el-form-item>
            <el-form-item label="结束位置：">
                <div style="display: flex; align-items: center; width: 100%">
                    <el-slider
                        v-model="toPos"
                        :min="-200"
                        :max="200"
                        :step="1"
                        style="flex: 1; margin-right: 5px" />
                    <span class="pos-value">{{ toPos }}</span>
                </div>
            </el-form-item>
            <el-form-item label="时间：">
                <el-select v-model="duration" size="small">
                    <el-option label="500ms" :value="500"></el-option>
                    <el-option label="1000ms" :value="1000"></el-option>
                    <el-option label="1500ms" :value="1500"></el-option>
                    <el-option label="2000ms" :value="2000"></el-option>
                    <el-option label="3000ms" :value="3000"></el-option>
                    <el-option label="5000ms" :value="5000"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模式：">
                <el-select v-model="easing" size="small">
                    <el-option label="linear" value="linear"></el-option>
                    <el-option label="Quadratic.InOut" value="Quadratic.InOut"></el-option>
                    <el-option label="Quadratic.In" value="Quadratic.In"></el-option>
                    <el-option label="Quadratic.Out" value="Quadratic.Out"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="startTween()" size="small">执行</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { getResourceBase, resUrl } from '../../utils/resourceUrl'
import { ref, onMounted } from 'vue'
import { ElForm, ElFormItem, ElSelect, ElOption, ElSlider, ElButton } from 'element-plus'

let TO = null,
    originModel = null

const axis = ref('z')
const fromPos = ref(-100)
const toPos = ref(100)
const duration = ref(2000)
const easing = ref('linear')

onMounted(() => {
    // 初始化场景
    TO = new ThingOrigin('fileModel', document.getElementById('TO'), {
        params: {
            resource: {
                serverAddress: getResourceBase()
            }
        },
        scene: {
            background: {
                type: 'sky', //天空盒
                color: {
                    alpha: 1,
                    color: '#000000'
                }
            },
            ground: {
                active: false
            }
        },
        camera: {
            //相机参数
            position: {
                x: -20,
                y: 100,
                z: 200
            }
        },
        helper: {
            //辅助工具
            axes: {
                active: false
            },
            grid: {
                active: false
            }
        }
    })

    //导入模型
    TO.model
        .loadModel({
            modelName: 'fileModel-' + new Date().getTime(), //模型名称
            base: {
                modelUrl: resUrl('/editor/model2/loadFileAsId/613112990') //模型地址
            },
            modelType: 'gltf', //模型类型
            scale: {
                //缩放大小
                x: 4,
                y: 4,
                z: 4
            }
        })
        .then((model) => {
            originModel = model
            //添加模型到场景中
            TO.scene.add(originModel)
        })
})

//开始动画
function startTween() {
    if (!originModel) return

    //移动
    TO.animate.move(originModel, axis.value, fromPos.value, toPos.value, duration.value, easing.value)
}
</script>

<style scoped>
#TO {
    width: 100%;
    height: 400px;
    position: relative;
}

#formMove {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 260px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 12px;
}

.pos-value {
    min-width: 50px;
    text-align: right;
    font-size: 12px;
    color: #fff;
}

#formMove :deep(.el-form-item__label) {
    color: #fff;
    font-size: 12px;
}
</style>

API 介绍

animate.move

方法签名	返回值	描述
move(model: Object3D, axis: string, from: number, to: number, time: number, mode: string = 'linear', onComplete?: () => void)	Tween<any>	补间平移动画

参数说明：

参数名	说明	类型	必填	默认值
model	模型	Object3D	是	-
axis	方向，可传入字符串 'x' | 'y' | 'z'	string	是	-
from	起始位置	number	是	-
to	终止位置	number	是	-
time	完成时间（单位：毫秒）	number	是	-
mode	运动模式（缓动函数）	string	否	linear
onComplete	动画完成回调	() => void	否	-