HT for web编辑器实现动画

2019-12-05 2,255 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        html, body {
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>

</body>
<script src='lib/ht.js'></script>
<script src='lib/ht-animation.js'></script>
<script src="index.js"></script>
</html>
 js
(function(){
'use strict';
    let gv=window.gv=new ht.graph.GraphView();
     // 反序列化2d的图纸
    gv.deserialize('displays/shanbei.json',(json,dm)=>{
      // 开启全局的动画
        dm.enableAnimation()
        dm.getDataByTag('police1').setAnimation({
            expandWidth: {
                property: "width",
                from: 30,
                to: 100,
                next: "collapseWidth"
            },
            collapseWidth: {
                property: "width",
                from: 100,
                to: 30,
                next: "expandWidth"
            },
            expandHeight: {
                property: "height",
                from: 30,
                to: 100,
                next: "collapseHeight"
            },
            collapseHeight: {
                property: "height",
                from: 100,
                to: 30,
                next: "expandHeight"
            },
            start: ["expandWidth", "expandHeight"]
        });
        实现的是图标变大变小的效果
    })
    
    <!--调度实现动画-->
    var blinkTask = {
        interval: 50,
        action: function (data){
            let police=dm.getDataByTag('police2')
            if(data ===police){
                police.setRotation(police.getRotation() + Math.PI/20);//图标开始旋转
            }else{
                return;
            }
        }
    };
    gv.dm().addScheduleTask(blinkTask);//开启调度
    
    <!--实现的效果是图标旋转的效果-->
}())