VUE2 源码中 一个有趣的小动画

请叫我海龟先生
• 阅读 1183

今天在vue2源码发现了一个有意思的小动画,挺有趣的,用 svg 和 Dynamics.js 动画库完成,啥也不说,先看看效果

一、看效果

VUE2 源码中 一个有趣的小动画

二、看代码

基本也是源码中拿过来的,逻辑也不复杂,就不一步步讲解了,想看效果直接复制到编辑器就可以了。

<template>
  <div>
      <h3>一个有趣的小动画</h3>
      <div class="ani_box">
          <div class="mid_box" >
              <svg width="320" class="svg_box" height="300">
                  <path :d="headerPath" fill="#3F51B5"></path>
              </svg>
              <div class="draggable_box"  :style="contentPosition"
                @mousedown="startDrag" @touchstart="startDrag"
                @mousemove="onDrag" @touchmove="onDrag"
                @mouseup="stopDrag" @touchend="stopDrag" @mouseleave="stopDrag">
                  <ul>
                      <li v-for="item of 6" :key="item" >
                          {{`这是第${item}`}}
                      </li>
                  </ul>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
    import { addDyna } from '../utils/add_dynamics';
    addDyna()
    export default {
        name: 'someAnimation',
        data() {
            return {
                c: { x: 160, y: 160 },
                start: { x: 0, y: 0 },
                dragging: false
            }
        },
        created() {},
        computed: {
            headerPath() {
                return 'M0,0 L320,0 320,160' +
                    'Q' + this.c.x + ',' + this.c.y +
                    ' 0,160'
            },
            contentPosition({c}) {
                let dy = c.y - 160
                let dampen = dy > 0 ? 2 : 4
                return {
                    transform: 'translate3d(0,' + dy / dampen + 'px,0)'
                }
            }
        },
        methods: {
            startDrag(e) {
                e = e.changedTouches ? e.changedTouches[0]: e;
                this.dragging = true;
                this.start.x = e.pageX;
                this.start.y = e.pageY;
            },
            onDrag(e) {
                e = e.changedTouches ? e.changedTouches[0]: e;
                if(this.dragging) {
                    this.c.x = 160 + ( e.pageX - this.start.x );
                    // 计算一个阻力因素
                    let dy = e.pageY - this.start.y;
                    let dampen = dy > 0 ? 2 : 4;
                    this.c.y = 160 + dy / dampen;
                }
            },
            stopDrag(e) {
                let self = this;
                if(this.dragging) {
                    // this.dragging = false
                    dynamics.animate(this.c, {
                        x: 160,
                        y: 160
                        }, {
                            type: dynamics.spring,
                            duration: 700,
                            friction: 280,
                            complete: self.dragging = false
                    })
                }
            },
        }

    }
</script>

<style lang='scss' >
    h3,ul{
        margin: 0;
        padding: 0;
    }
    .svg_box{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
    .ani_box{
        min-height: 300px;
        .mid_box{
            width: 320px;
            border: 1px solid #ccc;
            margin: 0 auto;
            position: relative;
        }
    }
    .draggable_box{
        position: absolute;
        top: 160px;
        left: 0;
        right: 0;
        li{
            height: 40px;
            list-style: none;
        }
    }
</style>

三、简单解释

Dynamics.js
Dynamics.js 是一个用于创建物理动画 JavaScript 库。你只需要把 dynamics.js 引入你的页面,然后就可以激活任何 DOM 元素的 CSS 属性动画,也可以结合 SVG 使用。 gif看到的效果就是由它完成

dynamics.animate(this.c, {
   x: 160,
   y: 160
  }, {
  type: dynamics.spring,
  duration: 700,
  friction: 280,
  complete: self.dragging = false 
})

这里可以看到接收三个参数,第一个参数也可以传入 dom节点。 具体了解可以去看文档,这里不瞎逼逼。

我是动态加载的在线js addDyna


export const addDyna = () => { 
    let script = document.createElement('script');
    script.src = 'http://dynamicsjs.com/lib/dynamics.js';

    let t = document.getElementsByTagName('script')[0];
    t.parentNode.insertBefore(script, t)

    script.onload = () => {
        console.log('加载成功')
        script = null;
    }
    script.onerror = (err) => {
        console.log('加载失败',JSON.stringify(err))
    }

}

四、还是挺有趣的,主要发现了 Dynamics 这个库,有兴趣的大佬应该可玩很多花样。

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
1年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue