一个非常简单的图扑/hightopo框架domo

794 阅读2分钟

啥也不是

刚入职,刚学几天,文档看得一脸懵逼,瞎写的
总结起来就是,平移,平移,各种平移,还有一丢丢旋转。

效果图

真就只是图,没有预览效果 image.png

代码

button_onClick = function(event, data, view){
    var rod = dataModel.getDataByTag('rod');
    var gripper = dataModel.getDataByTag('gripper');
    var gripper_left = dataModel.getDataByTag('gripper_left');
    var gripper_right = dataModel.getDataByTag('gripper_right');
    var box1 = dataModel.getDataByTag('box1');
    var box2 = dataModel.getDataByTag('box2');
    var plate = dataModel.getDataByTag('plate');
    var gripper_base = dataModel.getDataByTag('gripper_base');
    var line1 = dataModel.getDataByTag('line1');
    
    // 抓手向下运动
    var gripper_down = function(){
        ht.Default.startAnim({
            duration:1000,
            action:function(v){
                gripper.setY(-350+(-200+350)*v);
                rod.setHeight(285+(436-285)*v);
            },
            finishFunc:function(){
                gripper_close();
            }
        })
    }
    
    // 抓手动作 true为合拢,false为张开
    var gripper_close = function(){
        ht.Default.startAnim({
            duration:1000,
            // frames:13,
            // interval:10,
            action:function(v){
                // if(state){
                    // gripper_left.setRotation(gripper_left.getRotation()-Math.PI/180)
                    gripper_left.setRotation(28*(Math.PI/180)+(15*(Math.PI/180)-28*(Math.PI/180))*v);
                    gripper_right.setRotation(-35*(Math.PI/180)+(-15*(Math.PI/180)+35*(Math.PI/180))*v);
                // }else{
                //     gripper_left.setRotation(15*(Math.PI/180)+(28*(Math.PI/180)-15*(Math.PI/180))*v);
                //     gripper_right.setRotation(-15*(Math.PI/180)+(-35*(Math.PI/180)+15*(Math.PI/180))*v);
                // }
                
            },
            finishFunc:function(){
                gripper_up();
            }
        })
    }
    
    // 抓手向上运动
    var gripper_up = function(){
        ht.Default.startAnim({
            duration:1000,
            action:function(v){
                gripper.setY(-200+(-350+200)*v)
                rod.setHeight(436+(285-436)*v)
                box1.setY(-136.27594+(-285.27594+136.27594)*v)
            },
            finishFunc:function(){
                plate_up();
                gripper_move_right();
            }
        })
    }
    
    // 抓手向右平移
    var gripper_move_right = function(){
        ht.Default.startAnim({
            duration:1000,
            action:function(v){
                box1.setX(-22+(346+22)*v)
                gripper.setX(-18+(350+18)*v);
                rod.setX(-18+(350+18)*v);
                gripper_base.setX(-8+(376-8)*v);
            },
            finishFunc:function(){box1_down();}
        })
    }
    
    // 箱子1向下平移变小
    var box1_down = function(){
        // var box1_Y = box1.getY();
        console.log(box1.getY())
        ht.Default.startAnim({
            duration:1000,
            action:function(v){
                gripper_left.setRotation(15*(Math.PI/180)+(28*(Math.PI/180)-15*(Math.PI/180))*v);
                gripper_right.setRotation(-15*(Math.PI/180)+(-35*(Math.PI/180)+15*(Math.PI/180))*v);
                box1.setY(-285.27594+(-185+285.27594)*v);
                box1.setSize(80+(50-80)*v,80+(50-80)*v)
            },
            finishFunc:function(){
                gripper_up2();
            }
        })
    }
    
    // 升降板上升
    var plate_up = function(){
        ht.Default.startAnim({
            duration:2000,
            action:function(v){
                plate.setY(-74+(-437+74)*v);
                box2.setY(-78+(-441+78)*v);
            }
        })
    }
    
    // 抓手向上运动
    var gripper_up2 = function(){
        ht.Default.startAnim({
            duration:1000,
            action:function(v){
                gripper.setY(-350+(-530+350)*v)
                rod.setHeight(285+(105-285)*v)
            },
            finishFunc:function(){
                gripper_move_left1();
            }
        })
    }
    // 抓手平移
    var gripper_move_left1 = function(){
        ht.Default.startAnim({
            duration:1000,
            action:function(v){
                gripper.setX(350+(201-350)*v);
                rod.setX(350+(201-350)*v);
                gripper_base.setX(376+(227-376)*v);
            },
            finishFunc:function(){}
        })
    }
    
    // 水流动
    var water_flow = function(){
        ht.Default.startAnim({
            duration:1000,
            action:function(){
                line1.setStyle('shape.dash.offset',line1.getStyle('shape.dash.offset')-0.5);
            },
            finishFunc:function(){
                
                water_flow();
            }
        })
    }

    water_flow();
    gripper_down();
   
}