Keyframe animation

Hello,
I would like to deepen keyframe animation.
I made this piece of code.

 //Create mesh and material
    var mesh = pc.createBox(this.app.graphicsDevice);
    var material = new pc.StandardMaterial();
    material.diffuse = new pc.Color(1,0,0);
    
    // Create Node
    var graphNodeCube = new pc.GraphNode();
    graphNodeCube.name = 'Box';
    var meshInstance = new pc.MeshInstance(graphNodeCube, mesh, material);
    graphNodeCube.setLocalPosition(0,0,0);
    
    var graphNodeCube1 = new pc.GraphNode();
    graphNodeCube.addChild(graphNodeCube1);
    graphNodeCube1.name = 'Box1';
    var meshInstance1 = new pc.MeshInstance(graphNodeCube1, mesh, material);
    graphNodeCube1.setLocalPosition(0,1,0);
    
    //Create model
    var model = new pc.Model();
    model.graph = graphNodeCube;
    model.meshInstances = [meshInstance,meshInstance1];
    this.app.scene.addModel(model);
    
    //Create Model Entity
    var modelEntity = new pc.Entity();
    modelEntity.addComponent('model');
    modelEntity.model.asset = model;
    this.app.root.addChild(modelEntity);    

    //create animation
    var animObj = {};
    animObj['animation'] = {};
    animObj['animation']['version'] = 4;
    animObj['animation']['name'] = "Take 001";
    animObj['animation']['duration'] = 10;
    animObj['animation']['nodes'] = [];

    var node = {};
    node['name'] = "Box1"; // nome itemElement
    node['defaults'] = {};
    node['defaults']['r'] = [0, 0, 0];
    node['defaults']['s'] = [1, 1, 1];
    node['keys'] = [];
    
    var key = {};
    key['t'] = 0;
    key['p'] = [0, 1, 0];
    node['keys'].push(key);

    var key1 = {};
    key1['t'] = 10;
    key1['p'] = [2, 1, 0];
    node['keys'].push(key1);
    
    animObj['animation']['nodes'].push(node);
    var assetAnim = new pc.Asset('Take 001', 'animation',null, animObj);
    this.app.assets.add(assetAnim);
    modelEntity.addComponent('animation', {
        assets: [assetAnim],
        speed: 1
    });
    
    modelEntity.animation.play(assetAnim.name);

The two cube are rendered correctly but the animation doesn’t work.
Someone can give me an help?

I have encountered similar problems. Does anyone know how to solve them?

I hope I can help someone, this script works

