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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
JS的反射问题
Apr 07 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
微信小程序图片自适应实现解析
Jan 21 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
PHP实现Socket服务器的代码
2008/04/03 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
Python实现截屏的函数
2015/07/25 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
巴西在线鞋店:Shoestock
2017/10/28 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
电厂职工自我鉴定
2014/02/20 职场文书
学生自我评语大全
2014/04/18 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android