JS抛物线动画实例制作

2024-07-28 20:51:52

在做无人便利小程序的项目中，某一天产品说要像某产商产品学习，给添加购物车增加抛物线小球动画。好吧，产品你最大，做！

先给大家看下效果图

分析

这种不固定起始位置的动画，自然不能用 gif 图，所以只能用原生代码实现

那我们有什么工具来实现动画呢？

小程序提供了 JS API createAnimation 来创建动画

CSS animation

工具有了，我们再看一下什么是抛物线。

这里我们只讨论水平抛物线，水平抛物线从数学原理上来说就是【水平匀速、垂直加速的运动】，转换成代码层面就是在动画效果 timingFunction 中，水平动画采用 linear ，垂直动画采用 ease-in

所以我们需要把这个抛物线动画分解成两个同时进行但不同动画效果的动画。

实现

小程序的实现

JS：

cartAnimation(x, y) { // x y 为手指点击的坐标，即球的起始坐标
  let self = this,
    cartY = app.globalData.winHeight - 50, // 结束位置（购物车图片）纵坐标
    cartX = 50, // 结束位置（购物车图片）的横坐标
    animationX = flyX(cartX, x), // 创建球的横向动画
    animationY = flyY(cartY, y), // 创建球的纵向动画
    this.setData({
      ballX: x,
      ballY: y,
      showBall: true
    })
  setTimeoutES6(100).then(() => { // 100 秒延时，确保球已经到位并显示
    self.setData({
      animationX: animationX.export(),
      animationY: animationY.export(),
    })
    return setTimeoutES6(400) // 400 是球的抛物线动画时长
  }).then(() => { // 400 秒延时后隐藏球
    this.setData({
      showBall: false,
    })
  })
}

function setTimeoutES6(sec) { // Promise 化 setTimeout
  return new Promise((resolve, reject) => {
    setTimeout(() => {resolve()}, sec)
  })
}

function flyX(cartX, oriX) { // 水平动画
  let animation = wx.createAnimation({
    duration: 400,
    timingFunction: 'linear',
  })
  animation.left(cartX).step()
  return animation
}

function flyY(cartY, oriY) { // 垂直动画
  let animation = wx.createAnimation({
    duration: 400,
    timingFunction: 'ease-in',
  })
  animation.top(cartY).step()
  return animation
}

HTML:

<view animation="{{animationY}}" style="position:fixed;top:{{ballY}}px;" hidden="{{!showBall}}">
  <view class="ball" animation="{{animationX}}" style="position:fixed;left:{{ballX}}px;"></view>
</view>

据我所知，用 transform: transtate() 来实现的动画会比 top & left 性能更优，但尝试下来发现并不能做到理想的交互效果，期待后续继续研究吧

H5 的实现

// todo

您可能感兴趣的文章:

JS实现的抛物线运动效果示例
JS小球抛物线轨迹运动的两种实现方法详解
parabola.js抛物线与加入购物车效果的示例代码
js弹性势能动画之抛物线运动实例详解
JS高仿抛物线加入购物车特效实现代码
js绘制购物车抛物线动画
js实现商品抛物线加入购物车特效

js弹性势能动画之抛物线运动实例详解

抛物线运动就是:当拖拽结束的时候,我们让当前的元素同时水平运动+垂直运动在同样的移动距离下,我们鼠标移动的速度快,move方法触发的次数少,相反移动的速度慢,move方法触发的次数就多->浏览器对于每一次的move行为的触发都是由一个最小时间的. 通过观察,我们发现一个事情:水平方向我们盒子在结束拖拽的时候移动的速度和移动的距离没有必然的联系,和开始拖拽的速度也没有必然的联系,只和最后一次即将松开的那一瞬间鼠标的速度是有关系的,最后瞬间鼠标如果移动的快,我们水平运动的距离和速度也是比较大的.-
JS实现的抛物线运动效果示例

