技术拆解-炫酷动画

去哪里找动画？

设计思路

时间轴

和时间相关的，都可以当做时间轴的表现形式，比如进度条、时钟等。

关系

飞线。

技术拆解

线条延伸

常见的是地图上的飞线，以及两个物品之间的动画连线。

地图飞线

地图飞线实现方案有多种，大多都是通过贝塞尔曲线作图。

D3：http://d3.artzub.com/wbca/
高德+ECharts：https://blog.csdn.net/weixin_42236849/article/details/97786262
three.js的飞线：https://blog.csdn.net/guoweish/article/details/52989098
炫酷的效果(视频)：https://mp.weixin.qq.com/s/AnOw11kovSYPr_MEogFeig
SVG绘制飞线：https://www.jianshu.com/p/69dd56c28248
Canvas画飞线(有性能测试和对比SVG)：https://www.jianshu.com/p/38229570b308

物品连线

这里不是简单的连线，而是有一个逐渐画出来的延伸效果。

思路一：用div画一根很长的线，通过平移+遮挡来实现动态延伸。

思路二：用div画一根很长的线，通过修改其高宽值来实现动态延伸。

思路三：画一根定长的虚线，通过@keyframes设置其margin-left属性，来实现动效。

SVG画线： https://www.w3cways.com/1999.html

元素移动

平移

可以通过@keyframes设置margin-left来实现水平移动；纵向移动同理。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Move</title>
    <style>
        @keyframes move {
            100% {
                margin-left: -1px;
            }
        }
        .shape {
            position: absolute;
            left: 50%;
            top: 40%;
            width: 100px;
            height: 100px;
            margin-top: -5px;
            margin-left: 300px;
            background: rgb(219, 110, 110);
            z-index: -1;
            animation: move 1s infinite;
        }
    </style>
</head>
<body>
    <div class="shape"></div>
</body>
</html>

拖拽

关键属性： draggable=”true”

https://segmentfault.com/a/1190000013606983

将元素设置为可拖拽，然后通过一系列的拖拽事件来实现效果。

如果是和Vue结合使用，那么：

在 Vue 项目中，被拖拽对象和可拖放区域可能放在不同组件之中，此时，关键数据的传递最好借助 Vuex 等数据总线实现。让数据而非 DOM 流转是 Vue 项目的基本思路。

这里有个基于Vue的拖拽文章： https://segmentfault.com/a/1190000014572113?utm_source=tag-newest

思路其实很简单，就是：

1、鼠标按下的时候，给元素绑定mousemove事件，在事件里面随着鼠标移动，设置元素的绝对位置。

2、鼠标抬起的时候，清空mousemove事件

代码：

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        #app {
            position: relative;
            /*定位*/
            top: 10px;
            left: 10px;
            width: 200px;
            height: 200px;
            background: #666;
            /*设置一下背景*/
        }
    </style>

</head>

<body>
    <main>
        <div id="app" v-drag>
    </main>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {},
        methods: {},
        directives: {
            drag: {
                // 指令的定义
                bind: function (el) {
                    let odiv = el; //获取当前元素
                    oDiv.onmousedown = (e) => {
                        //算出鼠标相对元素的位置
                        let disX = e.clientX - odiv.offsetLeft;
                        let disY = e.clientY - odiv.offsetTop;

                        document.onmousemove = (e) => {
                            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                            let left = e.clientX - disX;
                            let top = e.clientY - disY;

                            //绑定元素位置到positionX和positionY上面
                            this.positionX = top;
                            this.positionY = left;

                            //移动当前元素
                            odiv.style.left = left + 'px';
                            odiv.style.top = top + 'px';
                        };
                        document.onmouseup = (e) => {
                            document.onmousemove = null;
                            document.onmouseup = null;
                        };
                    };
                }
            }
        }
    });
</script>
</html>