var animJson = '{"animation":{"version":4,"name":"Take 001","duration":3.33333,"nodes":[{"name":"cube_1_pivot","defaults":{"r":[0,0,0],"s":[1,1,1]},"keys":[{"t":0,"p":[0,-4.37114e-08,1]},{"t":0.1,"p":[0.0466017,-4.37114e-08,1]},{"t":0.2,"p":[0.174356,-4.37114e-08,1]},{"t":0.3,"p":[0.365203,-4.37114e-08,1]},{"t":0.4,"p":[0.601104,-4.37114e-08,1]},{"t":0.5,"p":[0.864032,-4.37114e-08,1]},{"t":0.6,"p":[1.13597,-4.37114e-08,1]},{"t":0.7,"p":[1.3989,-4.37114e-08,1]},{"t":0.8,"p":[1.6348,-4.37114e-08,1]},{"t":0.9,"p":[1.82564,-4.37114e-08,1]},{"t":1,"p":[1.9534,-4.37114e-08,1]},{"t":1.1,"p":[2,-4.37114e-08,1]},{"t":1.2,"p":[1.9068,-4.37114e-08,1]},{"t":1.3,"p":[1.65129,-4.37114e-08,1]},{"t":1.4,"p":[1.26959,-4.37114e-08,1]},{"t":1.5,"p":[0.79779,-4.37114e-08,1]},{"t":1.6,"p":[0.271934,-4.37114e-08,1]},{"t":1.7,"p":[-0.271937,-4.37114e-08,1]},{"t":1.8,"p":[-0.797793,-4.37114e-08,1]},{"t":1.9,"p":[-1.2696,-4.37114e-08,1]},{"t":2,"p":[-1.65129,-4.37114e-08,1]},{"t":2.1,"p":[-1.9068,-4.37114e-08,1]},{"t":2.2,"p":[-2,-4.37114e-08,1]},{"t":2.3,"p":[-1.95602,-4.37114e-08,1]},{"t":2.4,"p":[-1.83508,-4.37114e-08,1]},{"t":2.5,"p":[-1.65371,-4.37114e-08,1]},{"t":2.6,"p":[-1.4284,-4.37114e-08,1]},{"t":2.7,"p":[-1.17563,-4.37114e-08,1]},{"t":2.8,"p":[-0.911881,-4.37114e-08,1]},{"t":2.9,"p":[-0.653621,-4.37114e-08,1]},{"t":3,"p":[-0.417326,-4.37114e-08,1]},{"t":3.1,"p":[-0.219476,-4.37114e-08,1]},{"t":3.2,"p":[-0.0765623,-4.37114e-08,1]},{"t":3.3,"p":[-0.00509159,-4.37114e-08,1]},{"t":3.33333,"p":[-2.13163e-14,-4.37114e-08,1]}]},{"name":"cube_2_pivot","defaults":{"p":[0,-4.37113e-08,1],"s":[1,1,1]},"keys":[{"t":1.66667,"r":[0,-0,0]},{"t":1.76667,"r":[0,0,-3.7343]},{"t":1.86667,"r":[0,0,-14.3133]},{"t":1.96667,"r":[0,0,-30.802]},{"t":2.06667,"r":[0,0,-52.2659]},{"t":2.16667,"r":[0,0,-77.7714]},{"t":2.26667,"r":[0,0,-106.385]},{"t":2.36667,"r":[0,0,-137.175]},{"t":2.46667,"r":[0,0,-169.207]},{"t":2.56667,"r":[0,0,-201.551]},{"t":2.66667,"r":[0,0,-233.272]},{"t":2.76667,"r":[0,0,-263.44]},{"t":2.86667,"r":[0,0,-291.122]},{"t":2.96667,"r":[0,0,-315.384]},{"t":3.06667,"r":[0,0,-335.293]},{"t":3.16667,"r":[0,0,-349.916]},{"t":3.26667,"r":[0,0,-358.317]},{"t":3.33333,"r":[0,0,-360]}]}]}}';
var graphNodeCubePivot = new pc.GraphNode('Cube_pivot');
graphNodeCubePivot.setLocalPosition(0,0.5,0);
graphNodeCubePivot.setLocalEulerAngles(-90,0,0);
var graphNodeCube = new pc.GraphNode('Cube');
var meshInstance = new pc.MeshInstance(graphNodeCube, mesh, material);
graphNodeCubePivot.addChild(graphNodeCube);

var graphNodeCube1Pivot = new pc.GraphNode('cube_1_pivot');
graphNodeCube.addChild(graphNodeCube1Pivot);
graphNodeCube1Pivot.setLocalPosition(0,0,1);
var graphNodeCube1 = new pc.GraphNode('cube_1');
var meshInstance1 = new pc.MeshInstance(graphNodeCube1, mesh, material);
graphNodeCube1Pivot.addChild(graphNodeCube1);

var graphNodeCube2Pivot = new pc.GraphNode('cube_2_pivot');
graphNodeCube1.addChild(graphNodeCube2Pivot);
graphNodeCube2Pivot.setLocalPosition(0,0,1);
var graphNodeCube2 = new pc.GraphNode('cube_2');
var meshInstance2 = new pc.MeshInstance(graphNodeCube2, mesh, material);
graphNodeCube2Pivot.addChild(graphNodeCube2);

//Create model
var model = new pc.Model();
model.graph = graphNodeCubePivot;
model.meshInstances = [meshInstance,meshInstance1,meshInstance2];
model.getGraph().syncHierarchy();
this.app.scene.addModel(model);

//Create Model Entity
var modelEntity = this.entity;
modelEntity.addComponent('model');
//modelEntity.model.type = 'asset';
//modelEntity.model.asset = model;
modelEntity.model.model = model;

var itemRootContainer = new pc.Entity('ItemRootContainer');
var itemContainer = new pc.Entity('ItemContainer');
itemRootContainer.addChild(itemContainer);
this.app.root.addChild(itemRootContainer);
            
var assetAnim = new pc.Asset('Take 001', 'animation',null, JSON.parse(animJson));
this.app.assets.add(assetAnim);
console.log(assetAnim);
this.entity.addComponent('animation', {
	assets: [assetAnim],
	speed: 1,
	loop: false
});
this.entity.animation.play(assetAnim.name);

is it possible to perform an animation in reverse?
I tried with the solution shown here but with poor results. Can someone tell me how to do it?

I made progress with reverse animation.
I have found that using this workaround you absolutely must not use the play method otherwise the animation does not start.

However, it seems that at the end of the animation the objects are not perfectly aligned as in the initial position.
I made this example
What could be the cause of this misalignment? Do you have any ideas?

How big is the misalignment? By eye, it looks fine?

Try using the following workaround as your total animation time when setting your animation to start time:

this.entity.animation.currentTime = this.entity.animation.duration - 0.01;