AI编程助手
AI免费问答
文章
专题fine
AI工具hot
学习
下载
问答
源码
最近更新

技术文章  >  web前端 > js教程

React实现的抛物线动画

不言   2018-07-14 09:23   1758浏览 原创

这篇文章主要介绍了关于react实现的抛物线动画，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

一个简单通用的 React 抛物线动画

Usage

import { parabola } from "./parabola"

...

onAnimate = () => {
  const config = {
    ballWrapper: this.$wrapper, //小球的父容器
    origin: this.$origin, //动画起点DOM
    target: this.$target, //动画目标DOM
    time: 600, //[可选]持续时间
    a: 0.02, //[可选]抛物线参数
    callback: this.updateLocation, //回调函数
    finish: animationDone, //[可选]动画完成执行函数
    offset: 8 //[可选]动画尺寸
  }
  parabola(config)
}
  
...

parabola方法简易试图

2454987463-5b472eed26cfd_articlex[1].png

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

PHP速学视频免费教程(入门到精通)

PHP速学视频免费教程(入门到精通)

PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
css php mongodb
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一条：如何使用Vue+Mock.js来搭建前端的独立开发环境 下一条：对angular的组件通信的解析

相关文章

查看更多

最新文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！