hightopo 动画

<!DOCTYPE html>
<html>
<head>
    <title>animation动画</title>
    <style>
        .view {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
    <script src="../../../../lib/core/ht.js"></script>
    <script src="../../../../lib/plugin/ht-animation.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function init() {

            var graph = window.graph = new ht.graph.GraphView(),
                dm = window.dm = graph.dm(),
                view = graph.getView();

            dm.enableAnimation(5);//动画  启动全局动画定时器，参数interval指定全局动画间隔，默认为requestAnimFrame的时间(16ms左右，因浏览器而异)，
            // 也就是说，如果不指定interval参数，DataModel定时器每隔16ms左右就会遍历自己所有的Data，根据Data的animation配置执行动画
            view.className = "view";
            document.body.appendChild(view);

            //位置1
            var node1 = new ht.Node();
            node1.setName("node1");
            node1.setPosition(100, 100);
            node1.setSize(100, 100);
            node1.s({
                'shape': 'circle', //引入矩形//rect
                'shape.background': 'pink',//图形内部颜色 //背景填充颜色，为null代表不填充背景
                'shape.border.width': 3,//图形内部颜色
                'shape.dash': true,//是否显示虚线
                'shape.dash.width': 5,//虚线边框宽度，默认值为0表示不绘制边框
                'shape.dash.color': 'red',//虚线颜色
                'shape.border.cap': 'square',//边框末端线帽的样式，可选参数为butt 缩短式直线头|round 圆头|square 增长式直线头
                'shape.dash.pattern': [10, 10]//虚线样式
            });
            node1.setAnimation({//动画1  启动全局动画定时器
                borderFlow: {
                    property: "shape.dash.offset",//动画要改变的图元的属性名
                    accessType: "style",//类型枚举如下
                    //null 默认类型，如property为width，采用getWidth()和setWidth(value)的get/set或is/set方式存取。
                    // style 如property为width，采用getStyle('width')和setStyle('width', value)的方式存取。
                    // attr 如property为width，采用getAttr('width')和setAttr('width', value)的方
                    easing: "Linear",//动画方式，枚举如下：
                    // Linear、Quad.easeIn、Quad.easeOut、 Quad.easeInOut;Cubic.easeIn、
                    // Cubic.easeOut、 Cubic.easeInOut; Quart.easeIn、Quart.easeOut、
                    // Quart.easeInOut;Quint.easeIn、Quint.easeOut、 Quint.easeInOut;
                    // Sine.easeIn、Sine.easeOut、 Sine.easeInOut; Expo.easeIn、Expo.easeOut、
                    // Expo.easeInOut;Circ.easeIn、Circ.easeOut、 Circ.easeInOut;Elastic.easeIn、
                    // Elastic.easeOut、 Elastic.easeInOut; Back.easeIn、Back.easeOut、
                    // Back.easeInOut;Bounce.easeIn、Bounce.easeOut、 Bounce.easeInOut
                    from: 1, //动画开始时的属性值
                    to: 20, // 动画结束时的属性值
                    frames: 19,//动画帧数，默认为60  每秒帧数实际上就是指动画或视频每秒放映的画面数。帧就是指“画面”，1幅画就叫做“1帧”，每秒帧数指的就是“每秒播放的画面数”。帧数就是在1秒钟时间里传输的图片的量，也可以理解为图形处理器每秒钟能够刷新几次
                    onComplete: function() {// 回调函数，动画完成后执行
                        this.s('shape.dash.offset', 0);
                    },
                    next: "borderFlow"
                },
                start: ["borderFlow"]//start是一个数组，用于指定要启动的一个或多个动画
            });

            //位置2
            var node2 = new ht.Node();
            node2.setName("node2");
            node2.setPosition(500, 500);
            node2.setSize(100, 100);


            //流动线条1
            var edge1 = new ht.Edge(node1, node2);
            edge1.s({
                'edge.width': 5,
                'edge.gap': 20,
                'edge.dash': true,
                'edge.offset': 0
            });
            edge1.setAnimation({//动画3
                flowing: {
                    property: 'edge.dash.offset',
                    accessType: 'style',
                    easing: 'Linear',
                    from: 0,
                    to: 1000,
                    frames: 500,
                    interval: 30,
                    onComplete: function () {
                        this.s('edge.dash.offset', 0);
                    },
                    next: 'flowing'
                },
                start: ['flowing']
            });

            //流动线条2
            var edge2 = new ht.Edge(node1, node2);
            edge2.s({
                'edge.width': 10,
                'edge.gap': 20,
                'edge.color': 'red',
                'edge.dash': true,
                'edge.dash.width': 6,
                'edge.dash.color': 'yellow',
                'edge.dash.pattern': [20, 10],
                'edge.offset': 0
            });
            edge2.setAnimation({//动画4
                flowing: {
                    property: 'edge.dash.offset',
                    accessType: 'style',
                    easing: 'Linear',//动画方式，枚举如下：
                    // Linear、Quad.easeIn、Quad.easeOut、 Quad.easeInOut;Cubic.easeIn、
                    // Cubic.easeOut、 Cubic.easeInOut; Quart.easeIn、Quart.easeOut、
                    // Quart.easeInOut;Quint.easeIn、Quint.easeOut、 Quint.easeInOut;
                    // Sine.easeIn、Sine.easeOut、 Sine.easeInOut; Expo.easeIn、Expo.easeOut、
                    // Expo.easeInOut;Circ.easeIn、Circ.easeOut、 Circ.easeInOut;Elastic.easeIn、
                    // Elastic.easeOut、 Elastic.easeInOut; Back.easeIn、Back.easeOut、
                    // Back.easeInOut;Bounce.easeIn、Bounce.easeOut、 Bounce.easeInOut
                    from: 0,
                    to: -100,
                    frames: 500,
                    onComplete: function() {
                        this.s('edge.dash.offset', 0);
                    },
                    next: 'flowing'
                },
                start: ['flowing']
            });

            dm.add(node1);
            dm.add(node2);
            dm.add(edge1);
            dm.add(edge2);
        }
    </script>
</head>
<body onload="init();">

</body>
</html>
猜你喜欢
