Github轻量级开源动画引擎——Animejs

JavaScript09

Github轻量级开源动画引擎——Animejs,第1张

Anime.js是一个轻量级的JavaScript动画库,具有简单但功能强大的API。它与CSS属性,SVG,DOM属性和JavaScript对象一起使用。

Github

在Github上已收获近35k的star数,可见其非常受广大使用者的热爱!

特性

复杂的交错动画变得简单

css分层转换

在单个HTML元素上同时以不同的时间对多个CSS变换属性进行动画处理。

控件和回调

时间就是一切

使用完整的内置回调和控件功能同步播放,暂停,控制,倒退和触发事件。

动画任何东西

HTML,JS,CSS,SVG

安装使用

ES6:

CommonJS:

Demo

文字动画

块状动画

徽标动画

球状动画

总结

anime是一个非常值得使用的动画引擎,它足够简单,足够满足需求,足够的轻量,足够的惊艳!

CSS3动画以百分比表示关健帧,你可以随意从0%-100%自己定义每个关健帧的动作。0%就是开始,100%就是结束。

@-webkit-keyframes anime {

0%{把样式写这里}

50%{把样式写这里}

100%{把样式写这里}

}

Express 是一个简洁、灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。

1.express组织结构

app demo

|---node_modules------用于安装本地模块。

|---public------------用于存放用户可以下载到的文件,比如图片、脚本、样式表等。

|---routes------------用于存放路由文件。

|---views-------------用于存放网页的模板。

|---app.js------------应用程序的启动脚本。

|---package.json------项目的配置文件。

2..创建express服务器

//app.js文件

var express = require('express')

var app = express()

//指定更目录显示的内容

app.get('/', function(req, res){

res.send('Hello World')

})

//指定监听端口

var server = app.listen(3000, function() {

console.log('Listening on port %d', server.address().port)

})

运行nodejs应用程序

/>node app.js

3.中间件

中间件(middleware)就是处理HTTP请求的函数.

当一个HTTP请求进入服务器,服务器实例会调用第一个中间件,完成后根据设置,决定是否再调用下一个中间件.

中间件的参数为:

.四个的时候---第一个为错误处理,第二个为客户请求request,第三个为服务器响应respond,第四个为next中间件. 如function(error, request, response, next){}

.三个的时候---第一个客户请求request,第二个为服务器响应respond,第三个为next中间件. 如function(request, response, next){}

.两个的时候---第一个客户请求request,第二个为服务器响应respondfunction. 如function(request, response){}

4.使用中间件use

use是express调用中间件的方法,它返回一个函数.

app.use(function(request, response) {

response.writeHead(200, { "Content-Type": "text/plain" })

response.end("Hello world!\n")

})

5.错误内容显示

app.use(express.bodyParser())//使用body参数

app.use(express.methodOverride())//使用函数覆盖

app.use(app.router)//使用路由

app.use(function(err, req, res, next){

console.error(err.stack)

res.send(500, 'Something broke!')

})//错误内容显示

6.路由

express路由的方式有多种,这里举例常用的几种:

.app.use('/', middleware)//get/post时,对于路径/的处理

.app.get("/", middleware)//http中get时,对于路径/的处理

.app.post("/", middleware)//http中post时,对于路径/的处理

.app.put("/", middleware)//http中put时,对于路径/的处理

.app.delete("/", middleware)//http中delete时,对于路径/的处理

7.路径通配符*

.*表示所有路径

app.get("*", function(request, response) {

response.end("404!")

})//所有路径都返回404

.:捕获路径内容

app.get("/hello/:who", function(req, res) {

res.end("Hello, " + req.params.who + ".")

})//如"/hello/alice”网址,网址中的alice将被捕获,作为req.params.who属性的值

8.设置环境变量set

set用于指定变量的值.

app.set("view engine", "ejs")//使用ejs作为模版

9.response对象方法

.重定向redirect

response.redirect("/hello/anime")//重定向到/hello/anime

.发送文件sendFile

response.sendFile("/path/to/anime.mp4")

.渲染网页模板render,即把变换的内容加载到网页.

response.render("index", { message: "Hello World" })//将message变量传入index模板,值为"Hello World"渲染成HTML网页

10.requst对象方法

.获取客户ip地址:request.ip

.获取上传的文件:request.files

11.启动脚本package.json

package.json用于指定app信息,nodejs版本号和其他组件的依赖关系

{

"name": "demo",

"description": "My First Express App",

"version": "0.0.1",

"dependencies": {

"express": "3.x"

}

}

12.app入口app.js

app.js主要包含http的创建,基本路由,监听端口号

13.动态网页模板views

views文件夹,用于存放所有的放网页模板.

//app.js

app.get('/', function(req, res) {

res.render('index',{title:"最近文章"})

})

//index.js

this is <%=title%>!

14.指定静态网页目录

//app.js

app.use(express.static('public'))//指定静态网页目录,当浏览器发出非HTML文件请求时,服务器端就到public目录寻找这个文件

如:<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">, 服务器端就到public/bootstrap/css/目录中寻找bootstrap.css文件