本文实例讲述了JS实现的抛物线运动效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!doctype html > <html> <head> <meta charset="utf-8"/> <title>抛物线运动</title> <style> .pwx_rect{position:absolute;left:10px;top:300px;background-color
JS高仿抛物线加入购物车特效实现代码

1. 简介要想让你的购物车有种高大上的感觉,加入特效的功能是必不可少的. 2. 实现思路设置一些简单的样式模拟把它添加到购物车中,数量增加从点击的位置开始动画,结束动画 3. 代码实现 CSS代码咱们给它设置一些简单的样式,让它显得不是那么的太low .flyer { display: block; width: 50px; height: 50px; border-radius: 50px; position: fixed; margin-left: 50px; z-index: 9
parabola.js抛物线与加入购物车效果的示例代码

在做购物车的时候发现一个很好用抛物线特效parabola.js,可先点击DEMO体验下.下面贴出一些关键代码,具体代码可在GitHub上查看 parabola.js var funParabola = function (element, target, options) { /* * 网页模拟现实需要一个比例尺 * 如果按照1像素就是1米来算,显然不合适,因为页面动不动就几百像素 * 页面上,我们放两个物体,200~800像素之间,我们可以映射为现实世界的2米到8米,也就是100:1 * 不过
JS小球抛物线轨迹运动的两种实现方法详解

本文实例讲述了JS小球抛物线轨迹运动的两种实现方法.分享给大家供大家参考,具体如下: js实现小球抛物轨迹运动的大致思路: 1.用setInterval()方法,进行间隔性刷新,更新小球位置,以实现动态效果 2.绘制小球和运动区域,运动区域可通过flex布局实现垂直居中 3.用物理公式S(y)=1/2*g*t*t,S(x)=V(x)t来计算路径现确定V(x)=4m/s,刷新的时间间隔设置为0.1s.原本px和米之间的转换,不同尺寸转换不同,本例采用17寸显示器,大约1px=0.4mm.但浏览器
js绘制购物车抛物线动画

天猫将商品加入购物车会有一个抛物线动画,告诉用户操作成功以及购物车的位置,业务中需要用到类似的效果,记录一下实现过程备忘,先上demo 一开始没有想到用抛物线函数去做,也已经忘记还有这么个函数了,想着抛物线本质上就是向右和向上方向各有一个速度(就上面的demo而言),向右的速度匀速,向上的速度递减,减到0后再反方向递增,元素的left和top值随时间递增而改变,元素运动轨迹就是抛物线,这个思路不具备通用性,实现也比较复杂,放弃了. 之后参考了张鑫旭用抛物线函数的实现方式和愚人码头的改进,豁然开朗
js实现商品抛物线加入购物车特效

本文实例为大家分享了js实现商品抛物线加入购物车动画代码,供大家参考,具体内容如下 parapola.js /*! * by zhangxinxu(.com) 2012-12-27 * you can visit http://www.zhangxinxu.com/wordpress/?p=3855 to get more infomation * under MIT license */ var funParabola = function(element, target, options)
JS抛物线动画实例制作

在做无人便利小程序的项目中,某一天产品说要像某产商产品学习,给添加购物车增加抛物线小球动画.好吧,产品你最大,做! 先给大家看下效果图分析这种不固定起始位置的动画,自然不能用 gif 图,所以只能用原生代码实现那我们有什么工具来实现动画呢? 小程序提供了 JS API createAnimation 来创建动画 CSS animation 工具有了,我们再看一下什么是抛物线. 这里我们只讨论水平抛物线,水平抛物线从数学原理上来说就是[水平匀速.垂直加速的运动],转换成代码层面就是在动画效果
JS+Canvas实现满屏爱心和文字动画的制作

目录介绍步骤介绍 <canvas> 最早由 Apple 引入 WebKit,用于 Mac OS X 的 Dashboard,随后被各个浏览器实现.如今,所有主流的浏览器都支持它.Canvas API 提供了一个通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形的方式.它可以用于动画.游戏画面.数据可视化.图片编辑以及实时视频处理等方面.Canvas 适合绘制大数据量图形元素的图表(如热力图.地理坐标系或平行坐标系上的大规模线图或散点图等),也适合实
基于Angular.js实现的触摸滑动动画实例代码

先上图: 这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right,向左或向右的触摸事件.结合css3的transition实现的动画.ng-class为切换写好的动画的className. <!DOCTYPE HTML> <html ng-app="myapp"> <head> <meta http-equiv="content-type" content="
JS实现动画兼容性的transition和transform实例分析

本文实例讲述了JS实现动画兼容性的transition和transform方法.分享给大家供大家参考,具体如下: 今天在开发纯手工js打造图片滚动效果的时候,遇到一件不愉快的兼容事件. 之前js设置图片滚动动画效果如下: var addSlideStyle = function(time, leftWidth) { time = time || 0; leftWidth = leftWidth || 0; return 'transition: all ' + time + 's ease-in
原生js拖拽功能制作滑动条实例代码

拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括滑动条.滑动痕迹.滑块.文本等元素,先把html代码写出来,如下所示: <div class="bar_wrap" id="wrap"> <div class="bar_container"> <div class=&qu
基于jquery fly插件实现加入购物车抛物线动画效果

先给大家展示下效果图: 在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jquery fly插件实现加入购物车抛物线动画效果. 使用jquery.fly插件很方便时实现抛物线动画加入购物车的功能一.插件下载插件官方:https://github.com/amibug/fly 二.载入jQuery库文件和jquery.fly.min.js插件 <scr
javascript帧动画(实例讲解)

前面的话帧动画就是在"连续的关键帧"中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容.本文将详细介绍javascript帧动画概述 [分类] 常见的帧动画的方式有三种,包括gif.CSS3 animation和javascript git和CSS3 animation不能灵活地控制动画的暂停和播放.不能对帧动画做更加灵活地扩展.另外,gif图不能捕捉动画完成的事件.所以,
js实现简单选项卡制作

本文实例为大家分享了js实现简单选项卡制作代码,供大家参考,具体内容如下实现功能通过点击按钮查看相应的介绍: 按钮相应的变色: 内容相应的切换: html 文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid

JS抛物线动画实例制作

您可能感兴趣的文章:

相关推荐

随机推荐