属性动画（PropertyAnimation）

属性动画组件 PropertyAnimation 通过持续更改对象的属性值来变更目标的状态，实现动画效果。

应用举例

Object3D 的属性：position, scale, rotation
材质球 中的贴图：uv, offset, tiling
后处理效果 参数：color, strength

以上属性都可以提供为属性动画更改的内容。

基本使用

指定场景中的某个节点 Object3D，为其添加组件 PropertyAnimation；然后给组件追加影片剪辑后即能使用。

目前引擎只支持导入经过专业建模软件制作的 Clip 素材，暂不支持代码中自定义属性动画，后续版本会加入

// load test model
let node = new Object3D();
scene.addChild(node);
// 添加组件
let animation = node.addComponent(PropertyAnimation);

// 加载clip素材
let res = await fetch('path/to/clip.json')
let json = await res.json()
// 初始化clip
let animClip = new PropertyAnimClip();
// 解析clip
animClip.parse(json);
animClip.wrapMode = WrapMode.Once;
animation.defaultClip = animClip.name;
animation.autoPlay = false;
// 将clip追加至组件
animation.appendClip(animClip);

// load test model
let node = new Object3D();
scene.addChild(node);
// 添加组件
let animation = node.addComponent(PropertyAnimation);

// 加载clip素材
let res = await fetch('path/to/clip.json')
let json = await res.json()
// 初始化clip
let animClip = new PropertyAnimClip();
// 解析clip
animClip.parse(json);
animClip.wrapMode = WrapMode.Once;
animation.defaultClip = animClip.name;
animation.autoPlay = false;
// 将clip追加至组件
animation.appendClip(animClip);

播放动画

可以使用 play 方法来播放对应名称 (name) 的 PropertyAnimClip。

animation.play('anim_0', true); // 默认 true 从头播放

animation.play('anim_0', true); // 默认 true 从头播放

暂停动画

可以使用 stop 方法来播放指定的 PropertyAnimClip。

animation.stop();

animation.stop();

切换动画

可以使用 toggle 方法来播放已暂停的动画，或暂停正在播放的动画。

animation.toggle();

animation.toggle();

指定动画时间

可以使用 seek 方法来指定动画播放起始时间。

animation.seek(1.2);//指定到1.2s

animation.seek(1.2);//指定到1.2s

获取影片剪辑

使用 getClip 方法，获取组件已绑定过的影片剪辑 PropertyAnimClip，参数为 PropertyAnimClip 的 name。

let clip: PropertyAnimClip = animation.getClip('anim_0');

let clip: PropertyAnimClip = animation.getClip('anim_0');

获取当前剪辑

可以使用 currentClip 方法来获取当前正在播放的 PropertyAnimClip。

const currentClip = animation.currentClip;

const currentClip = animation.currentClip;

获取动画时间

可以使用 time 方法来获取当前时间。

const currentClip = animation.time;

const currentClip = animation.time;

示例

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

import { DirectLight, Engine3D, AtmosphericComponent, View3D, HoverCameraController, KelvinUtil, Object3D, Scene3D, CameraUtil, webGPUContext, PropertyAnimation, PropertyAnimClip, WrapMode } from '@orillusion/core'
import * as dat from 'dat.gui'

export class Sample_PropertyAnim {
    lightObj: Object3D
    scene: Scene3D
    private animation: PropertyAnimation

    constructor() {}

    async run() {
        await Engine3D.init()

        this.scene = new Scene3D()
        let camera = CameraUtil.createCamera3DObject(this.scene, 'camera')
        camera.perspective(60, webGPUContext.aspect, 1, 2000.0)
        let ctrl = camera.object3D.addComponent(HoverCameraController)
        ctrl.setCamera(180, -20, 15)

        await this.initScene(this.scene)

        this.scene.addComponent(AtmosphericComponent).sunY = 0.6

        // create a view with target scene and camera
        let view = new View3D()
        view.scene = this.scene
        view.camera = camera
        // start render
        Engine3D.startRenderView(view)

        let guiData = {
            click: () => this.animation.play('anim_0', true),
            Seek: 0,
            Speed: 1
        }
        const GUIHelp = new dat.GUI()
        GUIHelp.add(guiData, 'click').name('Restart')
        GUIHelp.add(guiData, 'Seek', 0, 1, 0.01).onChange((v) => {
            this.animation.stop()
            this.animation.seek(v)
        })
        GUIHelp.add(guiData, 'Speed', 0, 1, 0.01).onChange((v) => {
            this.animation.speed = v
        })
        this.animation.onLateUpdate = () => {
            guiData.Seek = this.animation.time
            GUIHelp.updateDisplay()
        }
    }

    private async makePropertyAnim(node: Object3D) {
        // add PropertyAnimation
        let animation = node.addComponent(PropertyAnimation)
        // load clip source
        let res = await fetch('https://cdn.orillusion.com/json/anim_0.json')
        let json = await res.json()
        // init clip
        let animClip = new PropertyAnimClip()
        // parse clip
        animClip.parse(json)
        animClip.wrapMode = WrapMode.Loop
        animation.defaultClip = animClip.name
        animation.autoPlay = true
        // add clip to animation
        animation.appendClip(animClip)
        return animation
    }

