一个流行的网页动画JS库
animejs
https://animejs.com/
Anime.js (
/ˈæn.ə.meɪ/
) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.此库是一个轻量级的JS动画库,带有简单和强大的API。
Anime's built-in staggering system makes complex follow through and overlapping animations simple. It can be used on both timings and properties.
Animate multiple CSS transforms properties with different timings simultaneously on a single HTML element.
Play, pause, control, reverse and trigger events in sync using the complete built-in callbacks and controls functions.
Anime.js works with anything web. CSS, SVG, DOM attributes and JavaScript Objects: animate everything with a single unified API.
GITHUB上有33K的favorites。
https://github.com/juliangarnier/anime/
例子
https://animejs.com/documentation/
物体沿着一条path行进, path的入参数,表示的DOM对象,可以是一个path, 也可以是任意的一个特殊图形, 如圆圈,抛物线。
https://animejs.com/documentation/#motionPath
var path = anime.path('.motion-path-demo path'); anime({
targets: '.motion-path-demo .el',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 2000,
loop: true
});
教学库
https://github.com/joao-pratas/animejs-tut
https://github.com/joao-pratas/animejs-tut/tree/master/anime-master/documentation/examples
时间线接口,可以串起来每一个小步骤。
https://github.com/joao-pratas/animejs-tut/blob/master/anime-master/documentation/examples/anime-timeline.html
var noOffset = anime.timeline({
autoplay: true
});
noOffset
.add({
targets: '.no-offset',
translateX: -100,
translateY: -100,
scale: 2,
background: '#FF1461',
begin: function() { console.log('noOffset animation 1 began')},
complete: function() { console.log('noOffset animation 1 completed')}
})
.add({
targets: '.no-offset',
translateX: -100,
translateY: 100,
scale: 3,
background: '#18FF92',
begin: function() { console.log('noOffset animation 2 began')},
complete: function() { console.log('noOffset animation 2 completed')}
})
.add({
targets: '.no-offset',
translateX: 100,
translateY: 100,
rotate: 120,
scale: 4,
background: '#5A87FF',
begin: function() { console.log('noOffset animation 3 began')},
complete: function() { console.log('noOffset animation 3 completed')}
})
.add({
targets: '.no-offset',
translateX: 100,
translateY: -100,
scale: 5,
background: '#FBF38C',
begin: function() { console.log('noOffset animation 4 began')},
complete: function() { console.log('noOffset animation 4 completed')}
})
.add({
targets: '.no-offset',
translateX: 100,
translateY: -100,
scale: '+=8',
background: '#FBF38C',
begin: function() { console.log('noOffset animation 5 began')},
complete: function() { console.log('noOffset animation 5 completed')}
});
练练手
https://github.com/fanqingsong/sun_system
实现一个太阳系行星围绕太阳运转动画。
一个流行的网页动画JS库的更多相关文章
- impress.js 一个创建在线幻灯的js库
真的好奇怪,我居然会写前端技术的博客.没有办法的,最近实习,看的大多是前端.所以今天就用这个来练练手了. Impress.js 是一个非常棒的用来创建在线演示的Javascript库.它基于CSS3转 ...
- 安利一个绘制指引线的JS库leader-line
前言 之前看到一篇推荐Magi这个搜索引擎的新闻,对于这个搜索引擎是否好用咱们不予置评,但是我在这个搜索引擎上面发现了一个好玩的前端功能. 如上图,将鼠标浮动到学习来源上时,会展示一堆指引线. 本博客 ...
- 一个构建XML对象的js库
初学javascript,学习中用到在IE中建立XML对象,于是写了一个简单的“库”.因为水平所限,肯定会有不恰当的地方,欢迎指正. 如果大家有知道现存的更好的东西,非常希望大家能将它推荐给我. 代码 ...
- 利用moment为基础,基于DOM实现一个多个倒计时同时进行的js库方便使用
moment非常强大,提供了很多时间方法的封装,项目需要一个小倒计时的功能,网上找了很多不合适,决定自己写一个,直接上代码 //定义一个立即执行的函数(function () { var Ticts= ...
- 利用Bootstrap制作一个流行的网页
首先是html承载内容: <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 12个值得关注的顶级可视化JS库 涉及图表、动画、时间处理,表格操作
本文是译文,原文是https://da-14.com/blog/top-11...我在原文的基础上加了百度的Echats图表库,这个也是毫不逊色其他图表库的.另外Handsontable电子表格库也是 ...
- Dynamics.js - 创建逼真的物理动画的 JS 库
Dynamics.js 是一个用来创建物理动画 JavaScript 库.你只需要把dynamics.js引入你的页面,然后就可以激活任何 DOM 元素的 CSS 属性动画,也可以用户 SVG 属性. ...
- 网页3D效果库Three.js初窥
网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...
随机推荐
- linux 提升NFS性能
如何修改同时发起的NFS请求数量 阿里云ecs服务器请查看官方文档 linux上NFS性能只有几MB速度.NFS客户端对于同时发起的NFS请求数量进行了控制,默认编译的内核中此参数值为2,严重影响性能 ...
- Nginx的特性功能-反向代理、负载均衡、缓存、动静分离、平滑升级
反向代理 nginx配置文件 events { } 事件驱动 httpd { } 关于httpd相关的配置 server { } 定义虚拟主机 location { } ...
- (七)Kubernetes Service资源
Service概述 为什么要使用Service Kubernetes Pod是平凡的,由Deployment等控制器管理的Pod对象都是有生命周期的,它们会被创建,也会意外挂掉.虽然它们可以由控制器自 ...
- 使用django的MTV开发模式返回一个网页
1.MTV开发模式介绍 M:Models 模型(数据) 与数据组织相关的功能.组织和存储数据的方法和模式,与数据模型相关的操作. T:Templates 模板(样式) 与表现相关的所有功能.页面展示风 ...
- 彻底理解 Cookie、Session、Token
发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录谁在某一段时间里都浏览了什么文档,每次请求都是一个新的HTTP协议, 就是请求加响应, 尤其是我不用记 ...
- 编程语言和python介绍, 变量,小整数池,垃圾回收机制
1.编程语言的发展史 计算机是基于电工作(基于高.低电平)1010010101011 1.机器语言 优点:执行速度够快 缺点:开发效率非常低 2.汇编语言(通过英文字符组成) 优点:执行效率相较于机器 ...
- java中使用final关键字修饰一个变量时,是引用不能变,还是引用的对象不能变?
java中使用final关键字修饰一个变量时,是引用不能变,还是引用的对象不能变? 是引用对象的地址值不能变,引用变量所指向的对象的内容是可以改变. final变量永远指向这个对象,是一个常量指针,而 ...
- React于React native的渲染机制
面向virtual DOM编程 vs 面向native componet编程: 状态编程引起的UI变化会全部提交到native compnent然后走平台原来的渲染流程. The DOM is jus ...
- rpm命令(转)
rpm -qa|grep mysql rpm命令是RPM软件包的管理工具.rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受 ...
- VisualStudio中集成扩展调试SOS
SOS扩展也是可以和VisualStudio进行集成的,这样真的方便了我们调试一些性能要求比较高的程序,当程序运行一段时间后我们用VS附加到进程,然后查看一些重要的对象数据,但是此时我们看不到.NET ...