Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 广告合作
  • 赞助支持
  • 关于我们
资源推荐
简约导航
一款清新简洁,免费无广告的导航网站
ArkClaw龙虾
能自己操控电脑、帮你干活的AI智能体
爱派AiPy
一款可本地部署的AI智能体,帮你操作电脑、手机、服务器设备
OpenClaw(Clawdbot)部署
稳定不贵,不用写代码,分钟级部署OpenClaw
Seedance 2.0
字节跳动新一代AI视频生成模型全面解析
AI数字人
必火AI数字人一站式创作平台
美图设计室
AI智能一键生成海报,免费平面设计
周易国学网
基于周易、八字、紫微斗数等传统国学文化
码上飞(CodeFlying)
用一句话自动生成小程序、APP、H5网页应用
衡天云
海外云服务器12元/月起,限量抢购,超高性价比

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
网站收录 / 问题反馈

anime

分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://animejs.com/
描述信息:一个轻量的JavaScript 动画库
访问官网

Aanime.js 是一款功能强大的Javascript 动画库插件。anime.js 可以和CSS3 属性,SVG,DOM 元素和JS 对象一起工作,制作出各种高性能,平滑过渡的动画效果。


安装anime.js

npm install animejs 
bower install animejs

或者下载anime.js 的文件包


使用方法

在页面中引入anime.min.js 文件。

<script type="text/javascript" src="js/anime.min.js"></script>


HTML结构

以动画两个div 元素为例,HTML 结构如下:

<article>
  <div class="blue"></div>
  <div class="green"></div>
</article>


初始化插件

通过anime() 方法来构造一个对象实例,以json 对象的方式传入需要的参数:

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});


配置参数

anime.js 动画库插件的可用配置参数有:

参数默认值取值
delay0number, function (el, index, total)
duration1000number, function (el, index, total)
autoplaytrueboolean
loopfalsenumber, boolean
direction'normal''normal', 'reverse', 'alternate'
easing'easeOutElastic'console log anime.easings to get the complete functions list
elasticity400number (higher is stronger)
roundfalsenumber, boolean
beginundefinedfunction (animation)
updateundefinedfunction (animation)
completeundefinedfunction (animation)

仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://fly63.com/nav/2741

更多»
热门资源
ECharts
一个使用 JavaScript 实现的开源可视化库
官网
GitHub
SVG.js
包括各种形状、线条、文本、路径等元素
官网
GitHub
d3.js
基于HTML 和 SVG 的 JavaScript 可视化库
官网
GitHub
incubator-echarts
百度团队开发的一款商业级数据图表
官网
GitHub
g2
一套基于可视化编码的图形语法
官网
GitHub
Chartist.js
JavaScript响应式图表库
官网
GitHub
MetricsGraphics.js
一个基于 D3 的简洁的数据图表优化
官网
GitHub
plotly.js
基于d3.js 和stack.gl开源的 JavaScript 图表库
官网
GitHub
js-sequence-diagrams
一款基于 Javascript 的Web绘制时序图的工具
官网
GitHub
C3.js
基于D3.js开发的JavaScript库
官网
GitHub
crossfilter
一个数据计算模型,能够很好地结合DC.JS进行数据解析绘图
官网
GitHub
Processing.js
擅长创建2D和3D图象,可视化数据套件,音频,视频等
官网
GitHub
类似于anime的资源
vizceral
一组采用WebG标准实现的动态展示线路图组件
点击进入
GitHub
Chartist.js
JavaScript响应式图表库
官网
GitHub
v-charts
基于 Vue2.0 和 ECharts 封装的图表组件
官网
GitHub
inmap
基于百度地图的可视化库
官网
GitHub
sigma.js
一个致力于在Web应用中进行图形绘制的JavaScript库
官网
GitHub
piecon
为你的网站图标生成加载进度的饼状图
官网
GitHub
Fusioncharts
一个免费版本,功能依然强大,图形类型依然丰富的图表图形类库
官网
WebCola
基于Javascript约束的图形布局
官网
GitHub
目录

手机扫一扫预览

》
分享组件加载中...
首页 技术导航 在线工具 技术文章 教程资源 前端标签 AI工具集 前端库/框架 实用工具箱 广告合作 关于我们

Copyright © 2018 Web前端开发网 All Rights Reserved. 提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主,助您解决各类实际问题,快速提升专业能力。