    async initScene(scene: Scene3D) {
        /******** light *******/
        {
            this.lightObj = new Object3D()
            this.lightObj.x = 0
            this.lightObj.y = 30
            this.lightObj.z = -40
            this.lightObj.rotationX = 45
            this.lightObj.rotationY = 0
            this.lightObj.rotationZ = 45
            let lc = this.lightObj.addComponent(DirectLight)
            lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355)
            lc.intensity = 20
            scene.addChild(this.lightObj)
        }

        let duck = await Engine3D.res.loadGltf('https://cdn.orillusion.com/PBR/Duck/Duck.gltf')
        this.scene.addChild(duck)
        duck.scaleX = duck.scaleY = duck.scaleZ = 0.02

        this.animation = await this.makePropertyAnim(duck)
        this.animation.play(this.animation.defaultClip)

        return true
    }
}

new Sample_PropertyAnim().run()

import { DirectLight, Engine3D, AtmosphericComponent, View3D, HoverCameraController, KelvinUtil, Object3D, Scene3D, CameraUtil, webGPUContext, PropertyAnimation, PropertyAnimClip, WrapMode } from '@orillusion/core'
import * as dat from 'dat.gui'

export class Sample_PropertyAnim {
    lightObj: Object3D
    scene: Scene3D
    private animation: PropertyAnimation

    constructor() {}

    async run() {
        await Engine3D.init()

        this.scene = new Scene3D()
        let camera = CameraUtil.createCamera3DObject(this.scene, 'camera')
        camera.perspective(60, webGPUContext.aspect, 1, 2000.0)
        let ctrl = camera.object3D.addComponent(HoverCameraController)
        ctrl.setCamera(180, -20, 15)

        await this.initScene(this.scene)

        this.scene.addComponent(AtmosphericComponent).sunY = 0.6

        // create a view with target scene and camera
        let view = new View3D()
        view.scene = this.scene
        view.camera = camera
        // start render
        Engine3D.startRenderView(view)

        let guiData = {
            click: () => this.animation.play('anim_0', true),
            Seek: 0,
            Speed: 1
        }
        const GUIHelp = new dat.GUI()
        GUIHelp.add(guiData, 'click').name('Restart')
        GUIHelp.add(guiData, 'Seek', 0, 1, 0.01).onChange((v) => {
            this.animation.stop()
            this.animation.seek(v)
        })
        GUIHelp.add(guiData, 'Speed', 0, 1, 0.01).onChange((v) => {
            this.animation.speed = v
        })
        this.animation.onLateUpdate = () => {
            guiData.Seek = this.animation.time
            GUIHelp.updateDisplay()
        }
    }

    private async makePropertyAnim(node: Object3D) {
        // add PropertyAnimation
        let animation = node.addComponent(PropertyAnimation)
        // load clip source
        let res = await fetch('https://cdn.orillusion.com/json/anim_0.json')
        let json = await res.json()
        // init clip
        let animClip = new PropertyAnimClip()
        // parse clip
        animClip.parse(json)
        animClip.wrapMode = WrapMode.Loop
        animation.defaultClip = animClip.name
        animation.autoPlay = true
        // add clip to animation
        animation.appendClip(animClip)
        return animation
    }

    async initScene(scene: Scene3D) {
        /******** light *******/
        {
            this.lightObj = new Object3D()
            this.lightObj.x = 0
            this.lightObj.y = 30
            this.lightObj.z = -40
            this.lightObj.rotationX = 45
            this.lightObj.rotationY = 0
            this.lightObj.rotationZ = 45
            let lc = this.lightObj.addComponent(DirectLight)
            lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355)
            lc.intensity = 20
            scene.addChild(this.lightObj)
        }

        let duck = await Engine3D.res.loadGltf('https://cdn.orillusion.com/PBR/Duck/Duck.gltf')
        this.scene.addChild(duck)
        duck.scaleX = duck.scaleY = duck.scaleZ = 0.02

        this.animation = await this.makePropertyAnim(duck)
        this.animation.play(this.animation.defaultClip)

        return true
    }
}

new Sample_PropertyAnim().run()

WebGPU Shader

后处理特效

属性动画（PropertyAnimation）

应用举例

基本使用

播放动画

暂停动画

切换动画

指定动画时间

获取影片剪辑

获取当前剪辑

获取动画时间

示例

属性动画（PropertyAnimation） ​

应用举例 ​

基本使用 ​

播放动画 ​

暂停动画 ​

切换动画 ​

指定动画时间 ​

获取影片剪辑 ​

获取当前剪辑 ​

获取动画时间 ​

示例 ​

属性动画（PropertyAnimation）

应用举例

基本使用

播放动画

暂停动画

切换动画

指定动画时间

获取影片剪辑

获取当前剪辑

获取动画时间

示例