JS抛物线动画实例制作


Posted in Javascript onFebruary 24, 2018

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

先给大家看下效果图

JS抛物线动画实例制作

分析

这种不固定起始位置的动画,自然不能用 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
Javascript 相关文章推荐
基于jquery的表头固定的若干方法
Jan 27 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
Vue-Router的使用方法
Sep 05 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 #Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 #Javascript
vue watch监听对象及对应值的变化详解
Feb 24 #Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 #Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 #Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 #jQuery
vue cli webpack中使用sass的方法
Feb 24 #Javascript
You might like
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
php实现的生成排列算法示例
2019/07/25 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
python中的错误如何查看
2020/07/08 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
python源文件的字符编码知识点详解
2021/03/04 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
HTML5图片预览实例分享
2014/06/04 HTML / CSS
应届毕业生求职信范例分享
2013/12/17 职场文书
读书活动总结
2014/04/28 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
统计工作个人总结
2015/03/03 职场文书
羊脂球读书笔记
2015/06/30 职场文书
找规律教学反思
2016/02/23 职场文书
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