velocity实现抛物线动画

nicercode 发布于2019-08-22 14:49 / 2024人阅读

摘要：昨天看到了链接描述写的小程序中的抛物线动画，当时作者还没发的版本，因此我就尝试自己去做一个。同时正好练习一下使用，所以就用了来实现。第一次发文章和代码还望大家指点

昨天看到了henry_chen 链接描述写的小程序中的抛物线动画，当时作者还没发H5的版本，因此我就尝试自己去做一个。同时正好练习一下使用Velocity，所以就用了Velocity.js来实现。
第一次发文章和代码还望大家指点：

style

    .wrapper {
      position: relative;
      width: 200px;
      height: 500px;
      border: 1px solid #dedede;
    }

    .add {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      background: greenyellow;
    }

    .ball {
      width: 10px;
      height: 10px;
    }

    .cart {
      position: absolute;
      bottom: 20px;
      left: 20px;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      background: rgb(129, 214, 2);
    }

html



    var add = document.querySelector(".add");
    var wrapper = document.querySelector(".wrapper");
    var cart = document.querySelector(".cart");
    add.onclick = function (e) {
      var ball = document.createElement("div");
      wrapper.appendChild(ball)
      ball.id = "ball"
      ball.style.width = "10px";
      ball.style.height = "10px";
      ball.className = "add";
      ball.style.top = e.pageY + "px";
      ball.style.left = e.pageX + "px";
      var ball = document.querySelector("#ball");

      Velocity(ball, {
        translateX: -add.offsetLeft + 10 + "px"
      }, {
          duration: 800,
          easing: "linear"
        })
      setTimeout(() => {
        Velocity(ball, {
          translateY: cart.offsetTop - 40 + "px"
        }, {
            duration: 800,
            easing: "ease-in",
            queue: false,
            complete: function () {
              wrapper.removeChild(ball);
              Velocity(cart, {
                scale: 1.1
              }, {
                  duration: 200,
                  complete: function () {
                    Velocity(cart,
                      "reverse"
                      , {
                        duration: 200
                      })
                  }
                })
            }
          });
      }, 0);
    }

云服务器 GPU云服务器 Android抛物线动画实现加载动画 javascript实现动画 js实现gif动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92906.html

JS 实现抛物线动画

摘要：陈家宾在做小程序的项目中，需要在添加购物车的时候，增加抛物线小球动画。 author: 陈家宾 email: 617822642@qq.com date: 2018/2/24 在做小程序的项目中，需要在添加购物车的时候，增加抛物线小球动画。先给大家看下效果图（其实已经是实现后的效果了，顺便给自己公司打广告了哈哈） showImg(https://segmentfault.com/im...

zollero 2019-08-26 17:15 评论0 收藏0
仿天猫超市收藏抛物线动画工具库

摘要：一般我们会对值先进行归一化处理然后传入缓动函数进行映射。缓动函数应该具备以下几点要求归一化后传入为，输出应该为传入为，输出应该为函数应该是连续的更新记录添加缓动函数效果 DEMO See Demo! 工具库GIT地址 get on GIT 求波star :) 如何实现难点在于在不超出屏幕范围的前提下，尽量抛得更高整体思路大致如下：我们知道抛物线的方程式为: showImg(h...

wudengzan 2019-08-20 11:26 评论0 收藏0
Velocity.js简明使用教程（中文版上）

摘要：需要使用，本文未使用，所以暂不考虑。然后，只需要在主函数中调用这些函数，主函数包含方法。每个函数使用关键字存储在常量中。下面是有计时器的主函数。在主函数里调用以上函数注意全局变量。简而言之，不要在动态上下文的回调函数中使用箭头函数。本文翻译自https://www.sitepoint.com/how... 在本文中，我将介绍Velocity.js，这是一个快速，高性能的JavaScr...

graf 2019-08-20 15:58 评论0 收藏0
使用veloticy-ui生成文字动画

摘要：前言最近要实现一个类似文字波浪线的效果，使用了这个动画库第一个感觉就是使用简单，代码量少性能优异在此简单介绍一下使用方法，并实现一个看上去不错的动画具体使用方法可以点击这里基本使用要使用需要先引入其中可以是依赖也可以不依赖，具体看一下下前言最近要实现一个类似文字波浪线的效果，使用了velocity-ui这个动画库,第一个感觉就是使用简单，代码量少,性能优异,在此简单介绍一下使用方法...

Alan 2019-08-30 13:56 评论0 收藏0