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

请叫我海龟先生 等级 532 0 0

今天在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 这个库,有兴趣的大佬应该可玩很多花样。

收藏
评论区

相关推荐

Vue2全家桶之一:vue-cli(vue脚手架)超详细教程
这是我第4篇简书。   都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前用jq随便拿全局变量和修改dom的锤子不能用了,vue只用关心数据本身,不用再频繁繁琐的操作dom,注册事件、监听事件、取消事件。。。。(确实很烦)。vue的官方文档还是不错的,由浅到深,如果不使用
Vue3.0 高频出现的几道面试题
1. Vue 3.0 性能提升主要是通过哪几方面体现的? 1.响应式系统提升 vue2在初始化的时候,对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象,还会递归调用defineproperty使之变为响应式对象。 vue3使用proxy对象重写响应式。proxy的性能本来比def
前端GIF生成及优化
羚珑平台的动图可视化设计之前只支持mp4的导出,但在业务方使用场景中大部分需要投放GIF。故本文主要介绍使用 gif.js 生成 GIF 时遇到的一些问题、GIF压缩以及GIF的文件格式和对应编码在gif.js是如何实现的。 GIF 文件结构介绍 位图图形文件格式,采用 8 位( 256 色)重现真彩色的图像。它实际上是一种压缩文档,采用 LZW 压缩算
Vue 项目性能优化—实践指南
Vue 项目性能优化—实践指南 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效
VUE2 源码中 一个有趣的小动画
今天在vue2源码发现了一个有意思的小动画,挺有趣的,用 svg 和 Dynamics.js 动画库完成,啥也不说,先看看效果 一、看效果 GIF 2021319 171028(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/96096e7bd88b170e5846ae09
面试官问 Vue 性能优化,我该怎么回答
前言Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过
非常实用的GitHub项目
CoilCoil是Android上的一个全新的图片加载框架,它的全名叫做 coroutine image loader,即协程图片加载库。与传统的图片加载库Glide,Picasso或Fresco等相比。该具有轻量(只有大约1500个方法)、快、易于使用、更现代的API等优势。它支持GIF和SVG,并且可以执行四个默认转换:模糊,圆形裁剪,灰度和圆角。示例如
Android-图片加载库Coil使用教程
框架介绍Coil是Android上的一个全新的图片加载框架,它的全名叫做coroutine image loader,即协程图片加载库。与传统的图片加载库Glide,Picasso或Fresco等相比。该具有轻量(只有大约1500个方法)、快、易于使用、更现代的API等优势。它支持GIF和SVG,并且可以执行四个默认转换:模糊,圆形裁剪,灰度和圆角。
Vue面试题
1、Vue的生命周期?beforeCreate 、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed(创建、挂载、更新、卸载)挂载中可以操作DOM,创建中不能操作DOM;常用挂载或者创建生命周期就行了2、methods和computed的区别?
Vue 性能优化
前言Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过实际
Vue3.0 高频出现的几道面试题
1、Vue 3.0 性能提升主要是通过哪几方面体现的? 1.响应式系统提升vue2在初始化的时候,对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象,还会递归调用defineproperty使之变为响应式对象。vue3使用proxy对象重写响应式。proxy的性能本来比defineprope
Vue - diff 算法
diff是什么?diff就是比较两棵树,render会生成两颗树,一棵新树newVnode,一棵旧树oldVnode,然后两棵树进行对比更新找差异就是diff,全称difference,在vue里面 diff 算法是通过patch函数来完成的,所以有的时候也叫patch算法⏳ diff 发生的时机diff发生在什么时候呢?当然我们可以说在数据更新的时候发生d
前端培训-Vue专题之Vue基础
简介特点:MVVM框架,双向绑定,数据驱动,单页面,组件化。 区别Vue 和 jQuery 的区别:不直接操作DOM,而是操作数据。案例:Hello World 你好,世界HTML代码:xml<h1msg</h1jQuery实现javascript$("h1").text("你好,世界");Vue 实现javascriptthis.msg '你好,世界'
nextTick原理解析
nextTick 是什么\$nextTick:根据官方文档的解释,它可以在 DOM 更新完毕之后执行一个回调函数,并返回一个 Promise(如果支持的话)js// 修改数据vm.msg "Hello";// DOM 还没有更新Vue.nextTick(function() // DOM 更新了);这块理解 EventLoop 的应该一看就懂,其实就是
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择?先看看市面上都有哪些可用的富文本编辑器: (插件式的,支持 Vue,React,Angular 框架) (Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费,支持 JS 直接引入使用,或者 Vue2/3,React) (开源,插件多,功能齐全,支持